【发布时间】：2017-11-20 20:58:56
【问题描述】：
我有一个在 Visual Studio 2017 社区中开发的 ASP.NET、MVC 5、.Net 4.5、C#、JavaScript、Jquery Datatables Web 应用程序。
当我单击数据表按钮时，它会弹出一个带有字符串、数字和复选框的引导模式框。
它显示并允许我更改字符串和数字，并将它们写回数据库，但由于某种原因，我无法让复选框按应有的方式操作。
它不会从数据中填充复选框，当我单击模态屏幕上的保存更改按钮时，即使我选中模态窗口内的复选框，它也会将复选框数据更新为 false。此外，如果复选框数据已经为 false，选中并保存复选框不会将数据库字段更改为 true。
这是模态 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">×</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 -->这是我显示模态窗口的方式：
$('#mEdit').show();
$('#mAdd').hide();
$('#MasterModal').modal('show');
$('#MasterModalLabel').text('Edit Mailbox');
loadSelectedRowData(masterTable);这是函数 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);
};这是我在单击“保存更改”按钮后使用的：
$('#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这是 "var url = "/Mailbox/ModalEdit";" 的 C#：
// 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("");
}
}
任何人都可以提供任何帮助以找出我做错了什么，我们将不胜感激。
谢谢， 托尼
2017 年 6 月 23 日更新 我设法部分解决了这个问题。
在模态屏幕中，如果我选中一个复选框并单击 Save Changes，它将 true 保存到数据表和数据库，如果我取消选中一个复选框并单击 Save Changes，它会将 false 保存到数据表和数据库。
我通过将这个：useSslName: Boolean($('#useSslName').val()) 更改为这个：useSslName: document.getElementById("useSslName") 来做到这一点。在 $('#mEdit').click(function () {.
中选中如果数据表和数据库为真，我仍然坚持使用复选框来填充模态屏幕。目前，最初显示 Modal 屏幕时，即使数据表和数据库为 true，也不会选中复选框。
任何人都可以提供解决该问题的任何帮助，我们将不胜感激。
再次感谢， 托尼
【问题讨论】：
-
@Html.CheckBoxFor(model => model.PromptForPassword, new { htmlAttributes = new { @type = "checkbox", @class = "checkbox col-md-1", @id = "promptForPasswordName" } })这样的代码可能有问题，我认为应该是@Html.CheckBoxFor(model => model.PromptForPassword, htmlAttributes: new { @type = "checkbox", @class = "checkbox col-md-1", @id = "promptForPasswordName" })。 -
@DanDumitru，感谢您的帮助。我使用您建议的编码应用了所有复选框。现在它似乎正在做与它正在做的相反的事情。使用我的 SSL 复选框的原始代码，无论我是否选中 SSL 复选框，它都会将数据中的 SSL 标志更改为“false”。使用您的代码，无论我是否选中 SSL 复选框，它都会将数据中的 SSL 标志更改为“true”。
标签： javascript c# jquery asp.net twitter-bootstrap