问题ASP.NET结合的jqGrid [英] Problem binding jqGrid in ASP.NET

问题描述

我是新来使用的jqGrid和jquery.I我不能够绑定这是我从将WebMethod到jqGrid的retrive我的JSON数据。

我也用萤火虫交叉验证，我从中接收数据。对此一些帮助将是巨大的。我ASLO想知道是否有任何其他的引用需要添加

以下是code，我已经实现了。

页面方法

  [的WebMethod]
公共静态字符串的GetData（）
{
    客户锥=新客户（）;
    客户Ctwo =新客户（）;
    Cone.CustomerID =100;
    Cone.CustomerName =ABC;
    Ctwo.CustomerID =101;
    Ctwo.CustomerName =XYZ;
    清单＆LT;客户＆GT; lstCustomer =新的List＆LT;客户＆GT;（）;
    lstCustomer.Add（Ctwo）;
    lstCustomer.Add（锥）;
    的JavaScriptSerializer jsonSerz =新的JavaScriptSerializer（）;
    字符串serializedData = jsonSerz.Serialize（lstCustomer）;
    返回serializedData;
}
 

客户端编码

 ＆LT;脚本类型=文/ JavaScript的SRC =jQuery的-1.4.4.min.js＆GT;＆LT; / SCRIPT＆GT;
＆LT;脚本类型=文/ JavaScript的SRC =jquery.jqGrid.min.js＆GT;＆LT; / SCRIPT＆GT;
＆LT;脚本类型=文/ JavaScript的＆GT;
    功能的GetData（）{
        警报（'内的GetData'）;
        VAR数据= PageMethods.GetData（的onSuccess，OnFailed）;
    }
    功能OnFailed（错误）{
        警报（'失败'）;
        警报（error.get_message（））;
    }
    功能的onSuccess（数据）{
            警报（数据）;
    }
    $（文件）。就绪（函数（）{
        $（'＃提交）。点击（函数（）{
            警报（'单击按钮'）;
            $（'＃名单）。jqGrid的（{
                网址：的http：//本地主机：1405 /的WebSite1 / Default.aspx的/的GetData'，
                数据：{}，//空输入数据使用{}，
                数据类型：本地，
                输入：POST，
                的contentType：应用/ JSON的;字符集= UTF-8，
                colNames：['客户id'，'客户名称']，
                colModel：
                    {名称：'CUSTOMERID'，索引：客户ID，宽度：80，
                      对齐：'左'，可编辑：假}，
                    {名称：'客户名称'，索引：客户名称，宽度：120，
                      对齐：'左'，可编辑：真正}]，
                寻呼机：$（'＃寻呼机），
                的rowNum：5，
                rowList：[10]，
                sortname：客户ID，
                排序顺序：递减，
                viewrecords：真实，
                宽度：300
            }）;
        }）;
    }）;
＆LT; / SCRIPT＆GT;
 

和HTML code

 ＆LT; ASP：的ScriptManager ID =ScriptManager1的EnablePageMethods =真=服务器＆GT;
＆LT; / ASP：ScriptManager的＆GT;
＆LT;输入类型=按钮ID =提交值=取称号=魂
       的onclick =JavaScript的：的GetData（）/＆GT;
＆LT;表ID =清单＆GT;
＆LT; /表＆gt;
＆所述;格ID =寻呼机＆GT;
＆LT; / DIV＆GT;
 

解决方案

所有的，我建议你玩一点与其他工作code首先，你可以下载的此处（详细信息请参阅<一个href=\"http://stackoverflow.com/questions/4029909/load-data-from-webservice-asmx-to-jqgrid-please-help-me/4031603#4031603\">here).更多链接到另一个例子，你可以找到 href=\"http://stackoverflow.com/questions/4561697/using-jquery-jqgrid/4570070#4570070\">。

我试着描述在当前code一些问题。

1. 您使用的http：//本地主机：1405 /的WebSite1 / Default.aspx的/的GetData作为URL。您shold更好地利用仅pathes像'/WebSite1/Default.aspx/GetData'或'的WebSite1 / Default.aspx的/的GetData或者你可以很容易获得的同源策略问题。


2. 您应该使用ASMX服务，而不是放置code ASPX页面（Default.aspx的/的GetData）内的。你应该添加新的项目到您的ASP.NET解决方案，并选择网络的贡献莫过于模板。相应的code ++模板会自动为你添加和web.config文件将被修改。以同样的方式，你可以将WCF服务的ASP.NET项目中。步骤是独立工作的技术，它使用（的WebForms，ASP.NET MVC等等）。


