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

我们也在project中使用jqGrid。请检查以下两个链接：controller（LoadApplicationGrid）和view。 here我们的JQGridView自定义Json结果。

此外，您可以使用JsonRequestBehavior.AllowGet为Json结果允许GET方法，然后直接从浏览器调用该操作，并将序列化数据与jqGrid要求进行比较。

Answer 2

首先，您应该使用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值将保存两次：一次作为网格行的id元素的<tr>，一次作为第一个表列的<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排序，该sortname: 'Id'对应于您在jqGrid中使用的sidx。该名称将作为sortorder: 'asc'参数发送到服务器。此外，jqGrid的参数rowNum: 10和sord将定义操作的rows和page参数的值。发送到服务器的最后一个参数public ActionResult GridData (string sidx, string sord, int page, int rows)最初将设置为1，如果用户选择下一页，则会增加该参数。所以MVC动作的典型原型是

{{1}}

我建议您阅读the old answer和下一个answer的更新部分。我希望这些答案可以帮助您提高jqGrid的使用率。 Here你会在这个问题上找到答案：为什么jqGrid等待的JSON数据的默认格式看起来很奇怪。

Answer 3

我认为你的控制器会在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 4

试试这段代码。我总是在Json中创建一个JqgridRow返回。

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);

}

希望这有帮助..

jqGrid不在网格中显示数据

4 个答案: