Asp.net Core MVC 6 - bootstrap modal bind bool? checkbox

Question

I am having issues with the boolean keeping it's value on a partial modal bootstrap view.

In the model there is a boolean property

        [Required]
        public bool? IsActive { get; set; }
          

In the Index Controller I have several Viewbag list's that are being generated. The ViewBag.IsActive will generate the list however the correct value is not selected when the partial view loads. The rest of the list are working and the correct value is selected when the edit button gets clicked.

   ViewBag.IsActive = new List<SelectListItem>
   {
       new SelectListItem {Text = "--Not Set--", Value = ""},
       new SelectListItem {Text = "True", Value=true.ToString()},
       new SelectListItem {Text = "False", Value=false.ToString()}
  };

  ViewBag.ExamType = new List<SelectListItem>
   {
   new SelectListItem{ Text="Credentialed", Value = "C" },
   new SelectListItem{ Text="Review", Value = "R" },
   new SelectListItem{ Text="Scantron", Value = "S" },
   new SelectListItem{ Text="Practice", Value = "P" }
   };

  ViewBag.ExamTime = new List<SelectListItem>
  {
              new SelectListItem{ Text="1 Hour", Value = "3600" },
              new SelectListItem{ Text="1.25 Hour", Value = "4500" },
              new SelectListItem{ Text="1.5 Hours", Value = "5400" },
              new SelectListItem{ Text="1.75 Hours", Value = "6300" },
              new SelectListItem{ Text="2 Hours", Value = "7200" },
              new SelectListItem{ Text="2.5 Hours", Value = "9000" },
              new SelectListItem{ Text="3 Hours", Value = "10800" },
              new SelectListItem{ Text="4.5 Hours", Value = "16200" },
              new SelectListItem{ Text="No Time Limit", Value = "0" }
  };

   ViewBag.CredentialId = new SelectList(db.Credentials.Where(x => x.IsActive == true || x.CredentialCode == "5YEAR").OrderBy(x => x.CredentialDesc), "CredentialId", "CredentialDesc");

   ViewBag.CredentialStatusId = new SelectList(db.CredentialStatuses.OrderBy(x => x.CredentialStatusDescription), "CredentialStatusId", "CredentialStatusDescription");

In the Index view there is a function updating the value below I have val.(data.IsActive) for ddlActiveStatusOption and IsActive for testing to trying and brink back a value.

    function FunctionEdit(element) {
    var id = $(element).closest('tr').find('#hdncode').val();
    CreateNew();
    $.ajax({
        type: 'post',
        url: '@Url.Action("GetById", "Exams")/' + id,
        data: { code: id },
        async: false,
        success(data) {
            console.log("what is this",data)
            console.log("isActive", data.isActive)
            if (data != null) {
                $('#CredentialId').val(data.credentialId);
                $('#CredentialStatusId').val(data.credentialStatusId);
                $('#ExamTime').val(data.examTime);
                $('#ExamType').val(data.examType);
                $('#IsActive').val(data.isActive);
                $('#ddlActiveStatusOption').val(data.isActive)
            }
        },          
        error() {

        }
    });
}

console.logs from above code block

The GetById

  public Exam GetById(int Id)
  {
      var exam = db.Exams.FirstOrDefault(x => x.ExamId == Id);
      return exam;
  }

The partial view is then called

    <div class="form-group">
    <label asp-for="CredentialId" class="control-label"></label>
    <select asp-for="CredentialId" class="form-control" asp-items="ViewBag.CredentialId"></select>
    <span asp-validation-for="CredentialId" class="text-danger"></span>
    </div>

    <div class="form-group">
    <label asp-for="CredentialStatusId" class="control-label"></label>
    <select asp-for="CredentialStatusId" class="form-control" asp-items="ViewBag.CredentialStatusId"></select>
    <span asp-validation-for="CredentialStatusId" class="text-danger"></span>
    </div> 

    <div class="form-group">
    <label asp-for="ExamTime" class="control-label"></label>
    <select asp-for="ExamTime" class="form-control" asp-items="ViewBag.ExamTime"></select>
    <span asp-validation-for="ExamTime" class="text-danger"></span>
    </div>
   
    <div class="form-group">
    <label asp-for="ExamType" class="control-label"></label>
    <select asp-for="ExamType" class="form-control" asp-items="ViewBag.ExamType"></select>
    <span asp-validation-for="ExamType" class="text-danger"></span>
    </div>

   <div class="form-group">
   <label asp-for="IsActive" class="control-label"></label>
   <select asp-for="IsActive" class="form-control" asp-items="ViewBag.IsActive"></select>
   <span asp-validation-for="IsActive" class="text-danger"></span>

   <input id="ddlActiveStatusOption" class="form-control" /> 

I can get a true or false value for ddlActiveStatusOption if I put the id in an input tag however no values are kept for IsActive. What am I doing wrong? I have read through documentation of the links below and have tried many of the answers.

SelectListItem with Boolean values, instead of strings Checkbox not working with boolean viewmodel property

Answer 1

Usually we don't bind the model using ajax way. When using ajax, you need to convert boolean to string in your ajax.

Turn

$('#IsActive').val(result.isActive);

To

$('#IsActive').val(""+result.isActive+"");

And add Value=true.ToString().ToLower() in the controller

The View