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需求进行比较。