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

Posted 2023-05-07

【中文标题】使用带有 mvc 的 jQuery 数据表服务器端处理。序列化条件表单并将此参数添加到 $ajax.post 方法

【英文标题】：Use jQuery datatables server-side processing with mvc. Serialize criteria form and add this parameter to $ajax.post method

【发布时间】：2014-05-09 09:33:09

【问题描述】：

我正在使用 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 参数没有被 valorized (null)。 mvc 绑定无法正常工作。

谁能帮帮我？

谢谢你。

【参考方案1】：

$("myForm").serialize() 不会在这里切芥末。首先$("myForm") 是一个选择器，它正在寻找标签<myForm>，我猜它不存在。您可能正在寻找带有 id="myForm" 的 <form> 标记，在这种情况下，正确的选择器应该是 $('#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 个参数现在将被正确绑定。只需检查您的 javascript 调试工具中的 Network 选项卡，查看 2 个有效负载之间的差异，您就会明白为什么您的代码无法正常工作。

【讨论】：

我喜欢这个解决方案！