Question

我正在研究C＃MVC应用程序。有一个包含多个字段的搜索页面。当用户单击搜索按钮时，除了默认的数据表json外，我还希望将json中搜索字段中的值传递给服务器端方法，以根据这些搜索字段值过滤记录并将这些结果显示在表。我已经尝试了几种方法，但是搜索字段json从未到达服务器端方法。我确实收到了诸如iColumns，iDisplayLength，iSortCol_0等之类的jquery参数，但是我没有收到搜索字段json。我正在使用jquery datatable版本1.10，我已经在兼容模式下尝试过这样：

            tblSearchResults = $('#tblSearchResults').dataTable({
            "bServerSide": true,
            "bFilter": true,
            "sAjaxSource": '@Url.Action("GetSearchResults", "jQueryDataTable", new { area = "" }, this.Request.Url.Scheme)',
            "fnServerData": function (sSource, aoData, fnCallback, oSettings) {
                aoData.push(getSearchJson())
                $.ajax({
                    "dataType": 'json',
                    "type": "POST",
                    "url": sSource,
                    "data": aoData,
                    "success": fnCallback,
                    "error": function (e) {
                        ErrorDialog(e.Message, "Error");
                    }
                })
              }
            });

在兼容模式下，我还尝试将对象添加到请求网址的末尾：

"sAjaxSource": '@Url.Action("GetSearchResults", "jQueryDataTable", new { area = "" }, this.Request.Url.Scheme)?searchJson=' + getSearchJson(),

我还尝试了1.10命名约定：

tblSearchResults = $('#tblSearchResults ').DataTable({,
            "serverSide": true,
            "searching": true,
            "ajax": {
                "url": '@Url.Action("GetSearchResults,", "jQueryDataTable", new { area = "" }, this.Request.Url.Scheme)',
                "data": getSearchJson()
            },
        });

javascript getSearchJson函数如下所示：

function getSearchJson() {
        var jsonObj = {
            FirstName: $('#@Html.IdFor(m => Model.FirstName)').val() || '',
            LastName: $('#@Html.IdFor(m => Model.LastName)').val() || '',
            PhoneNumber: $('#@Html.IdFor(m => Model.PhoneNumber)').val() || '',
        };
        return JSON.stringify(jsonObj);
    }

这是我使用服务器端方法尝试过的方法：带有url参数的兼容模式：

public ActionResult GetSearchResults(jQueryDataTableParamModel param, searchParamModel searchJson)
    { do search and return results}

searchJson始终为空

与fnServerData的兼容模式：

public ActionResult GetSearchResults(jQueryDataTableParamModel param)
    {         
            string json = HttpUtility.UrlDecode(Request.GetJsonData());
            inModel = Newtonsoft.Json.JsonConvert.DeserializeObject<searchParamModel>(json);

我对具有1.10命名约定的DataTable使用了相同的方法。这似乎是与jquery param参数相同的json，绝对不是我要查找的搜索字段json。

我想将搜索json和默认的jquery表参数json一起发送。如何做到这一点？我浏览了很多帖子，但没有找到解决方法

请帮助。谢谢

Answer 1

SO：

您不需要JSON.stringify您的对象；看起来数据表将为您做到这一点。

如果该查询字符串开始变得太长，则可能需要使用POST而不是GET。

javascript：

tblSearchResults = $('#tblSearchResults ').DataTable({
            "serverSide": true,
            "searching": true,
            "ajax": {
                "url": "https://google.com/controller",
                "type": "POST",
                "data": getSearchJson()
            },
        });

function getSearchJson() {
        var jsonObj = {
            FirstName: "blah",
            LastName: "blah2",
            PhoneNumber: "blah3",
        };
        return jsonObj;
        //return JSON.stringify(jsonObj);
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<table id="tblSearchResults" class="display" style="width:100%">
        <thead>
            <tr>
                <th>First name</th>
                <th>Last name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Start date</th>
                <th>Salary</th>
            </tr>
        </thead>
        <tfoot>
            <tr>
                <th>First name</th>
                <th>Last name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Start date</th>
                <th>Salary</th>
            </tr>
        </tfoot>
    </table>

在jsfiddle中：https://jsfiddle.net/obxnfh1u/

和正在发送的请求（用Fiddler查看）：

draw=1&columns%5B0%5D%5Bdata%5D=0&columns%5B0%5D%5Bname%5D=&columns%5B0%5D%5Bsearchable%5D=true&columns%5B0%5D%5Borderable%5D=true&columns%5B0%5D%5Bsearch%5D%5Bvalue%5D=&columns%5B0%5D%5Bsearch%5D%5Bregex%5D=false&columns%5B1%5D%5Bdata%5D=1&columns%5B1%5D%5Bname%5D=&columns%5B1%5D%5Bsearchable%5D=true&columns%5B1%5D%5Borderable%5D=true&columns%5B1%5D%5Bsearch%5D%5Bvalue%5D=&columns%5B1%5D%5Bsearch%5D%5Bregex%5D=false&columns%5B2%5D%5Bdata%5D=2&columns%5B2%5D%5Bname%5D=&columns%5B2%5D%5Bsearchable%5D=true&columns%5B2%5D%5Borderable%5D=true&columns%5B2%5D%5Bsearch%5D%5Bvalue%5D=&columns%5B2%5D%5Bsearch%5D%5Bregex%5D=false&columns%5B3%5D%5Bdata%5D=3&columns%5B3%5D%5Bname%5D=&columns%5B3%5D%5Bsearchable%5D=true&columns%5B3%5D%5Borderable%5D=true&columns%5B3%5D%5Bsearch%5D%5Bvalue%5D=&columns%5B3%5D%5Bsearch%5D%5Bregex%5D=false&columns%5B4%5D%5Bdata%5D=4&columns%5B4%5D%5Bname%5D=&columns%5B4%5D%5Bsearchable%5D=true&columns%5B4%5D%5Borderable%5D=true&columns%5B4%5D%5Bsearch%5D%5Bvalue%5D=&columns%5B4%5D%5Bsearch%5D%5Bregex%5D=false&columns%5B5%5D%5Bdata%5D=5&columns%5B5%5D%5Bname%5D=&columns%5B5%5D%5Bsearchable%5D=true&columns%5B5%5D%5Borderable%5D=true&columns%5B5%5D%5Bsearch%5D%5Bvalue%5D=&columns%5B5%5D%5Bsearch%5D%5Bregex%5D=false&order%5B0%5D%5Bcolumn%5D=0&order%5B0%5D%5Bdir%5D=asc&start=0&length=10&search%5Bvalue%5D=&search%5Bregex%5D=false&FirstName=blah&LastName=blah2&PhoneNumber=blah3

请注意最后的自定义道具。

ajax.data数据表中的特定文档：https://datatables.net/reference/option/ajax.data

jQuery数据表v1.10服务器端-向服务器方法发送附加参数

1 个答案: