Возникли проблемы с jqgrid - PullRequest
       1

Возникли проблемы с jqgrid

1 голос
/ 10 сентября 2011

Я пытаюсь получить свои данные из метода действия и заражения в Fiddler. Я получаю данные json, но сетка ничего не показывает.

Это мой .cshtml:

<script type="text/javascript">
    $(document).ready(function () {

        $('#customers').jqGrid({

            url: '/Home/Customers/',
            dataType: 'json',
            mType: 'POST',
            colNames: ['CustomerID', 'ContactName', 'ContactTitle', 'Country', 'CompanyName', 'Fax', 'Phone'],
            colModel: [
                { name: 'CustomerID', index: 'CustomerID', align: 'left' },
                { name: 'ContactName', index: 'ContactName', align: 'left' },
                { name: 'ContactTitle', index: 'ContactTitle', align: 'left' },
                { name: 'Country', index: 'Country', align: 'left' },
                { name: 'CompanyName', index: 'CompanyName', align: 'left' },
                { name: 'Fax', index: 'Fax', align: 'left' },
                { name: 'Phone', index: 'Phone', align: 'left' },

            ],
            pager: jQuery('#customerPager'),
            rowNum: 10,
            rowList: [5, 10, 20, 50],
            sortname: 'CustomerID',
            sortorder: "desc",
            viewrecords: true,
            imgpath: '',
            caption: 'My first grid'
        });

    });
</script>

В _Layout.cshtml у меня есть ссылка на сценарии, и все они загружаются правильно:

<link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
    <link href="@Url.Content("~/Content/ui.jqgrid.css")" rel="stylesheet" type="text/css" />
    <link href="@Url.Content("~/Content/ui.multiselect.css")" rel="stylesheet" type="text/css" />
    <link href="@Url.Content("~/Content/themes/ui-lightness/jquery-ui-1.8.16.custom.css")" rel="stylesheet" type="text/css" />

    <script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery-ui-1.8.11.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/grid.locale-en.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery.jqGrid.min.js")" type="text/javascript"></script>

Это метод действия моего Домашнего контроллера:

public JsonResult Customers(string sidx, string sord, int page, int rows )
        {
            NorthwindEntities entities = new NorthwindEntities();
            int pageIndex = page - 1;
            int pageSize = rows;
            int totalRecords = entities.Customers.Count();
            int totalPages = (int)Math.Ceiling( (float)totalRecords / pageSize);
            var customers = entities.Customers.OrderBy(k => k.CustomerID).Skip(pageIndex * pageSize).Take(pageSize).ToList();

            var jsonData = new
            {
                total = totalPages,
                page,
                records = totalRecords,
                rows = (from customer in customers 
                            select new {
                                    i = customer.CustomerID,
                                    cell = new string[]{customer.CustomerID, customer.ContactName,
                                            customer.ContactTitle, customer.Country, customer.CompanyName,
                                            customer.Fax,
                                            customer.Phone
                                    }
                            }).ToArray()
            };

            return Json(jsonData,JsonRequestBehavior.AllowGet);
        }

Есть идеи, что мне не хватает?

1 Ответ

2 голосов
/ 10 сентября 2011

Ваша основная ошибка заключается в том, что вы используете неправильный регистр в именах параметров jqGrid (см. документацию ). dataType: 'json' должно быть datatype: 'json', mType: 'POST' должно быть mtype: 'POST'. Более того, вы используете очень старый шаблон для вашего решения, который взят из демонстрации Phil Haack . Это видно по крайней мере из ошибки в действии контроллера: вы используете i = customer.CustomerID вместо id = customer.CustomerID.

Кроме того, вы должны включить jquery-ui-1.8.16.min.js вместо jquery-ui-1.8.11.min.js, если вы используете jquery-ui-1.8.16.custom.css. Я рекомендую вам использовать jQuery 1.6.2. Файл xxx-vsdoc.js, который можно загрузить с на странице Microsoft . Будьте осторожны с jQuery 1.6.3, могут потребоваться некоторые небольшие исправления ошибок в jqGrid (см. здесь пример).

Я рекомендую вам загрузить мою демонстрационную версию VS2010 или VS2008 , которую я описал в ответе . Демонстрация основана на демонстрации Фила Хаака, но она модифицирована таким образом, что она поддерживает отчеты об ошибках, поиск или фильтрацию на панели инструментов, а также содержит небольшие, но очень полезные исправления CSS, которые необходимы для устранения небольших конфликтов между стандартным CSS ASP.NET MVC и jqGrid CSS.

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