用jqgrid遇到問題

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.custom.css，則應包括jquery-ui-1.8.16.min.js而不是jquery-ui-1.8.11.min.js。我建議你使用jQuery 1.6.2。您可以從the Microsoft page下載xxx-vsdoc.js文件。要小心使用jQuery 1.6.3 jqGrid中的一些小錯誤修復可能是必需的（請參見here示例）。

我建議您下載我在the answer中描述的我的VS2010 demo或VS2008 demo。該演示基於Phil Haack演示，但它已被修改，以便它支持錯誤報告，搜索或工具欄過濾，並且有一些小的但非常有用的CSS修復，您需要消除標準ASP.NET MVC CSS和jqGrid CSS。