How do I use checkboxes inside a twitter-bootstrap-3 Modal box

Question

I have an ASP.NET, MVC 5, .Net 4.5, C#, JavaScript, Jquery Datatables web application developed in Visual Studio 2017 Community.

When I click a Datatables button, it brings up a Bootstrap Modal box with strings, numbers and checkboxes.

It displays and allows me to change the strings and numbers and it writes them back to the database, but for some reason I can't get the checkboxes to operate the way they should.

It does not populate the checkboxes from the data and when I click the Save changes button on the Modal screen, it updates the checkbox data as false even if I check the checkbox inside the Modal window. Also, if the checkbox data is already false, checking the checkbox and saving it does not change the database field to true.

Here is the Modal HTML:

 <div class="modal" id="MasterModal" tabindex="-1" role="dialog" aria-labelledby="MasterModalLabel" aria-describedby="Aria described by" aria-hidden="true"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> <h4 class="modal-title" id="MasterModalLabel">Add New </h4> </div> <div class="modal-body"> <div class="container"> @using (Html.BeginForm()) { @Html.AntiForgeryToken() <div class="form-horizontal compact"> @Html.ValidationSummary(true, "", new { @class = "text-danger" }) <div class="row form-group"> @Html.LabelFor(model => model.Alias, htmlAttributes: new { @class = "control-label col-md-2" }) @Html.EditorFor(model => model.Alias, new { htmlAttributes = new { @class = "form-control col-md-10", @id = "aliasName" } }) @Html.ValidationMessageFor(model => model.Alias, "", new { @class = "text-danger" }) </div> <div class="row form-group"> @Html.LabelFor(model => model.User, htmlAttributes: new { @class = "control-label col-md-2" }) @Html.EditorFor(model => model.User, new { htmlAttributes = new { @class = "form-control col-md-10", @id = "userName" } }) @Html.ValidationMessageFor(model => model.User, "", new { @class = "text-danger" }) </div> <div class="row form-group"> @Html.LabelFor(model => model.Host, htmlAttributes: new { @class = "control-label col-md-2" }) @Html.EditorFor(model => model.Host, new { htmlAttributes = new { @class = "form-control col-md-10", @id = "hostName" } }) @Html.ValidationMessageFor(model => model.Host, "", new { @class = "text-danger" }) </div> <div class="row form-group"> @Html.LabelFor(model => model.Password, htmlAttributes: new { @class = "control-label col-md-2" }) @Html.EditorFor(model => model.Password, new { htmlAttributes = new { @class = "form-control col-md-4", @id = "passwordName", style = "width: 130px" } }) @Html.ValidationMessageFor(model => model.Password, "", new { @class = "text-danger" }) @Html.CheckBoxFor(model => model.PromptForPassword, new { htmlAttributes = new { @type = "checkbox", @class = "checkbox col-md-1", @id = "promptForPasswordName" } }) @Html.LabelFor(model => model.PromptForPassword, htmlAttributes: new { @class = "control-label col-md-5" }) </div> <div class="row form-group"> @Html.LabelFor(model => model.ServerPortNumber, htmlAttributes: new { @class = "control-label col-md-6" }) @Html.EditorFor(model => model.ServerPortNumber, new { htmlAttributes = new { @class = "form-control col-md-6", @id = "portName", style = "width: 60px" } }) @Html.ValidationMessageFor(model => model.ServerPortNumber, "", new { @class = "text-danger" }) </div> <div class="row form-group"> @Html.LabelFor(model => model.PollPeriod, htmlAttributes: new { @class = "control-label col-md-6" }) @Html.EditorFor(model => model.PollPeriod, new { htmlAttributes = new { @class = "form-control col-md-6", @id = "pollName", style = "width: 60px" } }) @Html.ValidationMessageFor(model => model.PollPeriod, "", new { @class = "text-danger" }) </div> <div class="row form-group"> @Html.LabelFor(model => model.UseSsl, htmlAttributes: new { @class = "control-label col-md-6" }) @Html.CheckBoxFor(model => model.UseSsl, new { htmlAttributes = new { @type = "checkbox", @class = "checkbox col-md-6", @id = "useSslName" } }) @Html.ValidationMessageFor(model => model.UseSsl, "", new { @class = "text-danger" }) </div> <div class="row form-group"> @Html.LabelFor(model => model.MailboxNotEnabled, htmlAttributes: new { @class = "control-label col-md-6" }) @Html.CheckBoxFor(model => model.MailboxNotEnabled, new { htmlAttributes = new { @class = "checkbox col-md-6", @id = "mailboxNotEnabledName" } }) @Html.ValidationMessageFor(model => model.MailboxNotEnabled, "", new { @class = "text-danger" }) </div> </div> } </div><!-- /.container --> </div><!-- /.modal-body --> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary" id="mAdd">Add new mailbox</button> <button type="button" class="btn btn-warning" id="mEdit">Save changes</button> </div> </div><!-- /.modal-content --> </div><!-- /.modal-dialog --> </div><!-- /.modal --> 

This is how I display the Modal window:

  $('#mEdit').show(); $('#mAdd').hide(); $('#MasterModal').modal('show'); $('#MasterModalLabel').text('Edit Mailbox'); loadSelectedRowData(masterTable); 

This is the function loadSelectedRowData:

  function loadSelectedRowData(oTable) { var idx = currentrow; var id = oTable.row(idx).data().MailboxID; var alias = oTable.row(idx).data().Alias; var user = oTable.row(idx).data().User; var host = oTable.row(idx).data().Host; var password = oTable.row(idx).data().Password; var promptforpassword = oTable.row(idx).data().PromptForPassword; var port = oTable.row(idx).data().ServerPortNumber; var poll = oTable.row(idx).data().PollPeriod; var mailboxnotenabled = oTable.row(idx).data().MailboxNotEnabled; var usessl = oTable.row(idx).data().UseSsl; //Assign values to the modal box $('#aliasName').val(alias); $('#userName').val(user); $('#hostName').val(host); $('#passwordName').val(password); $('#promptForPasswordName').val(promptforpassword); $('#portName').val(port); $('#pollName').val(poll); $('#mailboxNotEnabledName').val(mailboxnotenabled); $('#useSslName').val(usessl); }; 

This is what I use after the Save changes button is clicked:

  $('#mEdit').click(function () { var idx = currentrow; var pk = masterTable.row(idx).data().MailboxID; var url = "/Mailbox/ModalEdit"; var data = { MailboxID: pk, aliasName: $('#aliasName').val(), userName: $('#userName').val(), hostName: $('#hostName').val(), passwordName: $('#passwordName').val(), promptForPasswordName: Boolean($('#promptForPasswordName').val()), portName: Number($('#portName').val()), pollName: Number($('#pollName').val()), mailboxNotEnabledName: Boolean($('#mailboxNotEnabledName').val()), useSslName: Boolean($('#useSslName').val()) }; $.post(url, data, function (d) { if (d.msg == "success") { masterTable.draw('page'); alert("Mailbox updated!"); $('#MasterModal').modal('hide'); return false; } alert("Something went wrong. Please retry!" + data.msg); }) });//end edit 

This is the C# for "var url = "/Mailbox/ModalEdit";":

          // Edit Mailbox
      public ActionResult ModalEdit(FormCollection form)
      {
           using (SchoolContext db = new SchoolContext())
           {
                if (ModelState.IsValid)
                {
                     try
                     {
                          Mailbox mailbox = db.Mailboxes.Find(Convert.ToInt32(form["MailboxID"]));
                          //mailbox.Alias = form["Name"].Trim();
                          mailbox.Alias = form["aliasName"].Trim();
                          mailbox.User = form["userName"].Trim();
                          mailbox.Host = form["hostName"].Trim();
                          mailbox.Password = form["passwordName"].Trim();
                          mailbox.PromptForPassword = Convert.ToBoolean(form["promptForPasswordName"]);
                          mailbox.ServerPortNumber = Convert.ToInt16(form["portName"]);
                          mailbox.PollPeriod = Convert.ToInt16(form["pollName"]);
                          mailbox.MailboxNotEnabled = Convert.ToBoolean(form["mailboxNotEnabledName"]);
                          mailbox.UseSsl = Convert.ToBoolean(form["useSslName"]);

                          db.SaveChanges();
                          return Json(new { msg = "success" });
                     }
                     catch (Exception ex)
                     {
                          return Json(new { msg = "Fail！" + ex.Message });
                     }
                }
                return Content("");
           }
      }

Any help that anyone can provide to figure out what I am doing wrong would be gratefully appreciated.

Thanks, Tony

Update on 06/23/2017 I managed to partially fix this issue.

While in the Modal screen, If I check a checkbox and click Save Changes, it saves true to the datatable and the database and If I uncheck a checkbox and click Save Changes, it saves false to the datatable and the database.

I did that by changing this: useSslName: Boolean($('#useSslName').val()) to this: useSslName: document.getElementById("useSslName").checked in the $('#mEdit').click(function () { .

I am still stuck on populating the Modal screen with a check in the checkbox if the datatable and database are true. Currently, when initially showing the Modal screen, the check boxes are not checked even if the datatable and database are true.

Any help that anyone can provide to resolve that issue would be gratefully appreciated.

Thanks again, Tony

Answer 1

Update on 06/24/2017

I managed to get this to work.

While in the Modal screen, If I check a checkbox and click Save Changes, it saves true to the datatable and the database and If I uncheck a checkbox and click Save Changes, it saves false to the datatable and the database.

I did that by changing this: useSslName: Boolean($('#useSslName').val()) to this: useSslName: document.getElementById("useSslName").checked in the $('#mEdit').click(function () { .

To populate the Modal screen with the proper checkbox settings before the modal is displayed, I added this: document.getElementById("useSslName").checked = (oTable.row(idx).data().UseSsl); to the function loadSelectedRowData(oTable) {

Since I am not an expert at this stuff, I'm not sure if these changes are the best way to accomplish what I am doing, but it is working the way I want.