c# - jQuery datatables v1.10 服务器端 - 向服务器方法发送附加参数

Question

我正在开发 C# MVC 应用程序。 有一个包含多个字段的搜索页面。当用户单击搜索按钮时，除了默认数据表 json 之外，我还想将 json 中搜索字段的值传递给服务器端方法，以根据这些搜索字段值过滤记录并将这些结果显示在 table 。我已经尝试了几种方法，但搜索字段 json 永远不会到达服务器端方法。我确实收到了 iColumns、iDisplayLength、iSortCol_0 等 jquery 参数，但我没有收到搜索字段 json。我正在使用 jquery 数据表版本 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");
                    }
                })
              }
            });

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

"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 始终为 null

与 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

所以:

你不需要 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

注意最后的自定义 Prop 。

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