Question

我试图从动作方法获取我的数据并在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);
        }

知道我错过了什么吗？

Answer 1

您的主要错误是您在jqGrid选项名称中使用错误的大小写（请参阅the documentation）。 dataType: 'json'必须为datatype: 'json'，mType: 'POST'必须为mtype: 'POST'。此外，您使用非常旧的模板作为源自the Phil Haack demo的解决方案。至少可以从控制器操作中的错误中看出：您使用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。您可以从the Microsoft page下载xxx-vsdoc.js文件。小心使用jQuery 1.6.3可能需要在jqGrid中修复一些小错误（参见here示例）。

我建议您下载我在VS2010 demo中描述的VS2008 demo或the answer。该演示基于Phil Haack演示，但它经过修改，以便支持错误报告，搜索或工具栏过滤，并且有一些小的但非常有用的CSS修复，您需要消除标准ASP.NET MVC CSS和标准ASP.NET MVC之间的小冲突。 jqGrid CSS。

遇到jqgrid的麻烦

1 个答案: