如何在 twitter-bootstrap-3 模态框中使用复选框
Posted
技术标签:
【中文标题】如何在 twitter-bootstrap-3 模态框中使用复选框【英文标题】：How do I use checkboxes inside a twitter-bootstrap-3 Modal box 【发布时间】：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”。
【参考方案1】：
2017 年 6 月 24 日更新
我设法让它工作。
在模态屏幕中，如果我选中一个复选框并单击 Save Changes，它将 true 保存到数据表和数据库，如果我取消选中一个复选框并单击 Save Changes，它会将 false 保存到数据表和数据库。
我通过将这个：useSslName: Boolean($('#useSslName').val()) 更改为这个：useSslName: document.getElementById("useSslName") 来做到这一点。在 $('#mEdit').click(function () .
中选中为了在显示模式之前使用正确的复选框设置填充模式屏幕，我添加了以下内容：document.getElementById("useSslName").checked = (oTable.row(idx).data().UseSsl ); 到 函数 loadSelectedRowData(oTable)
由于我不是这方面的专家，我不确定这些更改是否是完成我正在做的事情的最佳方式，但它正在按照我想要的方式工作。
【讨论】：
以上是关于如何在 twitter-bootstrap-3 模态框中使用复选框的主要内容，如果未能解决你的问题，请参考以下文章
如何在 JavaScript 中使用模运算符 (%)？ [复制]