JQGrid与webservice无法加载数据

时间:2012-02-09 17:18:50

标签: jquery asp.net jqgrid

我在.net应用程序中使用JQGrid。我使用在线代码示例,它不会抛出任何错误但它不起作用或者不确定我做错了什么。有些人在使用JQgrid之前可以通过我的代码向我展示一些关于我做错的事情。我能够进入服务器端代码,它不会抛出任何错误。真的不太确定我做错了什么。

这是aspx页面:

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title></title>
<link rel="stylesheet" type="text/css" media="screen" href="jquery-ui-1.8.17.custom.css" />
<link rel="stylesheet" type="text/css" media="screen" href="ui.jqgrid.css" />

    <script src="jquery.js" type="text/javascript"></script>

    <script src="grid.locale-en.js" type="text/javascript"></script>

    <script src="jquery.dataTables.min.js" type="text/javascript"></script>

    <script src="jquery.jqGrid.min.js" type="text/javascript"></script>

调用gquery加载网格

    <script type="text/javascript">
        jQuery(document).ready(function() {
            jQuery("#list").jqGrid({
                type: "GET",
                url: "MyService.asmx/GetRecipie",
                contentType: "application/json; charset=utf-8",
                dataType: "json",

                colNames: ['Inv No', 'Date', 'Amount'],
                colModel: [
      { name: 'job_id', index: 'job_id', width: 55 },
      { name: 'job_num', index: 'job_num', width: 90 },
      { name: 'order_num', index: 'order_num', width: 80, align: 'right'}],
                pager: jQuery('#pager'),
                rowNum: 10,
                rowList: [10, 20, 30],
                sortname: 'id',
                sortorder: "desc",
                viewrecords: true,
                imgpath: 'themes/basic/images',
                caption: 'My first grid',
                loadError: Error

            });
        });

        function Error(xhr, st, err) {
            jQuery("#rsperror").html("Type: " + st + "; Response: " + xhr.status + " " + xhr.statusText);
        }


    </script>

</head>
<body>
    <table id="list" class="scroll">
    </table>
    <div id="pager" class="scroll" style="text-align: center;">
    </div>
</body>
</html>

我的网络服务

        [WebMethod]
        [ScriptMethod(ResponseFormat = ResponseFormat.Json, UseHttpGet = false)]
        public string GetRecipie()
        {
            string strQuery = "SELECT * FROM job where job_id like '%2345%'";
            DataTable dtRecipie = null;
            Recipie objRecipie = default(Recipie);
            SqlConnection con = new SqlConnection("Integrated Security=SSPI;Persist Security Info=False;DATABASE=TESTDB;Data Source=SQL;");
            using (con)
            {
                con.Open();
                using (SqlDataAdapter sqlAdapter = new SqlDataAdapter(strQuery, con))
                {
                    dtRecipie = new DataTable();
                    sqlAdapter.Fill(dtRecipie);
                }
            }
            List<Recipie> drlist = new List<Recipie>();
            foreach (DataRow dr in dtRecipie.Rows)
            {
                objRecipie = new Recipie();
                objRecipie.jobId = Convert.ToInt32(dr["job_id"].ToString());
                objRecipie.JobNumber = dr["job_num"].ToString();
                objRecipie.OrderNumber = dr["order_num"].ToString();
                drlist.Add(objRecipie);
            }

            JavaScriptSerializer jSearializer = new JavaScriptSerializer();
            return jSearializer.Serialize(drlist);

        }
    }


    public class Recipie
    {
        public int jobId;
        public string JobNumber;
        public string OrderNumber;
    }


}

1 个答案:

答案 0 :(得分:0)

1 - 您正在序列化实体列表,而不将其更改为jqgrid理解的格式。

你应该返回一个如下所示的Json:

{ 
    "page":"1",
    "total":4,
    "records":"10",

    "rows":[
        {"id":"1","cell":["Prabir","Shrestha"]},
        {"id":"2","cell":["Bill","Gates"]},
        {"id":"3","cell":["Steve","Ballmer"]}
    ] 
}

来自:http://blog.prabir.me/post/Using-jqGrid-with-ASPNET-Web-Forms-e28093-Part-I.aspx。本网站介绍了如何将数据转换为此格式。

当您使用UseHttpGet = false初始化jqgrid时,您在使用type: "GET"的网络服务中还有其他事情。你需要改变其中一个。