将 Jquery 数据表中的所有数据从视图绑定到控制器
Posted
技术标签:
【中文标题】将 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
【讨论】:
以上是关于将 Jquery 数据表中的所有数据从视图绑定到控制器的主要内容,如果未能解决你的问题,请参考以下文章