使用DataTable在MVC中使用实体提交模型在使用分页时会失败 [英] Submitting model with entities in MVC using DataTable fails when using pagination

问题描述

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

查看：

$ b使用（Ajax.BeginForm（EditLeads），新的{mode = Model.leadMode}，新的AjaxOptions {OnBegin =displayAllDataTable，UpdateTargetId =leadDisplay，
$ b

 ，LoadingElementId =spinner，OnSuccess =refreshLeadsAfterRemovingAndTabSwitching}，新的{id =dataTableForm}））
 {
< table id =dataTable> 
< thead> 
< tr> 
< th style =max-width：40px;> 
选择
< / th> 
 
< th> 
添加日期
< / th> 
< th> 
联系人名称
< / th> 
< th> 
联络电话号码
< / th> 
< th> 
电子邮件
< / th> 
< th> 
来源
< / th> 
< th> 
状态
< / th> 
< th> 
分配给用户：
< / th> 
< th> 
备份用户：
< / th> 
< th> 
评论
< / th> 
 
< / tr> 
< / thead> 
< tbody> 
 @for（int i = 0; i< Model.leadsList.Count; i ++）
 {
< tr> 
< td style =width：40px; vertical-align：middle; text-align：center> 
< span class =hideDisplayField> @ Model.leadsList [i] .leadId< / span> 
 @ 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} ）
< / td> 
 @ *< td> 
 @ Html.DisplayFor（model => model.leadsList [i] .leadId）
 @ Html.HiddenFor（model => Model.leadsList [i] .leadId）
< / td> * @ 
< td> 
< span class =hideDisplayField> @ Model.leadsList [i] .leadDate< / span> 
 @ Html.DisplayFor（model => Model.leadsList [i] .leadDate）
< / td> 
 @ *< td> 
 @ Html.HiddenFor（model => Model.leadsList [i] .leadId）
< span class =hideDisplayField> @ Model.leadsList [i] .description< / span> 
 @ Html.EditorFor（model => Model.leadsList [i] .description）
< / td> * @ 
< td> 
< span class =hideDisplayField> @ Model.leadsList [i] .contactName< / span> 
 @ Html.DisplayFor（model => Model.leadsList [i] .contactName）
< / td> 
< td> 
< span class =hideDisplayField> @ Model.leadsList [i] .contactMobile< / span> 
 @ Html.EditorFor（model => Model.leadsList [i] .contactMobile）
< / td> 
< td> 
< span class =hideDisplayField> @ Model.leadsList [i] .contactEmail< / span> 
 @ Html.EditorFor（model => Model.leadsList [i] .contactEmail）
 @ Html.HiddenFor（model => Model.leadsList [i] .contactId）
< / td> 
< td> 
< / td> 
< td> 
< span class =hideDisplayField> @ Model.leadsList [i] .leadStatusName< / span> 
 @ Html.DropDownListFor（model => Model.leadsList [i] .leadStatusId，新的SelectList（Model.leadStatusList，leadStatusId，name，Model.leadsList [i] .leadStatusId），null，new {data_val = false}）
< / td> 
< td> 
< span class =hideDisplayField> @ Model.leadsList [i] .assignedToUserId< / span> 
 @ Html.DropDownListFor（model => Model.leadsList [i] .assignedToUserId，新的SelectList（Model.users，UserId，Email，Model.leadsList [i] .assignedToUserId），选择用户，new {data_val = false，data_users = Model.leadsList [i] .leadId，@class =usersList}）
< / td> 
< td> 
< span class =hideDisplayField> @ Model.leadsList [i] .backupUserId< / span> 
 @ Html.DropDownListFor（model => Model.leadsList [i] .backupUserId，新的SelectList（Model.users，UserId，Email，Model.leadsList [i] .backupUserId），选择用户，new {data_val = false}）
< / td> 
< td> 
< / td> 
 
< / tr> 
} 
< / tbody> 
< tfoot> 
< tr> 
< th> 
选择
< / th> 
 
< th> 
添加日期
< / th> 
< th> 
联系人名称
< / th> 
< th> 
联系手机
< / th> 
< th> 
电子邮件
< / th> 
< th> 
来源
< / th> 
< th> 
状态
< / th> 
< th> 
分配给用户
< / th> 
< th> 
备份用户
< / th> 
< th> 
评论
< / th> 
 
< / tr> 
< / tfoot> 
< / table> 
 
< div id =assignUserToLeads> 
< h4> 
将选择的项目分配给< / h4> 
 @ Html.DropDownList（userList，新的SelectList（Model.users，UserId，Email），选择用户）
< / div> 
 
< input type =submitvalue =保存/> 
} 
  

我的主持人希望收到带有线索列表的模型。

  public ActionResult EditLeads（LeadsVM leadVM，string mode，FormCollection form）
 {
 //指定用户引导
 
 var user = form [userList]; 
 
 var leadsT​​oUpdate = leadVM.leadsList.Where（m => m.selected == true）; 
 
 foreach（lead lead in leadToUpdate）... 
  

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

  function displayAllDataTable（）{
 console.log （#dataTable_length select））; 
 $（＃dataTable_length select）。val（100）; 
 $（＃dataTable_length select）。trigger（change）; 
} 
  

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

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

DataTable

  table = $（'＃dataTable'）。DataTable（{
'dom'：'< lf<table_wrappert> ip>'，
 aoColumns：[
 {bSearchable：true}，
 {bSearchable：true}，
 {bSearchable：true}，
 {bSearchable 
 {bSearchable：true}，
 {bSearchable：true}，
 {bSearchable：false}，
 {bSearchable：false} ，
 {bSearchable：false}，
 {bSearchable：true} 
] 
 
}）; 
  

解决方案

找到解决方案！

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

 aLengthMenu：[10，25，50 ，100,1000]。 
  

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

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

 < input type = buttonvalue =保存onclick =displayAllDataTable（）> 
  

我定义了这个功能：

  function displayAllDataTable（）{
 
 $（＃dataTable_length select）。val（1000）; 
 $（＃dataTable_length select）。trigger（change）; 
 
 $（＃dataTableForm）。submit（）; 
 
} 
  

一切都正常。

I want to submit model with entities, but controller is not receiving entities when switching to another page when using DataTable plugin.

VIEW:

using (Ajax.BeginForm("EditLeads", new { mode = Model.leadMode }, new AjaxOptions {     OnBegin = "displayAllDataTable", UpdateTargetId = "leadDisplay", LoadingElementId =     "spinner", OnSuccess = "refreshLeadsAfterRemovingAndTabSwitching" }, new  {     id="dataTableForm"}))
{ 
<table id="dataTable">
    <thead>
        <tr>
            <th style="max-width: 40px;">
                Select
            </th>

            <th>
                Date added
            </th>
            <th>
                Contact name
            </th>
            <th>
                Contact number
            </th>
            <th>
                Email
            </th>
            <th>
                Source
            </th>
            <th>
                Status
            </th>
            <th>
                Assigned to user:
            </th>
            <th>
                Back up user:
            </th>
            <th>
                Comments
            </th>

        </tr>
    </thead>
    <tbody>
        @for (int i = 0; i < Model.leadsList.Count; i++)
        {
            <tr>
                <td style="width: 40px; vertical-align: middle; text-align: center">
                <span class="hideDisplayField">@Model.leadsList[i].leadId</span>
                @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 })
                </td>
               @* <td>
                    @Html.DisplayFor(model => model.leadsList[i].leadId)
                    @Html.HiddenFor(model => Model.leadsList[i].leadId)
                </td>*@
                <td>
                    <span class="hideDisplayField">@Model.leadsList[i].leadDate</span>
                    @Html.DisplayFor(model => Model.leadsList[i].leadDate)
                </td>
                @*  <td>
                    @Html.HiddenFor(model => Model.leadsList[i].leadId)
                    <span class="hideDisplayField">@Model.leadsList[i].description</span>
                    @Html.EditorFor(model => Model.leadsList[i].description)
                </td>*@
                <td>
                    <span class="hideDisplayField">@Model.leadsList[i].contactName</span>
                    @Html.DisplayFor(model => Model.leadsList[i].contactName)
                </td>
                <td>
                    <span class="hideDisplayField">@Model.leadsList[i].contactMobile</span>
                    @Html.EditorFor(model => Model.leadsList[i].contactMobile)
                </td>
                <td>
                    <span class="hideDisplayField">@Model.leadsList[i].contactEmail</span>
                    @Html.EditorFor(model => Model.leadsList[i].contactEmail)
                    @Html.HiddenFor(model => Model.leadsList[i].contactId)
                </td>
                <td>
                </td>
                <td>
                    <span class="hideDisplayField">@Model.leadsList[i].leadStatusName</span>
                    @Html.DropDownListFor(model => Model.leadsList[i].leadStatusId, new SelectList(Model.leadStatusList, "leadStatusId", "name", Model.leadsList[i].leadStatusId), null, new { data_val = false })
                </td>
                <td>
                    <span class="hideDisplayField">@Model.leadsList[i].assignedToUserId</span>
                    @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" })
                </td>
                <td>
                    <span class="hideDisplayField">@Model.leadsList[i].backupUserId</span>
                    @Html.DropDownListFor(model => Model.leadsList[i].backupUserId, new SelectList(Model.users, "UserId", "Email", Model.leadsList[i].backupUserId), "Select user", new { data_val = false })
                </td>
                <td>
                </td>

            </tr>
        }
    </tbody>
    <tfoot>
        <tr>
            <th>
                Select
            </th>

            <th>
                Date added
            </th>
            <th>
                Contact name
            </th>
            <th>
                Contact mobile
            </th>
            <th>
                Email
            </th>
            <th>
                Source
            </th>
            <th>
                Status
            </th>
            <th>
                Assigned to user
            </th>
            <th>
                Back up user
            </th>
            <th>
                Comments
            </th>

        </tr>
    </tfoot>
</table>

<div id="assignUserToLeads">
    <h4>
        Assign selected to</h4>
    @Html.DropDownList("userList", new SelectList(Model.users, "UserId", "Email"), "Select user")
</div>

<input type="submit" value="Save" />
}

My constroller is expecting to receive model with list of leads.

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) ...

If I select value from dropdown list to display 100 items on page, everything works fine, but once I switch to another page, name binding is falling apart and model is passing null for leadVM.leadsList. I did small hack which I thought might help. Before model is send to controller I am calling displayAllDataTable function.

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

Unfortunately the function forces dataTable to display all results on 1st page, but model still passes null for leadsList. I would assume I will have to call some dataTable function to refresh the fields in table and then the form can be correctly submitted, but there must be simpler way.

To summarize I always want to pass all data from table to controller, regardless on which page I am currently in.

DataTable

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

            });

解决方案

Found solution!

First I tweaked a value in dataTables js.

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

I added 1000, but you can add any value you want.

Under form I changed input type from submit to button and called function.

<input type="button" value="Save" onclick="displayAllDataTable()">

I define the function:

function displayAllDataTable() {

        $("#dataTable_length select").val(1000);
        $("#dataTable_length select").trigger("change");

        $("#dataTableForm").submit();

    }

Everything works fine now.

这篇关于使用DataTable在MVC中使用实体提交模型在使用分页时会失败的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！