0
我有一個在Visual Studio 2017社區中開發的ASP.NET，MVC 5，.Net 4.5，C＃，JavaScript，Jquery Datatables Web應用程序。如何在twitter-bootstrap-3模式框中使用複選框
當我點擊一個Datatables按鈕時，它會彈出一個帶有字符串，數字和複選框的Bootstrap模式框。
它顯示並允許我更改字符串和數字，並將它們寫回數據庫，但出於某種原因，我無法使複選框以他們應該的方式操作。
它不會填充數據中的複選框，當我單擊Modal屏幕上的保存更改按鈕時，即使選中Modal窗口中的複選框，也會將複選框數據更新爲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這是C＃的「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("");
}
}
任何人都可以提供的幫助來弄清楚我做錯了什麼，將不勝感激。
感謝， 託尼
更新在2017年6月23日 我設法部分地解決這個問題。
在Modal屏幕中，如果選中複選框並單擊Save Changes，它會將true保存到數據表和數據庫中，如果取消選中複選框並單擊Save Changes，它會將false保存到數據表和數據庫中。
我這樣做，通過改變這樣的：useSslName：布爾（$（ '＃useSslName'）VAL（）。）這樣：useSslName：的document.getElementById（ 「useSslName」）在$檢查 （'#mEdit'）。click（function（）{。
如果數據表和數據庫爲真，我仍然堅持在複選框中填入Modal屏幕。目前，最初顯示模式屏幕時，即使數據表和數據庫爲真，複選框也不會被檢查。
任何人都可以提供的任何幫助來解決這個問題將不勝感激。再次
感謝， 託尼
可能存在類似'@ Html.CheckBoxFor（model => model.PromptForPassword，new {htmlAttributes = new {@type =「checkbox」，@class =「checkbox col-md-1」，@ id =「promptForPasswordName」}}）'，我_think_它應該是'@ Html.CheckBoxFor（model => model.PromptForPassword，htmlAttributes：new {@type =「checkbox」，@class =「checkbox col-md-1」 ，@id =「promptForPasswordName」}）'。 –
@DanDumitru，謝謝你的幫助。我使用您建議的編碼來應用所有複選框。現在它似乎正在做與它所做的相反的事情。使用我的原始代碼作爲SSL複選框，它會將數據中的SSL標誌更改爲'false'，無論是否檢查SSL複選框。使用您的代碼，它會將數據中的SSL標誌更改爲「true」，無論是否檢查SSL複選框。 – Tony