jsGrid вызывает контроллер .Net Core - ячейки не загружают данные

Question

Использование jsGrid / .net core 2.2 / MVC Я успешно возвращаю данные при вызове ajax и регистрируюсь на консоли, но не могу понять, почему поля не заполнены?

My View

<div id="jsGrid"></div>

@section scripts {
<script>
    $(function () {

        $("#jsGrid").jsGrid({
            height: "50%",
            width: "100%",

            filtering: true,
            inserting: true,
            editing: true,
            sorting: true,
            paging: true,
            autoload: true,

            pageSize: 10,
            pageButtonCount: 5,

            //deleteConfirm: "Do you really want to delete client?",

            controller: {
                loadData: function () {
                    var d = $.Deferred();

                    $.ajax({
                        type: 'GET',
                        url: "/operator/GridJson",
                        dataType: "json",
                        success: function (data) {
                            d.resolve(data);
                            console.log('success ', data);
                        },
                        error: function (e) {
                            alert("error: " + e.responseText);
                        }
                    });

                    return d.promise();
                }                    
            },

            fields: [
                { name: "OperatorId", type: "number", width: 50 },
                { name: "FirstName", type: "text", width: 150 },
                { name: "LastName", type: "text", width: 150 },
                { name: "LicenseNumber", type: "number", width: 50, filtering: false },
                { name: "RFIDNumber", type: "number", width: 50, filtering: false },
                { name: "DateCreated", type: "date", width: 50, filtering: false },
                { name: "LastUpdated", type: "date", width: 50, filtering: false },
                { name: "CompanyId", type: "number", width: 50 }
                //    { type: "control" }
            ]
        });
        console.log("test");

    });
</script>
}

Метод моего контроллера

[HttpGet]
public string GridJson()
{
    List<OperatorDetail> operators = service.GetOperators();

    string json = JsonConvert.SerializeObject(operators);

    return json;

}

Консольный журнал

(5) [{…}, {…}, {…}, {…}, {…}]
0: {OperatorId: 1, FirstName: "driver1", LastName: "driver1", LicenseNumber: 12345, RFIDNumber: 12345, …}
1: {OperatorId: 2, FirstName: "driver2", LastName: "driver2", LicenseNumber: 23456, RFIDNumber: 23456, …}
2: {OperatorId: 3, FirstName: "driver3", LastName: "driver3", LicenseNumber: 34567, RFIDNumber: 34567, …}
3: {OperatorId: 4, FirstName: "driver4", LastName: "driver4", LicenseNumber: 45678, RFIDNumber: 45678, …}
4: {OperatorId: 5, FirstName: "driver5", LastName: "driver5", LicenseNumber: 56789, RFIDNumber: 56789, …}
length: 5
__proto__: Array(0)

Answer 1

Недавно у меня недавно была такая же проблема, и мне потребовалось некоторое время, чтобы найти кого-то еще, кто бы мне ее указал.У itminus есть хорошая часть решения, но, так как у вас включена поддержка пейджинга, вам необходимо вернуть данные в конкретный объект JSON.

{ 
  data: [{your list here}],
  itemsCount: {int}
}

Едва ли в документации, так как он встроен и не очень очевиден.(Выделено жирным шрифтом.)

loadData - это функция, возвращающая массив данных или обещание jQuery, которое будет разрешено с массивом данных (когда pageLoading имеет значение true вместо объекта, структура {data: [items], itemsCount: [общее количество элементов]} должны быть возвращены).Принимает параметр фильтра, включая текущие параметры фильтра и параметры подкачки, когда

http://js -grid.com / docs / # controller

Answer 2

Причина в том, что ваша loadData() асинхронная функция возвращается до того, как вы получите ответ.

Чтобы исправить это, измените вашу функцию loadData, чтобы она возвращала обещание.

loadData: function(filter){
    return $.ajax({
        type:"GET",
        url: "/operator/GridJson",
        data:filter,
        dataType:"JSON",
    });
}

[Редактировать]

На самом деле, если вы проверите источник с помощью инструмента разработчика F12, вы найдете уже обработанные поля.Оказывается, нам также нужно изменить height: "100%", так как это сделает эти поля невидимыми.

Вот полный список рабочего образца:

$("#jsGrid").jsGrid({
    width: "100%",
    <strike>height: "100%",</strike>
    <b>height: "400px",</b>
    inserting: true,
    editing: true,
    sorting: true,
    paging: true,
    autoload: true,

    pageSize: 10,
    pageButtonCount: 5,

    //deleteConfirm: "Do you really want to delete client?",

    controller: {
        <b>loadData: function(filter){
            return $.ajax({
                type:"GET",
                url: "/book/index",
                data:filter,
                dataType:"JSON",
            });
        } </b>                 
    },

    fields: [
        { name: "OperatorId", type: "number", width: 50 },
        { name: "FirstName", type: "text", width: 150 },
        { name: "LastName", type: "text", width: 150 },
        { name: "LicenseNumber", type: "number", width: 50, filtering: false },
        { name: "RFIDNumber", type: "number", width: 50, filtering: false },
        { name: "DateCreated", type: "date", width: 50, filtering: false },
        { name: "LastUpdated", type: "date", width: 50, filtering: false },
        { name: "CompanyId", type: "number", width: 50 }
        //    { type: "control" }
    ]
});

Демонстрация: