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

添加了关于演示如何显示响应正文的截图

enter image description here

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

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

如果您在jqGrid中加载数据时遇到任何问题，则应始终在jqGrid中包含loadError回调。有关详细信息，请参阅the answer。

从jqGrid调用WebMethod

1 个答案: