带有 ASP.NET 的 Jquery 网格答案

【问题标题】：Jquery Grid with ASP.NET带有 ASP.NET 的 Jquery 网格
【发布时间】：2012-03-02 17:53:58
【问题描述】：

我正在尝试将 Jquery 网格与 asp.net 一起使用，但它不起作用，它显示的网格内容为空，我不确定我的代码有什么问题！！这是我的 HTML 代码：

<script type="text/javascript">
  $(function () {
      $("#list").jqGrid({
          url: '/WebServices/Admin/WebMethods.ashx',
          datatype: 'json',
          mtype: 'POST',
          colNames: ['ID', 'Name', 'Description'],
          colModel: [
                      { name: 'ID', index: 'ID', width: 55 },
                      { name: 'NAME', index: 'NAME', width: 90 },
                      { name: 'DESCRIPTION', index: 'DESCRIPTION', width: 80 }

                    ],
          jsonReader: {
              repeatitems:false
              },
          pager: $('#pager'),
          rowNum: 10,
          rowList: [10, 20, 30],
          sortname: 'ID',
          sortorder: 'desc',
          viewrecords: true,

          caption: 'Lockups'
      }).navGrid('#pager');
  });
</script>

接着是：

<form runat="server">
    <div style="width:700px">
        <table id="list" width="100%">
            <tr>
                <td />
            </tr>
        </table>
        <div id="pager">
        </div>
    </div>
</form>

我的 C# 代码，我将我的对象列表转换为 JSON：

 public void ProcessRequest(HttpContext context)
 {

      context.Response.ContentType = "application/json"; 
      context.Response.Write(GetAllLookups());
 }

public string GetAllLookups()
{
    var lst = from lockup in LOCKUP_ITEMS.GetLockups()
              select new { 
                  ID = lockup.ID, 
                  NAME = lockup.NAME, 
                  DESCRIPTION = lockup.DESCRIPTION 
              };

    return Newtonsoft.Json.JsonConvert.SerializeObject(
        lst, 
        new JavaScriptDateTimeConverter());
}

【问题讨论】：

插件是否向您的 ASHX 发出了成功请求？如果您有用于 Firefox、Fiddler 或任何其他实用程序的 Firebug 来观察 HTTP 请求，您可以从那里开始查看是否进行了 HTTP 调用以获取数据。
您可以使用jsonReader: {repeatitems: false, id: "ID", root: function (obj) { return obj; }, page: function () { return 1; }, total: function () { return 1; }, records: function (obj) { return obj.length; }}。在这种情况下，您可以使用原始服务器代码。此外，您可以添加 jqGrid 的 loadonce: true 选项以支持本地排序，添加 gridview: true 以获得更好的性能并将 pager: $('#pager') 替换为 pager: '#pager'。

标签： jquery asp.net jqgrid

【解决方案1】：

jqGrid 需要某种格式的 json 数据：

{ 
  "total": "xxx", 
  "page": "yyy", 
  "records": "zzz",
  "rows" : [
    {"id" :"1", "cell" :["cell11", "cell12", "cell13"]},
    {"id" :"2", "cell":["cell21", "cell22", "cell23"]},
      ...
  ]
}

所以将您的 GetAlLookups 方法更改为以下内容：

public string GetAllLookups()
{
    var list = LOCKUP_ITEMS.GetLockups();
    var numOfItems = list.Count();

    var result = new {
                    total = numOfItems ,
                    page = 1,
                    records = numOfItems ,
                    rows = (from lockup in list
                            select new {
                                ID = lockup.ID, 
                                NAME = lockup.NAME, 
                                DESCRIPTION = lockup.DESCRIPTION 
                            }).ToArray()
                };
    return Newtonsoft.Json.JsonConvert.SerializeObject(
        result, 
        new JavaScriptDateTimeConverter());
}

【讨论】：

【解决方案2】：

试试这个mtype: 'POST'，而不是这个mtype: 'POSTs'

编辑

你好，试试下面的链接

How do I get jqGrid to work using ASP.NET + JSON on the backend?

【讨论】：

我确实改变了它，仍然没有！