jQuery datatables v1.10 на стороне сервера - отправьте дополнительный параметр в метод сервера - PullRequest
0 голосов
/ 30 ноября 2018

Я работаю над приложением C # MVC.Есть страница поиска с несколькими полями.Когда пользователь нажимает кнопку поиска, я хотел бы передать значения из полей поиска в json, в дополнение к стандартному датному json, в метод на стороне сервера, чтобы отфильтровать записи на основе этих значений поля поиска и отобразить эти результаты вТаблица.Я пробовал это несколькими способами, но поле поиска json никогда не достигает метода на стороне сервера.Я получаю параметры jquery, такие как iColumns, iDisplayLength, iSortCol_0 и т. Д., Но я не получаю поля поиска 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");
                    }
                })
              }
            });

В режиме совместимости я также пытался добавить объект в конец 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);

Я использовал этот же метод для DataTableс 1.10 соглашениями об именах.Похоже, это тот же json, что и у параметра jquery param, определенно не те поля поиска, которые я ищу json.

Я хотел бы отправить поиск json вместе со стандартным параметром jquery таблицы json.Как этого достичь?Я просмотрел много постов, но не нашел решения

Пожалуйста, помогите.Спасибо

1 Ответ

0 голосов
/ 30 ноября 2018

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...