将 Jquery 数据表中的所有数据从视图绑定到控制器

Posted 2023-05-07

【中文标题】将 Jquery 数据表中的所有数据从视图绑定到控制器

【英文标题】：Bind All data in Jquery Datatables from View To Controller

【发布时间】：2017-10-21 20:03:43

【问题描述】：

我将视图中的数据绑定到控制器，所以以后我可以对数据做我想做的事。在我的视图中，我使用dataTable 和@html.EditorForModel() 来呈现我的视图。

查看

<form action="xx" method="POST">
<table id="myTable" class="table table-bordered table-hover table-striped">
    <thead>
        <tr>
            <th></th>
            <th>
                @Html.DisplayNameFor(model => model.Field1)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.Field2)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.Field3)
            </th>
        </tr>
    </thead>
    <tbody>
    @if (Model != null)
    
        @Html.EditorForModel()
    
    </tbody>
    <tfoot></tfoot>
</table>

<input type="submit" value="submit" />
</form>

脚本

$("#myTable").dataTable(
        searching: false,
        ordering: false,
        responsive: true,
        "bLengthChange" : false,
        "pageLength": 20,
        "bStateSave": true
    );

控制器

[HttpPost]
public ActionResult MyAction(List<MyModel> MyListModel)

如果dataTables 中的数据不超过 1 页，则此方法非常有用。如果超过 1 页，则 My Controller 要么只能接收第一页的 List Data，要么什么都不接收（null）

我应该如何将 DataTables 中的所有数据从 View 绑定到 Controller？此绑定应包括所有页面，而不仅仅是第一个页面

【参考方案1】：

我不确定你是如何触发数据更新的，所以假设它是一个按钮，以下应该可以工作：

$('#your-button').on('click', function(e)
   var data = ('#myTable').DataTable().$('input,select,textarea').serialize();

   $.ajax(
      url: '/MyController/MyAction/',
      data: data,
      success: function()
         alert('success');
      , 
      error: function()
         alert('failure');
      
   );
);

编辑 1：

根据this 对How to post data for the whole table using jQuery DataTables 的回答，如果您打算使用表单，请使用以下内容：

var table = $('#myTable').DataTable();

$('#myForm').on('submit', function(e)
   var form = this;

   var params = table.$('input,select,textarea').serializeArray();

   $.each(params, function()
      if(!$.contains(document, form[this.name]))
         $(form).append(
            $('<input>')
               .attr('type', 'hidden')
               .attr('name', this.name)
               .val(this.value)
         );
      
   );
);

【讨论】：

通过使用DataTable().$('input,select,textarea')，这是获取所有数据和输入的好方法。但是，我宁愿绑定我的数据而不是使用 AJAX

除非您使用表单，否则您希望如何绑定数据？您正在使用第三方库将数据存储在 DOM 上 - 处理此问题的最有效和最安全的方法是序列化 AJAX 调用。

抱歉，如果我没有在我的问题中包含它。我使用带有提交按钮的表单。我已经编辑了我的问题

在这种情况下，您的问题看起来与this question 重复。 IMO 意见 AJAX 在这种情况下是更好的选择，而不是在表单中创建不可见的元素。

天啊，我真的不知道我有一个重复的问题。你用什么样的元词来找到那个问题？我用谷歌搜索了几天，结果一无所获。好吧，就我而言，使用 AJAX 意味着我需要更改所有代码。所以我更喜欢append表单中的不可见元素。如果您想将带有append 函数的答案添加到表单中，我会接受您的答案。

【参考方案2】：

因为你不想要任何 ajax 使用javascript Source Data，将模型传递给视图，对其进行序列化，并将其用作源代码

var myData = @Html.Raw(Json.Encode(Model.ListOfData));

//then pass it to the datatable   

$('#example').DataTable( 
        data: myData,
        columns: [
             title: "col1" ,
             title: "col2" ,
           etc ... 
        ]
     );

【参考方案3】：

使用 DataTables，DOM 中只存在当前页面数据。如果您提交表单，则只有当前页面数据会被提交回服务器。一种解决方案是通过 ajax 提交数据：

var myTable = $('#myTable').DataTable();

$('#your-form').on('submit', function(e)
   e.preventDefault();

   //serialize your data
   var data = myTable.$('input,select,textarea').serialize();

   $.ajax(
      url: '@Url.Action('MyAction', 'MyController')',
      data: data,
      success: function(responseData)
         //do whatever you want with the responseData
      
   );
);

【讨论】：

这不正是我所回答的吗？

通过使用DataTable().$('input,select,textarea')，这是获取所有数据和输入的好方法。但是，我宁愿绑定我的数据而不是使用 AJAX

【参考方案4】：

需要使用data()方法获取整张表的数据：

$('#your-form').on('submit', function(e)
  e.preventDefault();

  var table = $('#myTable').DataTable();
  var data = table.data();

  $.ajax(
    url: '/MyController/MyAction/',
    type: 'POST',
    dataType: 'json',
    contentType: "application/json;",
    data: JSON.stringify(data),
    success: function()
       alert('success');
    , 
    error: function()
       alert('failure');
    
  );

【讨论】：

dataTable 和 DataTable 是两个不同的东西。要使用DataTable 函数，应使用dataTable.api()。但与其他答案相同，我宁愿使用绑定数据方法而不是 AJAX

【参考方案5】：

请通过以下链接

https://www.codeproject.com/Articles/155422/jQuery-DataTables-and-ASP-NET-MVC-Integration-Part