jqGrid не отображение данных в сетке

Question

В приложении ASP.NET MVC 3.0 я использую jqGrid. Я использую код ниже. Я вижу сетку, но нет данных. Я передал действие «GridData», содержимое списка - это один элемент, но ничего в сетке.

C #:

public ActionResult GridData()
{

    List<Customer> list = new List<Customer>();
    list.Add(new Customer() { Code = "AAA", FirstName = "BBB", LastName = "CCC" });

    return Json(list);
}

HTML:

<table id="jqgProducts" cellpadding="0" cellspacing="0"></table>
<div id="jqgpProducts" style="text-align:center;"></div>

<script type="text/javascript">
    $(document).ready(function () {
        $('#jqgProducts').jqGrid({
            //url from wich data should be requested
            url: '/Customer/GridData/',
            //type of data
            datatype: 'json',
            //url access method type
            mtype: 'GET',
            //columns names
            colNames: ['Id', 'LastName','FirstName', 'Code'],
            //columns model
            colModel: [
                  { name: 'Id', index: 'Id', align: 'left' },
                  { name: 'LastName', index: 'LastName', align: 'left' },
                  { name: 'FirstName', index: 'FirstName', align: 'left' },
                  { name: 'Code', index: 'Code', align: 'left' }
                ],
            //pager for grid
            pager: $('#jqgpProducts'),
            //number of rows per page
            rowNum: 10,
            //initial sorting column
            sortname: 'Id',
            //initial sorting direction
            sortorder: 'asc',
            //we want to display total records count
            viewrecords: true
        });
    }); 
</script>

Answer 1

Прежде всего вы должны вернуть данные JSON из действия MVC, используя JsonRequestBehavior.AllowGet в качестве второго параметра jqGrid.

Далее вы и главная проблема - формат данных.Есть формат данных по умолчанию, которые ждут jqGrid.Формат описан в документации .Таким образом, вы можете либо создать данные JSON в стандартном формате, подобном предложенному вами Saad, либо добавить параметр jsonReader в jqGrid, который опишет, как можно читать текущие данные JSON.Таким образом, почти с тем же GridData:

public ActionResult GridData() {
    var list = new List<Customer> {
        new Customer {Id = "myid1", Code = "AAA", FirstName = "BBB", LastName = "CCC"}
    };

    return Json (list, JsonRequestBehavior.AllowGet);
}

вы можете добавить следующий jsonReader параметр

jsonReader: {
    id: "Id",
    repeatitems: false,
    root: function (obj) { return obj; },
    page: function () { return 1; },
    total: function () { return 1; },
    records: function (obj) { return obj.length; }
}

для чтения данных.Но вы можете видеть в коде выше, я добавил Id свойство к классу Customer.Свойство может быть строкой целого числа.Оба будут в порядке для jqGrid.Значение Id будет сохранено дважды: один раз как id элемента <tr> строки сетки и один раз как элемент <td> первого столбца таблицы.Если вам никогда не нужно отображать идентификатор пользователя, вы можете удалить столбец Id из таблицы, но все равно поместить id в данные JSON.Если вы будете использовать неуникальные идентификаторы, у вас могут быть те же проблемы, что и описанные здесь .

Другим способом будет изменение кода действия MVC, чтобы он генерировал данные JSON вформат по умолчанию.Для этого вы можете изменить код GridData на следующий:

public ActionResult GridData() {
    var list = new List<Customer> {
        new Customer {Id = "myid1", Code = "AAA", FirstName = "BBB", LastName = "CCC"}
    };
    return Json (new {
        page = 1,
        total = 1,
        records = list.Count,
        rows = (from x in list
                orderby x.Id
                select new {
                    id = x.Id,
                    cell = new[] {
                        x.Code,
                        x.FirstName,
                        x.LastName
                    }
                }
        )
    }, JsonRequestBehavior.AllowGet);
}

Весь приведенный выше код включен только для понимания основ jqGrid.В приведенном выше коде данные будут отсортированы по Id, что соответствует sortname: 'Id', который вы используете в jqGrid.Имя будет отправлено на сервер в качестве параметра sidx.Кроме того, параметры sortorder: 'asc' и rowNum: 10 jqGrid будут определять значения параметров sord и rows действия.Последний параметр page отправки на сервер будет изначально установлен в 1 и будет увеличен, если пользователь выберет следующую страницу.Типичный прототип действия MVC -

public ActionResult GridData (string sidx, string sord, int page, int rows)

. Я рекомендую прочитать старый ответ и ОБНОВЛЕННУЮ часть следующего ответа .Я надеюсь, что ответы помогут вам использовать jqGrid. Здесь вы найдете ответ на вопрос: почему формат данных JSON по умолчанию, которого ждет jqGrid, выглядит так странно.

Answer 2

Мы также используем jqGrid в нашем проекте .Проверьте эти две ссылки: контроллер (LoadApplicationGrid) и представление .И здесь наш собственный JSON-результат JQGridView.

Кроме того, вы можете разрешить метод GET для результата Json, используя JsonRequestBehavior.AllowGet , а затем вызвать действие непосредственно из браузераи сравните сериализованные данные с требованиями jqGrid.

Answer 3

попробуйте этот сегмент кода.я всегда создаю JqgridRow для возврата в Json.

public ActionResult GridData()

{

List<Customer> list = new List<Customer>();
list.Add(new Customer() { Code = "AAA", FirstName = "BBB", LastName = "CCC" });

var GetData = new
                {
                    rows = (from x in list 
                            select new JqGridRow()
                            {
                                cell = new string[] {
                                    x.Code.ToString(),
                                    x.FirstName.ToString(),
                                    x.LastName .ToString(),
                                }
                            }
                            ).ToArray()
                };

return Json(GetData , JsonRequestBehavior.AllowGet);

}

надеюсь, что это поможет ..

Answer 4

Я думаю, что ваш контроллер выдает исключение в GridData(), потому что MVC3 по умолчанию не разрешает ответы JSON на запросы GET. Вы можете изменить это поведение следующим образом:

public ActionResult GridData()
{  
    List<Customer> list = new List<Customer>();
    list.Add(new Customer() { Code = "AAA", FirstName = "BBB", LastName = "CCC" });

    return Json(list, JsonRequestBehavior.AllowGet);
}