3. 相反对于的JavaScriptSerializer 您应该手动定义JSON序列化的 [ScriptMethod（ResponseFormat = ResponseFormat.Json）] attriute你的方法，并从Web方法返回一个对象（如列表与LT;客户＆GT; 你的情况）。 JSON序列化的会自动完成的你。


4. 您使用数据类型：本地这是错误的jqGrid参数。正确的参数将是数据类型：JSON（数据类型而不是的dataType 和JSON，使请求到服务器）。


5. 而不是键入：POST你应该使用的 MTYPE：'POST'


6. 而不是的contentType：应用/ JSON的;字符集= UTF-8你应该使用 ajaxGridOptions：{的contentType：应用/ JSON } 。


7. 数据的使用：{}也是错误的。也许你尝试使用数据参数 jQuery.ajax 的像的dataType 参数。在jqGrid的你应该使用 pastData 而不是数据和数据参数必须是一个数组，有另外的含义。我推荐你看一下例子的code（请参阅参考资料在开始我的答案）。


8. 您不应该把 $（'＃名单）的jqGrid（{...}）; 点击处理。问题是，code做的jqGrid的一些初始化，然后填写电网。你probaly想要的是创建格一次，然后用其他输入数据probaby刷新它（我不知道，它是如此）。所以，你应该移到 $（'＃名单）的jqGrid（{...}）; $（文件）。就绪内（函数（）{...}; 如果需要，您可以使用 $（'＃名单）的触发器（oadGrid）内在点击事件句柄。或者您可以使用的 GridUnload 来创造它的新前破坏现有的电网。



我可以继续，但我的主要建议是考察另一个例子和使用ASMX或WCF服务，为的jqGrid提供数据。

I am new to using jqGrid and jquery.I am not able to bind my json data which I retrive from the webmethod onto the jqGrid.

I have also used firebug to cross verify and i am receiving data from it. Some help regarding this will be great. I would aslo like to know if any other references needs to be added.

following is the code that I have implemented.

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

client side coding

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

AND HTML code

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

解决方案

First of all I recommend you to play a little with another working code which you can download here (see more information here). More links to another examples you can find here.

I try to describe some problems in your current code.

1. You use 'http://localhost:1405/WebSite1/Default.aspx/GetData' as the url. You shold better use only pathes like '/WebSite1/Default.aspx/GetData' or 'WebSite1/Default.aspx/GetData' or you can easy receive same origin policy problem.
2. You should use ASMX service instead of placing the code inside of ASPX page (Default.aspx/GetData). You should just add new item to your ASP.NET solution and choose Web Serice template. The corresponding code template will be added for you and web.config will be modified. In the same way you can place WCF service inside your ASP.NET project. The step is independ on the technology which you use (WebForms, ASP.NET MVC and so on).
3. Instead of manual JSON serialisation with respect of JavaScriptSerializer you should define [ScriptMethod(ResponseFormat = ResponseFormat.Json)] attriute to your method and return an object from the web method (like List<Customer> in your case). The JSON serialization will be done automatically for you.
4. You use dataType: 'local' which is wrong parameter for jqGrid. Correct parameter will be datatype:'json' (datatype instead of dataType and 'json' to make the request to the server).
5. Instead of type: 'POST' you should use mtype: 'POST'.
6. Instead of contentType: "application/json; charset=utf-8" you should use ajaxGridOptions: { contentType: "application/json" }.
7. The usage of data: '{}' is also wrong. Probably you try to use data parameter of jQuery.ajax like with dataType parameter. In jqGrid you should use pastData instead of data and the data parameter must be an array and has another meaning. I recommand you to look at the code of the example (see reference at the begin of my answer).
8. You should not place $('#list').jqGrid({...}); inside of click handle. The problem is that the code make some initializations of jqgrid and then fill the grid. What you probaly want is creating the grid only once and then refreshing it with another input data probaby (I am not sure that it is so). So you should move $('#list').jqGrid({...}); inside of $(document).ready(function() {...};. If needed you can use $('#list').trigger("reloadGrid") inside of the click event handle. Alternatively you can use GridUnload to destroy the existing grid before creating it new.

I can continue, but my main recommendation is to examine another examples and use ASMX or WCF service which provide the data for jqGrid.

这篇关于问题ASP.NET结合的jqGrid的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！