JqG​​rid 显示有列，没有 json 数据

Question

我正在尝试将 JSON 数据绑定到 jqgrid。但是，我没有得到任何数据。

这里是我的代码：

$(function () {
            $("#list").jqGrid({
                url:'<%:Url.Action("LoadData","Home")%>',
                datatype: "JSON",
                mtype: "GET",
                colNames: ["sid","sname"],
                colModel: [
            { name: "sid", width: 55,align:"center"},
            { name: "sname", width: 90,align:"center"},
                          ],
                jsonReader: {
                    repeatitems: false
                },
                pager: "#pager",
                rowNum: 10,
                rowList: [10, 20, 30],
                viewrecords: true,
                gridview: true,
                autoencode: true,
                caption: "My first grid"
            });
        }); 

我在 Asp.net MVC 应用程序中使用它。

我能够点击控制器并获取 JSON 数据..但我无法将数据显示到网格中。

我从控制器获得了正确的 json o/p。

我的控制器是：

public JsonResult LoadData()

   {
        var Data= new DataTable();
        Data= DataModel.LoadData();
        var JsonData = JsonConvert.SerializeObject(Packages, Formatting.Indented);
        return Json(new
        {
            JsonData
        }, JsonRequestBehavior.AllowGet);
    }

我认为我的 JQgrid jquery 代码中有错误。首先，我想以最少的配置实现 jqgrid。

我得到的 JSON 响应是：

[
  {
    "sid": 2,
    "sname": "ABC"
  },
  {
    "sid": 3,
    "sname": "XYZ"
  },
  {
    "sid": 4,
    "sname": "CBA"
  },
  {
    "sid": 5,
    "sname": "IIT"
  },
  {
    "sid": 6,
    "sname": "NIT"
  }
]

这是我的 HTML 结构：

<table id="list">
    </table> 
    <div id="pager"></div>

我从正在获取的数据中删除了重复项..

JSON 结果，我已经在 Visual Studio 的 Text Visualizer 中进行了检查。它很好..

请帮忙..

Answer 1

我想你的问题的原因是JsonConvert.SerializeObject 的使用。你应该返回 object 而不是 string。尝试使用

return Json(Packages, JsonRequestBehavior.AllowGet);

直接。

Answer 2

不确定 .aspx 文件中是否有 .js 文件中的 js 代码。

无论如何试试这个并使用 Firefox/Chrome 控制台检查请求/响应

$(function () {
        $("#list").jqGrid({
            url:/Home/LoadData/,
            datatype: "json",
            mtype: "GET",
            colNames: ["sid","sname"],
            colModel: [
                      { name: "sid", width: 55,align:"center"},
                      { name: "sname", width: 90,align:"center"},
                      ],
            pager: "#pager",
            rowNum: 10,
            rowList: [10, 20, 30],
            viewrecords: true,
            gridview: true,              
            caption: "My first grid"
        });
    }); 

HTML

<table id="list"></table>
<div id="pager"></div>