从 jqGrid 调用 WebMethod

Question

我正在学习 jqGrid 并关注 this link。但是演示是在Asp.Net MVC 中构建的，我正在使用Asp.Net WebForms 进行尝试。我的调试器没有进入WebMethod

这是我的代码

$("#tblDemo").jqGrid(
            {
                url: 'Default.aspx/GetGridData',
                datatype: "json",
                mtype: 'GET',
                colNames: ['Id', 'First Name', 'Last Name'],
                colModel: [
                { name: 'Id', index: 'EmloyeeId', width: 20, stype: 'text' },
                { name: 'FirstName', index: 'FirstName', width: 150 },
                { name: 'LastName', index: 'LastName', width: 150 }]
                , rowNum: 10,
                sortname: 'Id',
                viewrecords: true,
                sortorder: "desc",
                caption: "List Employee Details",
                scrollOffset: 0
            });

问题似乎与WebMethod 无关，因为如果我使用$.ajax（只是为了测试WebMethod）就会调用它。还是看看WebMethod吧。

这是我引用的文件。

    <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
    <link href="js/css/ui.jqgrid.css" rel="stylesheet" />
    <script src="js/js/jquery.jqGrid.min.js"></script>
    <script src="js/js/i18n/grid.locale-en.js"></script>
    <link href="http://code.jquery.com/ui/jquery-ui-git.css" />
    <script src="js/js/jquery.json.min.js"></script>

控制台没有错误。请帮我解决这个问题。

更新 1

按照建议更改了我的 jqGrid 代码。现在是这个样子

$("#tblDemo").jqGrid(
            {
                url: '/Default.aspx/GetGridData',
                datatype: "json",
                mtype: 'GET',   
                colNames: ['Id', 'First Name', 'Last Name'],
                loadonce : true,
                colModel: [
                { name: 'Id',  width: 20, stype: 'text' },
                { name: 'FirstName',  width: 150 },
                { name: 'LastName',  width: 150 }]
                , rowNum: 10,

                sortname: 'Id',
                viewrecords: true,
                sortorder: "desc",
                caption: "List Employee Details",
                scrollOffset: 0,
                gridview: true,
                autoencode: true,
                ajaxGridOptions: { contentType: "application/json" },
                serializeGridData: function (postData) {
                    return JSON.stringify(postData);
                },
                jsonReader: {
                    root: "d.rows",
                    page: "d.page",
                    total: "d.total",
                    records: "d.records"
                }
            });

我没有包含GetData 的定义，因为它没有引起问题，因为调试器甚至没有命中我的WebMethod 的第一行。基本上它是从数据库中获取数据到DataTable

[WebMethod]
        //[ScriptMethod(ResponseFormat = ResponseFormat.Json)]
        public static string GetGridData()
        {
            return JsonConvert.SerializeObject(GetData());
        }

        public static DataTable GetData()
        {
            string conStr = System.Configuration.ConfigurationManager.ConnectionStrings["dbConString"].ToString();

            DataTable dt = new DataTable();

            using (var con = new SqlConnection(conStr))
            {
                using (var cmd = new SqlCommand("Select * From MyTest",con))
                {
                    SqlDataAdapter da = new SqlDataAdapter(cmd);
                    da.Fill(dt);
                }
            }
            return dt;
        }

更新 2

根据 Oleg 的建议，我已将代码更改如下

[WebMethod]
        //[ScriptMethod(ResponseFormat = ResponseFormat.Json)]
        public static string GetGridData()
        {
             return JsonConvert.SerializeObject(GetData());
        }

        public static DataTable GetData()
        {
            string conStr = System.Configuration.ConfigurationManager.ConnectionStrings["dbConString"].ToString();

            DataTable dt = new DataTable();

            using (var con = new SqlConnection(conStr))
            {
                using (var cmd = new SqlCommand("Select * From MyTest",con))
                {
                    SqlDataAdapter da = new SqlDataAdapter(cmd);
                    da.Fill(dt);
                }
            }
            return dt;
        }



$("#tblDemo").jqGrid(
            {
                url: '/Default.aspx/GetGridData',
                datatype: "json",
                mtype: 'GET',   
                colNames: ['Id', 'First Name', 'Last Name'],
                loadonce : true,
                colModel: [
                { name: 'Id', key: true, width: 20, stype: 'text' },
                { name: 'FirstName',  width: 150 },
                { name: 'LastName',  width: 150 }]
                , rowNum: 10,

                sortname: 'Id',
                viewrecords: true,
                sortorder: "desc",
                caption: "List Employee Details",
                scrollOffset: 0,
                gridview: true,
                postData: "{}",
                autoencode: true,
                loadError : function(xhr,st,err) { 
                    alert("Type: "+st+"; Response: "+ xhr.status + " "+xhr.statusText);
                },
                ajaxGridOptions: { contentType: "application/json" },
                serializeGridData: function (postData) {
                    return JSON.stringify(postData);
                },
                jsonReader: {
                    repeatitems: false,
                    root: function (obj) {
                        return typeof obj.d === "string" ? $.parseJSON(obj.d) : obj.d;
                    }
                }
            });

更新 3

添加了演示如何显示响应正文的屏幕截图

Answer 1

您没有发布服务器端代码或至少GetGridData 的定义。此外，您应该始终包含有关您使用的 jqGrid 版本的信息。

我想您使用的是 ASMX-WebMethod。在这种情况下，您应该包括以下参数

gridview: true,
autoencode: true,
ajaxGridOptions: { contentType: "application/json"},
serializeGridData: function (postData) {
    return JSON.stringify(postData);
},
jsonReader: {
    root: "d.rows",
    page: "d.page",
    total: "d.total",
    records: "d.records"
}

此外，如果您不打算实现服务器端分页，您应该删除colModel 的所有index 属性并考虑使用loadonce: true 选项。

如果您在 jqGrid 中加载数据时遇到任何问题，您应该始终在 jqGrid 中包含 loadError 回调。详情请见the answer。