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

我使用的是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; }

}

使用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>

}

JQueryDataTableParamModel绑定工作正常，但hm param没有值化（null）。mvc绑定无法正常工作

有人能帮我吗

非常感谢您的帮助。

$（“myForm”）.serialize（）

在这里不会起作用。第一个

$（“myForm”）

是一个选择器，它正在寻找一个我猜不存在的标记

。您可能正在查找id为=“myForm”的

标记，在这种情况下，正确的选择器应该是

$（“#myForm”）

这就是说，

.serialize（）

方法只需将表单输入字段转换为

application/x-www-form-urlencoded

有效负载。但是当您将其传递给

hm

参数时，它显然不起作用。如果希望模型绑定器能够正确地对其进行反序列化，则需要将整个请求负载设置为

application/x-www-form-urlencoded

因此，我建议您：

声明后，您可以简单地执行以下操作：

$('#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

操作的两个参数。只需检查javascript调试工具中的

网络

选项卡，查看这两个有效负载之间的差异，您就会明白为什么代码不起作用。

我喜欢这个解决方案！

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

$.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
        })
    }
});