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

首先，您應該使用JsonRequestBehavior.AllowGet作爲jqGrid的第二個參數從MVC操作返回JSON數據。

你接下來的主要問題是數據格式。有等待jqGrid的默認數據格式。該格式在the documentation中描述。因此，您可以使用標準格式生成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值將被保存兩次：一次作爲網格行的<tr>元素的id，一次作爲第一個表格列的<td>元素。如果您從不需要顯示用戶的ID，則可以從網格中刪除Id列，但仍然會將id置於JSON數據中。它將使用非唯一性ID，您可能會遇到類似here所述的相同問題。

另一種方法是更改​​MVC Action的代碼，以便它以默認格式生成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排序，這與您在jqGrid中使用的sortname: 'Id'相對應。該名稱將作爲sidx參數發送到服務器。此外，jqGrid的參數sortorder: 'asc'和rowNum: 10將定義動作的參數sord和rows的值。發送到服務器的最後一個參數page將初始設置爲1，如果用戶選擇下一頁，將會增加。 MVC的行動非常典型的原型是

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

我建議你閱讀the old answer和下answer的更新部分。我希望這些答案爲您帶來jqGrid的使用。 Here你會發現問題的答案：爲什麼jqGrid等待的JSON數據的默認格式看起來很奇怪。

Answer 2

我覺得你的控制器拋出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); 
} 

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

我們也在我們的project使用的jqGrid。檢查這兩個鏈接：controller（LoadApplicationGrid）和view。和here我們的JQGridView自定義Json結果。

另外，您可以使用JsonRequestBehavior.AllowGet來允許JSON結果的GET方法，然後直接從瀏覽器調用該操作，並將序列化數據與jqGrid需求進行比較。