使用jQuery数据表服务器端处理mvc.序列化条件表单并将此参数添加到$ ajax.post方法

Question

我正在使用mvc和jquery数据表,并进行服务端处理.

我创建了两个类模型:第一个jQueryParamModel,将dataTables参数传递给动作控制器

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; }

}

第二个存在两个自定义搜索条件

 public class Home2Model
    {
        public CriteriaModel SearchCriteria1 { get; set; }
        public CriteriaModel SearchCriteria2 { get; set; }
    }

用Home2Model创建一个强类型视图后,命名为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>

}

我已经创建了一个控制器动作,在输入这​​个参数时:

[HttpPost]
    public ActionResult AjaxHandler(JQueryDataTableParamModel param,Home2Model hm)
    {
        return new EmptyResult();
    }

JQueryDataTableParamModel绑定工作正常,但hm param没有valorized(null).mvc绑定无法正常工作.

谁能帮我 ？

谢谢你的优势.

Answer 1

$("myForm").serialize()这里不会切芥末.首先$("myForm")是一个选择器,正在寻找一个<myForm>我认为不存在的标签.你可能正在寻找一个<form>id ="myForm" 的标签,在这种情况下,正确的选择器就是这样$('#myForm').

这就是说,该.serialize()方法将简单地将表单输入字段转换为application/x-www-form-urlencoded有效负载.但是当你将hm它传递给参数时,它显然是行不通的.application/x-www-form-urlencoded如果希望模型绑定器能够正确地反序列化,则需要整个请求有效负载.

那么让我建议你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;
};

一旦你宣布它,你可以简单地这样做:

$('#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个参数将被正确绑定.只需检查Networkjavascript调试工具中的选项卡,即可查看2个有效负载之间的差异,您将了解代码无效的原因.