将jQuery数据表与mvc一起用于服务器端处理.序列化条件表单并将此参数添加到$ ajax.post方法 [英] Use jQuery datatables server-side processing with mvc. Serialize criteria form and add this parameter to $ajax.post method
问题描述
我正在使用mvc和jquery数据表，并进行服务端处理.
i'm using mvc and jquery datatables, with serve side processing.
我创建了两个类模型: 第一个jQueryParamModel，将dataTables参数传递给动作控制器
I have created two Class Model: the first jQueryParamModel, to pass dataTables parameters to action controller
public class JQueryDataTableParamModel
{
/// <summary>
/// Request sequence number sent by DataTable, same value must be returned in response
/// </summary>
public string sEcho{ get; set; }
/// <summary>
/// Text used for filtering
/// </summary>
public string sSearch{ get; set; }
/// <summary>
/// Number of records that should be shown in table
/// </summary>
public int iDisplayLength{ get; set; }
/// <summary>
/// First record that should be shown(used for paging)
/// </summary>
public int iDisplayStart{ get; set; }
/// <summary>
/// Number of columns in table
/// </summary>
public int iColumns{ get; set; }
/// <summary>
/// Number of columns that are used in sorting
/// </summary>
public int iSortingCols{ get; set; }
/// <summary>
/// Comma separated list of column names
/// </summary>
public string sColumns{ get; set; }
}
第二个呈现两个自定义搜索条件
the second rapresent two custom search criteria
public class Home2Model
{
public CriteriaModel SearchCriteria1 { get; set; }
public CriteriaModel SearchCriteria2 { get; set; }
}
在我用Home2Model创建了一个强类型的视图之后，将其命名为index.cshtml
After i have created a strongly typed view with Home2Model, named index.cshtml
@model GenericSearch.UI.Models.Home2Model
<link href="@Url.Content("~/Content/dataTables/demo_table.css")" rel="stylesheet" type="text/css" />
<script src="@Url.Content("~/Scripts/jquery.dataTables.min.js")" type="text/javascript"></script>
<script>
$(document).ready(function () {
var oTable = $('#myDataTable').dataTable({
"bServerSide": true,
"sAjaxSource": "/Home2/AjaxHandler",
"bProcessing": false,
"sServerMethod": "POST",
"fnServerData": function (sSource, aoData, fnCallback) {
aoData.push({ "name": "hm", "value": $("myForm").serialize() });
$.ajax({
"dataType": 'json',
"type": "POST",
"url": sSource,
"data": aoData,
"success": fnCallback
})
}
});
});
</script>
<h1>Search</h1>
<br />
@using (Html.BeginForm("Index", "Home2", FormMethod.Post, new { id="myForm"}))
{
<div >
@Html.EditorFor(m => m.SearchCriteria1)
@Html.EditorFor(m => m.SearchCriteria2)
<br />
<input type="submit" name="default" value="Filter" />
<br /><br />
<table id="myDataTable" class="display">
<thead>
<tr>
<th>a</th>
<th>b</th>
<th>c</th>
<th>d</th>
<th>e</th>
<th>f</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
}
我已经创建了一个contoller动作，可以在输入以下参数时进行接收:
I'have create a contoller action that recive in input this parameters:
[HttpPost]
public ActionResult AjaxHandler(JQueryDataTableParamModel param,Home2Model hm)
{
return new EmptyResult();
}
JQueryDataTableParamModel绑定可以正常工作，但是hm param未被赋值(空). mvc绑定无法正常工作.
JQueryDataTableParamModel bind work properly, but hm param isn't valorized (null). the mvc binding doesn't work correctly.
有人可以帮助我吗?
谢谢你.
推荐答案
$("myForm").serialize()不会在这里切芥末.首先$("myForm")是一个选择器，正在寻找标签<myForm>，我猜它不存在.您可能正在寻找一个id ="myForm"的<form>标记，在这种情况下，正确的选择器应该是$('#myForm').
$("myForm").serialize() won't cut the mustard here. First $("myForm") is a selector that is looking for a tag <myForm> which I guess doesn't exist. You are probably looking for a <form> tag with id="myForm" in which case the correct selector would have been $('#myForm').
这就是说，.serialize()方法将简单地将表单输入字段转换为application/x-www-form-urlencoded有效负载.但是，当您将其传递给hm参数时，它显然将无法工作.如果希望模型绑定程序能够正确反序列化，则整个请求有效负载必须为application/x-www-form-urlencoded.
This being said, the .serialize() method will simply turn the form input fields into application/x-www-form-urlencoded payload. But when you pass that to the hm parameter it obviously won't work. You need the entire request payload to be application/x-www-form-urlencoded if you want the model binder to be able to deserialize it properly.
所以我建议您 following extension :
So let me suggest you the following extension:
$.fn.serializeObject = function () {
var o = {};
var a = this.serializeArray();
$.each(a, function () {
if (o[this.name] !== undefined) {
if (!o[this.name].push) {
o[this.name] = [o[this.name]];
}
o[this.name].push(this.value || '');
} else {
o[this.name] = this.value || '';
}
});
return o;
};
声明后，您只需执行以下操作即可:
Once you have declared it you can simply do that:
$('#myDataTable').dataTable({
"bServerSide": true,
"sAjaxSource": "/Home/AjaxHandler",
"bProcessing": false,
"sServerMethod": "POST",
"fnServerData": function (sSource, aoData, fnCallback) {
var formData = $('#myForm').serializeObject();
for (var key in formData) {
if (formData.hasOwnProperty(key)) {
aoData.push({
name: key,
value: formData[key]
});
}
}
$.ajax({
"dataType": 'json',
"type": "POST",
"url": sSource,
"data": aoData,
"success": fnCallback
})
}
});
和AjaxHandler操作的2个参数现在将正确绑定.只需检查您的javascript调试工具中的Network标签，以查看2个有效负载之间的区别，您就会了解为什么您的代码无法正常工作.
and the 2 arguments of your AjaxHandler action will now be correctly bound. Simply inspect the Network tab in your javascript debugging tool to see the difference between the 2 payloads and you will understand why your code didn't work.
这篇关于将jQuery数据表与mvc一起用于服务器端处理.序列化条件表单并将此参数添加到$ ajax.post方法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
