c# - 如何使用模型 mvc 从数据表的第二页传递复选框值
问题描述
我有一个使用 html 而不是 Ajax 方法定义的数据表。通过复选框,我可以选择将保存到数据库中的项目,未选中的项目将被删除。奇怪的是,当我提交表单时,我无法从 dataTable 的第一页获取值,但是第二页检查的项目没有被传递。
<div class="table-responsive datatable-custom">
<table id="datatableWithCheckboxSelect" class="table table-lg table-borderless table-thead-bordered table-nowrap table-align-middle card-table"
data-hs-datatables-options='{
"order": [1, "asc"],
"columnDefs": [ {
"targets": [0, 6],
"orderable": false
} ],
"info": {
"totalQty": "#datatableWithPaginationInfoTotalQty"
},
"search": "#datatableSearch",
"entries": "#datatableEntries",
"pageLength": 8,
"isResponsive": false,
"isShowPaging": false,
"pagination": "datatablePagination"
}'>
<thead class="thead-light">
<tr>
<th class="table-column-pr-0">
<div class="custom-control custom-checkbox">
<input id="datatableWithCheckboxSelectAll" type="checkbox" class="custom-control-input" checked>
<label class="custom-control-label" for="datatableWithCheckboxSelectAll"></label>
</div>
</th>
<th>Company Name</th>
<th>Account Code</th>
<th>Rate Class</th>
<th>Rep Code</th>
<th>Rep Name</th>
<th></th>
</tr>
</thead>
<tbody class="font-size-1">
@for (int i = 0; i < Model.RepsActiveCustomerModelList.Count; i++)
{
<tr class="">
<td class="table-column-pr-0">
<div class="custom-control custom-checkbox">
@Html.CheckBoxFor(model => Model.RepsActiveCustomerModelList[i].IsChecked, new { id = Model.RepsActiveCustomerModelList[i].CustomerID, @class = "custom-control-input" })
@*<input name="check" type="checkbox" asp-for="@Model.RepsActiveCustomerModelList[i].IsChecked" checked class="custom-control-input" id="@Model.RepsActiveCustomerModelList[i].CustomerID">*@
<input type="hidden" value="@Model.RepsActiveCustomerModelList[i].IsChecked" asp-for="@Model.RepsActiveCustomerModelList[i].IsChecked" />
<input type="hidden" value="@Model.RepsActiveCustomerModelList[i].CustomerID" asp-for="@Model.RepsActiveCustomerModelList[i].CustomerID" />
<label class="custom-control-label" for="@Model.RepsActiveCustomerModelList[i].CustomerID"></label>
</div>
</td>
<td class="align-middle">
<a class="d-flex align-items-center">
<div class="avatar avatar-soft-primary avatar-circle">
<span class="avatar-initials">
@Model.RepsActiveCustomerModelList[i].CompanyName.Substring(0, 1)
</span>
</div>
<div class="ml-3">
<span class="d-block h5 mb-0">@Model.RepsActiveCustomerModelList[i].CompanyName</span>
<input type="hidden" value="@Model.RepsActiveCustomerModelList[i].CompanyName" asp-for="@Model.RepsActiveCustomerModelList[i].CompanyName" />
</div>
</a>
</td>
<td class="align-middle">
<div class="media align-items-center">
<span value="2" name="@Model.RepsActiveCustomerModelList[i].AccountCode">@Model.RepsActiveCustomerModelList[i].AccountCode</span>
<input type="hidden" value="@Model.RepsActiveCustomerModelList[i].AccountCode" asp-for="@Model.RepsActiveCustomerModelList[i].AccountCode" />
</div>
</td>
<td class="align-middle">
<div class="media align-items-center">
<span>@Model.RepsActiveCustomerModelList[i].RateClassDescription</span>
<input type="hidden" value="@Model.RepsActiveCustomerModelList[i].RateClassDescription" asp-for="@Model.RepsActiveCustomerModelList[i].RateClassDescription" />
</div>
</td>
<td class="align-middle">
<div class="media align-items-center">
<span>@Model.RepsActiveCustomerModelList[i].FWRepCode</span>
<input type="hidden" value="@Model.RepsActiveCustomerModelList[i].FWRepCode" asp-for="@Model.RepsActiveCustomerModelList[i].FWRepCode" />
</div>
</td>
<td class="align-middle">
<div class="media align-items-center">
<span>@Model.RepsActiveCustomerModelList[i].RepName</span>
<input type="hidden" value="@Model.RepsActiveCustomerModelList[i].RepName" asp-for="@Model.RepsActiveCustomerModelList[i].RepName" />
</div>
</td>
<td class="align-middle">
<div class="hs-unfold">
<a class="js-hs-unfold-invoker btn btn-sm btn-white" href="javascript:;" data-hs-unfold-options="{
"target": "#un_@Model.RepsActiveCustomerModelList[i].CustomerID",
"type": "css-animation"
}" data-hs-unfold-target="#@Model.RepsActiveCustomerModelList[i].CustomerID" data-hs-unfold-invoker="">
Actions <i class="tio-chevron-down ml-1"></i>
</a>
<div id="un_@Model.RepsActiveCustomerModelList[i].CustomerID" class="hs-unfold-content dropdown-unfold dropdown-menu dropdown-menu-sm dropdown-menu-right hs-unfold-content-initialized hs-unfold-css-animation animated hs-unfold-hidden" data-hs-target-height="145.078" data-hs-unfold-content="" data-hs-unfold-content-animation-in="slideInUp" data-hs-unfold-content-animation-out="fadeOut" style="animation-duration: 300ms;">
<a class="dropdown-item" href="@Url.Action("ContactList", "Customer", new { accountCode = Model.RepsActiveCustomerModelList[i].AccountCode })" data-toggle="tooltip" data-placement="top" title="Contacts">
<i class="fal fa-address-card mr-2"></i>Contacts
</a>
</div>
</div>
</td>
</tr>
}
</tbody>
@Html.HiddenFor(model => model.RateCycleID)
</table>
</div>
解决方案
在提交表单时,将页面长度更改为 -1,这应该会显示所有内容并提交模型。
@section Scripts{
<script>
function ChangeDataTableLength()
{
table = $('#datatableWithCheckboxSelect').DataTable({
retrieve: true
});
table.page.len(-1).draw();
}
</script>
}
推荐阅读
- angularjs - AngularJS表单验证密码确认
- python-3.x - 用于文件格式化目的的 Shell 脚本
- powershell - 如何使用 pnp powershell 获取 SharePoint 在线列表中最后修改项目的项目 ID?
- python - 比较 2 个列表并将值附加到新的字典列表
- javascript - 未捕获的类型错误:无法读取未定义数组的属性“长度”
- javascript - 统计json对象的记录
- angular - 没有在 Angular 中获取正确的文件路径
- next.js - 在 nextjs 中更改语言时如何使用 next-i18next 进行更改?
- mysql - 如何在mysql中使用last id插入多行?
- angular - 在 Angular 8 中有一个可重用的模态组件