我當前的視圖正在顯示員工列表。顯示的所有行和列都是模型綁定的。請參閱下面的視圖代碼：@using System.Linq@using DN_.Extensions@model DN_.Models.NotificationsModel<script src="~/Scripts/jquery-3.3.1.min.js"></script><script type="text/javascript" language="javascript"> $(function () { $("#checkAll").click(function () { $("input[id='cb_Notify']").prop("checked", this.checked).change(); var count = $("input[name='cb_Notify']:checked").length; }) $("input[id='cb_Notify']").click(function () { if ($("input[name='cb_Notify']:checked").length == $("input[id='cb_Notify']").length) { $("#checkAll").prop("checked", "checked").change(); } else { $("#checkAll").removeProp("checked").change(); } }) })</script>@{ ViewBag.Title = "Link Employees";}<h2>Link Employees</h2>@using (Html.BeginForm()){ @Html.AntiForgeryToken() <input id="btn_Save" type="submit" value="Save" class="btn btn-default" /> @Html.ActionLink("Back to List", "Index") <p> Select All <input type="checkbox" id="checkAll" /> Select All On Premise <input type="checkbox" id="checkAllOnPremise" /> Select All Full Timers<input type="checkbox" id="checkAllFullTimers" /> </p> <table class="table"> <tr> <th align=center>Notify?</th> <th align=center>Employee Name</th> <th align=center>Is On Premise</th> <th align=center>Is Full Time</th> <th align=center>Notified On</th> </tr>我的問題如下：我可以使用第一個通知復選框代碼行（即使用 EditorFor 和 CheckBoxFor 選項）手動選擇所有通知復選框，并將數據保存在回發(fā)事件中。如何獲得全選復選框選項以在 EditorFor 或 CheckBoxFor 模型綁定復選框上工作。對我來說，命名的 CheckBox 選項與 Select All 框按預期工作，但我無法將數據返回到 post 事件處理程序。所選通知列的模型數據返回為 null。
2 回答
慕慕森
TA貢獻1856條經驗 獲得超17個贊
因為您的name(and id) 屬性包括集合索引器，所以您可以使用 jQuery Attribute Ends With Selector (例如$('input[type="checkbox"][name$="Notify"]'))，但這會更容易使用復選框的類名。
@Html.CheckBoxFor(m => m.EmployeeNotification[i].Notify, new { @class = "notify" })
然后你的腳本可以
// cache for performance
var checkboxes = $('.notify');
var total = checkboxes.length;
var checkall = $('#checkAll');
checkall.change(function() {
checkboxes.prop('checked', $(this).is(':checked'));
})
checkboxes.change(function() {
var count = checkboxes.filter(':checked').length;
checkall.prop('checked', (count == total));
})
但是，您的代碼還有另一個問題。默認情況下，DefaultModelBinder所需的集合索引器從零開始且連續(xù)。如果您的集合中的第一項滿足@if (Model.EmployeeNotification[i].NotifiedOn >= DateTime.Parse("2000-01-01 12:00:00 AM"))條件，那么您的EmployeeNotification屬性將null在 POST 方法中?；蛘?，如果說第 3 項滿足該條件，EmployeeNotification則將僅包含前 2 條記錄。您需要為集合索引器添加額外的輸入以允許DefaultModelBinder綁定非零/非連續(xù)索引器
@if (Model.EmployeeNotification[i].NotifiedOn >= DateTime.Parse("2000-01-01 12:00:00 AM"))
{
@Html.DisplayFor(m => m.EmployeeNotification[i].Notify)
}
else
{
@Html.HiddenFor(m => m.EmployeeNotification[i].NotificationID)
@Html.HiddenFor(m => m.EmployeeNotification[i].EmployeeID)
@Html.HiddenFor(m => m.EmployeeNotification[i].EmployeeName)
@Html.CheckBoxFor(m => m.EmployeeNotification[i].Notify, new { @class = "notify" })
<input type="hidden" name="EmployeeNotification.Index" value="@i" /> // add this
}
此外，我建議您刪除除 ID 屬性（我假設為NotificationID）之外的其他隱藏輸入。它只是包括不必要的 html，因為保存數據不應該需要這些屬性，它只是允許惡意用戶更改這些值。我還建議您的視圖模型包含一個（比如說）bool IsEditable屬性，并且當您將數據模型映射到視圖模型時，您根據 GET 方法中的條件設置該值，這樣if塊就變成了@if (Model.EmployeeNotification[i].IsEditable) { ... } else { ... }
慕田峪7331174
TA貢獻1828條經驗 獲得超13個贊
使用他的建議的一些靈感，我還設法找到了上面斯蒂芬帖子的另一個解決方案。不是很干凈，但是，嘿，它有效。我絕對推薦斯蒂芬的代碼。更加簡潔明了。
將自定義 cb_Notify 復選框移動并隱藏到單元格頂部，以便在每一行中創(chuàng)建它。這將使其可搜索所有行等，我可以在循環(huán)中使用它：
@Html.CheckBox("cb_Notify", Model.EmployeeNotification[i].Notify, new { type = "hidden" })
@*Do not allow editing of the Notify field for employees who have been sent the notification already*@
@if (Model.EmployeeNotification[i].NotifiedOn >= DateTime.Parse("2000-01-01 12:00:00 AM"))
{
@Html.DisplayFor(modelItem => Model.EmployeeNotification[i].Notify)
}
else
{
@*Hidden items for the post back information*@
@Html.HiddenFor(modelItem => Model.EmployeeNotification[i].NotificationID)
@Html.HiddenFor(modelItem => Model.EmployeeNotification[i].EmployeeID)
@Html.CheckBoxFor(modelItem => Model.EmployeeNotification[i].Notify, new { @class = "notify" })
}
然后對于 jquery，使用隱藏的復選框循環(huán)遍歷所有行并設置需要設置的值：
// cache for performance
var checkAll = $('#checkAll');
checkAll.click(function () {
var maxCount = $("input[id='cb_Notify']").length;
var loopCounter;
var customer;
for (loopCounter = 0; loopCounter < maxCount; loopCounter++) {
customer = $("input[name='EmployeeNotification[" + loopCounter + "].EmployeeName']").val();
if (customer != null) {
$("input[name='EmployeeNotification[" + loopCounter + "].Notify']").prop("checked", this.checked);
}
}
toggleSetAllCheckBoxStates();
})
我創(chuàng)建的 toggleSetAllCheckBoxStates() 函數是因為有次要要求（超出了這個問題的范圍，所以我將把它排除在外）根據數據設置僅選擇員工數據的子集。但它遵循與上述示例相同的路線。
這樣，在回發(fā)事件中，我過濾掉了空數據，因為已發(fā)送通知的數據不包含 EmployeeID。其余數據保存成功。
- 2 回答
- 0 關注
- 174 瀏覽
添加回答
舉報
0/150
提交
取消