首页 > 解决方案 > 如何使用模型 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="{
                                    &quot;target&quot;: &quot;#un_@Model.RepsActiveCustomerModelList[i].CustomerID&quot;,
                                    &quot;type&quot;: &quot;css-animation&quot;
                                }" 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>

标签: c#htmlasp.net-mvc

解决方案


在提交表单时,将页面长度更改为 -1,这应该会显示所有内容并提交模型。

@section Scripts{ 
    <script>
        function ChangeDataTableLength()
        {
            table = $('#datatableWithCheckboxSelect').DataTable({
                retrieve: true
            });
            table.page.len(-1).draw();
        }
    </script>
    }

推荐阅读