在 ASP.NET 中绑定 jqGrid 的问题答案

【问题标题】：Problem binding jqGrid in ASP.NET在 ASP.NET 中绑定 jqGrid 的问题
【发布时间】：2011-01-04 11:14:08
【问题描述】：

我是使用 jqGrid 和 jquery 的新手。我无法将我从 webmethod 检索到的 json 数据绑定到 jqGrid。

我还使用 firebug 进行交叉验证，并且我正在从它接收数据。一些关于这方面的帮助会很棒。我也想知道是否需要添加任何其他参考。

以下是我实现的代码。

页面方法

[WebMethod]
public static string GetData()
{
    Customer Cone = new Customer();
    Customer Ctwo = new Customer();
    Cone.CustomerID = "100";
    Cone.CustomerName = "abc";
    Ctwo.CustomerID = "101";
    Ctwo.CustomerName = "xyz";
    List<Customer> lstCustomer = new List<Customer>();
    lstCustomer.Add(Ctwo);
    lstCustomer.Add(Cone);
    JavaScriptSerializer jsonSerz = new JavaScriptSerializer();
    string serializedData = jsonSerz.Serialize(lstCustomer);
    return serializedData; 
}

客户端编码

<script type="text/javascript" src="jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="jquery.jqGrid.min.js"></script>
<script type="text/javascript">
    function GetData() {
        alert('Inside GetData');
        var data = PageMethods.GetData(OnSuccess, OnFailed);
    }
    function OnFailed(error) {
        alert('Failed');
        alert(error.get_message());
    }
    function OnSuccess(data) {
            alert(data);
    }
    $(document).ready(function() {
        $('#submit').click(function() {
            alert('Button Clicked');
            $('#list').jqGrid({
                url: 'http://localhost:1405/WebSite1/Default.aspx/GetData',
                data: '{}',  // For empty input data use "{}",
                dataType: 'local',
                type: 'POST',
                contentType: "application/json; charset=utf-8",
                colNames: ['CustomerID', 'CustomerName'],
                colModel: [
                    { name: 'CustomerID', index: 'CustomerID', width: 80,
                      align: 'left', editable: false },
                    { name: 'CustomerName', index: 'CustomerName', width: 120,
                      align: 'left', editable: true}],
                pager: $('#pager'),
                rowNum: 5,
                rowList: [10],
                sortname: 'CustomerID',
                sortorder: 'desc',
                viewrecords: true,
                width: 300
            });
        });
    });
</script>

和 HTML 代码

<asp:ScriptManager ID="ScriptManager1" EnablePageMethods="true" runat="server">
</asp:ScriptManager>
<input type="button" id="submit" value="Fetch" title="Fetch"
       onclick="javascript:GetData()" />
<table id="list">
</table>
<div id="pager">   
</div>

【问题讨论】：

标签： asp.net jqgrid

【解决方案1】：

首先，我建议您尝试使用另一个工作代码，您可以下载here（查看更多信息here）。您可以找到其他示例的更多链接here。

我尝试描述您当前代码中的一些问题。

您使用“http://localhost:1405/WebSite1/Default.aspx/GetData”作为网址。您最好只使用“/WebSite1/Default.aspx/GetData”或“WebSite1/Default.aspx/GetData”之类的路径，否则您很容易收到same origin policy 问题。
您应该使用 ASMX 服务而不是将代码放在 ASPX 页面 (Default.aspx/GetData) 内。您应该将新项目添加到您的 ASP.NET 解决方案并选择 Web Serice 模板。将为您添加相应的代码模板并修改 web.config。以同样的方式，您可以将 WCF 服务放在您的 ASP.NET 项目中。该步骤取决于您使用的技术（WebForms、ASP.NET MVC 等）。
您应该为您的方法定义[ScriptMethod(ResponseFormat = ResponseFormat.Json)] 属性并从Web 方法返回一个对象，而不是手动对JavaScriptSerializer 进行JSON 序列化（如您的情况下的List<Customer>）。 JSON 序列化将自动为您完成。
您使用了dataType: 'local'，这是 jqGrid 的错误参数。正确的参数将是 datatype:'json'（datatype 而不是 dataType 和 'json' 向服务器发出请求）。
您应该使用mtype: 'POST'，而不是type: 'POST'。
您应该使用ajaxGridOptions: { contentType: "application/json" }，而不是contentType: "application/json; charset=utf-8"。
data: '{}' 的用法也是错误的。可能您尝试使用jQuery.ajax 的data 参数，就像dataType 参数一样。在 jqGrid 中你应该使用pastData 而不是data 并且data 参数必须是一个数组并且有另外的含义。我建议您查看示例的代码（请参阅我答案开头的参考资料）。
不应将$('#list').jqGrid({...}); 放在click 句柄内。问题是代码对jqgrid进行了一些初始化，然后填充了网格。你可能想要的是只创建一次网格，然后用另一个输入数据刷新它（我不确定是不是这样）。所以你应该把$('#list').jqGrid({...});移动到$(document).ready(function() {...};里面。如果需要，您可以在 click 事件句柄中使用 $('#list').trigger("reloadGrid")。或者，您可以使用GridUnload 在创建新网格之前销毁现有网格。

我可以继续，但我的主要建议是检查其他示例并使用为 jqGrid 提供数据的 ASMX 或 WCF 服务。

【讨论】：

我同意oleg，不需要手动序列化集合。页面方法为您自动完成。如果我是正确的，它默认为 Json 格式

【解决方案2】：

在您的页面方法之前调用整个网格绑定事件。您已将其放在 document.Ready 事件下。尝试从按钮单击事件中调用它。

我不确定，但应该有一些方法可以将 json 数据绑定到客户端的 Jquery 网格而不使用 URL 部分。

尝试将“数据：”映射到某个 Json 值。

【讨论】：