使用分页时，使用DataTable在MVC中使用实体提交模型失败

我想使用实体提交模型，但在使用DataTable插件时切换到另一个页面时控制器没有接收实体。

视图：

using (Ajax.BeginForm("EditLeads", new { mode = Model.leadMode }, new AjaxOptions { OnBegin = "displayAllDataTable", UpdateTargetId = "leadDisplay", LoadingElementId = "spinner", OnSuccess = "refreshLeadsAfterRemovingAndTabSwitching" }, new { id="dataTableForm"})) {  @for (int i = 0; i < Model.leadsList.Count; i++) {  @* *@  @* *@  } 
 
 
 
 Select 
 
 Date added 
 
 Contact name 
 
 Contact number 
 
 Email 
 
 Source 
 
 Status 
 
 Assigned to user: 
 
 Back up user: 
 
 Comments 
 
 
 
 
 @Model.leadsList[i].leadId @Html.HiddenFor(model => model.organisationId) @Html.HiddenFor(model => Model.leadsList[i].leadId) @Html.CheckBoxFor(model => Model.leadsList[i].selected, new { @class = "selectedLead", data_val = false, data_leadId = Model.leadsList[i].leadId, id = "selected_" + Model.leadsList[i].leadId }) 
 @Html.DisplayFor(model => model.leadsList[i].leadId) @Html.HiddenFor(model => Model.leadsList[i].leadId) 
 @Model.leadsList[i].leadDate @Html.DisplayFor(model => Model.leadsList[i].leadDate) 
 @Html.HiddenFor(model => Model.leadsList[i].leadId) @Model.leadsList[i].description @Html.EditorFor(model => Model.leadsList[i].description) 
 @Model.leadsList[i].contactName @Html.DisplayFor(model => Model.leadsList[i].contactName) 
 
 @Model.leadsList[i].contactMobile @Html.EditorFor(model => Model.leadsList[i].contactMobile) 
 
 @Model.leadsList[i].contactEmail @Html.EditorFor(model => Model.leadsList[i].contactEmail) @Html.HiddenFor(model => Model.leadsList[i].contactId) 
 
 
 
 @Model.leadsList[i].leadStatusName @Html.DropDownListFor(model => Model.leadsList[i].leadStatusId, new SelectList(Model.leadStatusList, "leadStatusId", "name", Model.leadsList[i].leadStatusId), null, new { data_val = false }) 
 
 @Model.leadsList[i].assignedToUserId @Html.DropDownListFor(model => Model.leadsList[i].assignedToUserId, new SelectList(Model.users, "UserId", "Email", Model.leadsList[i].assignedToUserId), "Select user", new { data_val = false, data_users = Model.leadsList[i].leadId, @class = "usersList" }) 
 
 @Model.leadsList[i].backupUserId @Html.DropDownListFor(model => Model.leadsList[i].backupUserId, new SelectList(Model.users, "UserId", "Email", Model.leadsList[i].backupUserId), "Select user", new { data_val = false }) 
 
 
 
 
 
 
 Select 
 
 Date added 
 
 Contact name 
 
 Contact mobile 
 
 Email 
 
 Source 
 
 Status 
 
 Assigned to user 
 
 Back up user 
 
 Comments 
 
 
 
 
 
 Assign selected to
 @Html.DropDownList("userList", new SelectList(Model.users, "UserId", "Email"), "Select user") 
  } 

我的委托人希望收到带有潜在客户列表的模型。

 public ActionResult EditLeads(LeadsVM leadVM, string mode, FormCollection form) { // Assign user to lead var user = form["userList"]; var leadsToUpdate = leadVM.leadsList.Where(m => m.selected == true); foreach (var lead in leadsToUpdate) ... 

如果我从下拉列表中选择值以在页面上显示100个项目，一切正常，但是一旦切换到另一个页面，名称绑定就会崩溃，模型为leadVM.leadsList传递null。 我做了一些我认为可能有帮助的小黑客。 在将模型发送到控制器之前，我正在调用displayAllDataTable函数。

 function displayAllDataTable() { console.log($("#dataTable_length select")); $("#dataTable_length select").val(100); $("#dataTable_length select").trigger("change"); } 

不幸的是，该函数强制dataTable在第一页上显示所有结果，但模型仍然为leadsList传递null。 我假设我将不得不调用一些dataTable函数来刷新表中的字段，然后表单可以正确提交，但必须有更简单的方法。

总结一下，我总是希望将所有数据从表传递给控制器​​，无论我当前在哪个页面。

数据表

 table = $('#dataTable').DataTable({ 'dom': '<lfip>', "aoColumns": [ { "bSearchable": true }, { "bSearchable": true }, { "bSearchable": true }, { "bSearchable": true }, { "bSearchable": true }, { "bSearchable": true }, { "bSearchable": false }, { "bSearchable": false }, { "bSearchable": false }, { "bSearchable": true } ] }); 

Answer 1

找到解决方案

首先，我在dataTables js中调整了一个值。

  "aLengthMenu": [ 10, 25, 50, 100, 1000 ]. 

我添加了1000，但您可以添加任何您想要的值。

在表单下我将输入类型从提交更改为按钮并调用了函数。

我定义了这个函数：

 function displayAllDataTable() { $("#dataTable_length select").val(1000); $("#dataTable_length select").trigger("change"); $("#dataTableForm").submit(); } 

现在一切都很好。

Answer 2

我阅读了API文档并提出了另一种解决方案，它允许通过使用page.len绘制整个表来进行数据绑定。 对于包含数千行的大型表，这不是一个理想的解决方案，并且从UI角度看起来很奇怪，因为整个表在表单提交到控制器之前绘制。 另外我注意到在Controller端，如果绑定到Datatable中的列表，则绑定/列表的顺序与Datatable排序无关。

page.len

以下是添加到页面末尾的来源：

Answer 3

基于Adam Bielecki的post，我已经稍微调整了一下以避免1000长度选项，如下所示……只需使用-1代替！

  lengthMenu": [[10, 25, 50, **-1**], [10, 25, 50, "All"]] function displayAllDataTable() { $("#example1_length select").val(**-1**); $("#example1_length select").trigger("change"); $("#groupForm").submit(); }