Question

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

我还使用了firebug进行交叉验证，我从中接收数据。对此有一些帮助会很棒。我想知道是否需要添加任何其他参考文献。

以下是我实施的代码。

PAGE METHOD

[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>

Answer 1

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

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

您使用“http://localhost:1405/WebSite1/Default.aspx/GetData”作为网址。你最好只使用像'/WebSite1/Default.aspx/GetData'或'WebSite1 / Default.aspx / GetData'那样的pathes，否则你很容易收到same origin policy问题。
您应该使用ASMX服务，而不是将代码放在ASPX页面内（Default.aspx / GetData）。您应该只将新项添加到ASP.NET解决方案中，然后选择Web Serice模板。将为您添加相应的代码模板，并将修改web.config。以同样的方式，您可以将WCF服务放在ASP.NET项目中。该步骤独立于您使用的技术（WebForms，ASP.NET MVC等）。
而不是关于JavaScriptSerializer的手动JSON序列化，您应该定义[ScriptMethod(ResponseFormat = ResponseFormat.Json)] attriute到您的方法并从Web方法返回一个对象（如您的情况下的List<Customer>）。 JSON序列化将自动为您完成。
您使用dataType: 'local'这是jqGrid的错误参数。正确的参数将是datatype:'json'（datatype而不是dataType和'json'来向服务器发出请求。）
您应该使用mtype: 'POST'。

type: 'POST'

您应该使用contentType: "application/json; charset=utf-8"。

ajaxGridOptions: { contentType: "application/json" }

使用data: '{}'也是错误的。您可能尝试使用data的{{1}}参数与dataType参数一样。在jqGrid中，您应该使用pastData而不是data，data参数必须是数组，并具有其他含义。我建议您查看示例的代码（请参阅我的答案开头的参考资料）。
您不应将$('#list').jqGrid({...});放在click句柄内。问题是代码对jqgrid进行了一些初始化，然后填充网格。你可能想要的只是创建网格一次，然后用另一个输入数据probaby刷新它（我不确定是这样）。因此，您应该在$('#list').jqGrid({...});内移动$(document).ready(function() {...};。如果需要，您可以在$('#list').trigger("reloadGrid")事件句柄中使用click。或者，您可以在创建新网格之前使用jQuery.ajax销毁现有网格。

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

Answer 2

在页面方法之前调用整个网格绑定事件。你把它放在document.Ready事件下。尝试从按钮点击事件中调用它。

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

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

在ASP.NET中绑定jqGrid的问题

2 个答案: