JQGrid-无法调用ASP.NET WebMethod，但可以使用Ajax

Question

我是jqGrid的新手，但发现很难按照jqGrid文档进行操作

我无法弄清楚设置JQGrid时如何调用WebMethod。我已经成功进行了Ajax调用以获取数据，然后使用本地数据设置JQGrid。我认为这是设置过程中的一个额外步骤，我应该能够使用url属性提供webmethod的路径。

editurl属性是相同的方式。我从未真正收到过发布到服务器的帖子。

原始码

尝试了JQGrid设置

function GetData()
{
    $('#list').jqGrid({
        type: "POST",
        url: "Default.aspx/GetUsersJSON",
        datatype: "json",
        height: 250,
        colName: ['Username', 'Email'],
        colModel: [
                ...
    }).jqGrid(
                'navGrid',
                '#pager',
                {
                    edit: true,
                    add: true,
                    del: true
                });
}

Web方法

        [WebMethod]
        public static string GetUsersJSON()
        {
            var users = new List();
            using(UserAdministrationSandboxDataContext uasd = new UserAdministrationSandboxDataContext())
            {
                users = uasd.GetUserList();                
            }
            JavaScriptSerializer serializer = new JavaScriptSerializer();
            return serializer.Serialize(users);

        }

当前代码

我现在知道它可以正常工作，但是我还有最后一个问题。为什么必须设置“ repeatitems：false”才能显示内容？

要使它起作用的一些注意事项包括设置ajax请求的不同方法。

（Ajax：type）是（jqgrid：mtype）（Ajax：contentType）是（jqgrid：ajaxGridOptions：{contentType：}）

最后，从文档中了解如何设置JSONReader的文档。

希望这对其他人有所帮助，并感谢Oleg的所有帮助。

JS

function GetUserDataFromServer()
{
    $('#list').jqGrid({
        url: "Default.aspx/GetUsersJSON",
        mtype: 'POST',        
        ajaxGridOptions: { contentType: "application/json" },
        datatype: "json",
        serializeGridData: function (postData)
        {
            return JSON.stringify(postData);
        },
        jsonReader: {
            root: function (obj) { return obj.d; },
            page: function (obj) { return 1; },
            total: function (obj) { return 1; },
            records: function (obj) { return obj.d.length; },
            id:'0',
            cell:'',
            repeatitems: false            
        },
        datatype: "json",
        height: 250,
        colName: ['Username', 'Email'],
        colModel: [
                {
                    name: 'Username',
                    index: 'Username',
                    width: 100,
                    editable: true
                },
                {
                    name: 'Email',
                    index: 'Email',
                    width: 220,
                    editable: true
                },
                {
                    name: 'IsLockedOut',
                    index: 'IsLockedOut',
                    width: 100,
                    editable: true,
                    edittype: 'checkbox'
                }
        ],
        caption: "Users"
    })
}

网络方法

        [WebMethod]
        [ScriptMethod(ResponseFormat = ResponseFormat.Json)]
        public static List GetUsersJSON()
        {
            using (UserAdministrationSandboxDataContext uasd = new UserAdministrationSandboxDataContext())
            {
                return uasd.GetUserList();
            }
        }

列表中的一个JSON对象

{"__type":"UserAdministrationSandbox.UserData","PKID":"00000000-0000-0000-0000-000000000001","Username":"TestUser","ApplicationName":"Test","Email":"[e-mail]","Comment":"TestUser","Password":"D41D8CD98F00B204E9800998ECF8427E","PasswordQuestion":"Is this a blank Password?","PasswordAnswer":null,"IsApproved":true,"LastActivityDate":"\/Date(1298869200000)\/","LastLoginDate":"\/Date(1298869200000)\/","LastPasswordChangedDate":"\/Date(1298869200000)\/","CreationDate":"\/Date(1298869200000)\/","IsOnLine":false,"IsLockedOut":false,"LastLockedOutDate":"\/Date(1298869200000)\/","FailedPasswordAttemptCount":0,"FailedPasswordAttemptWindowStart":null,"FailedPasswordAnswerAttemptCount":null,"FailedPasswordAnswerAttemptWindowStart":null}

Answer 1

首先，我希望答案中的代码示例可以为您提供帮助。主要思想是，您应该使用以下附加jqGrid参数

ajaxGridOptions: { contentType: 'application/json; charset=utf-8' },
serializeGridData: function (postData) {
    return JSON.stringify(postData);
},
jsonReader: { root: "d.rows", page: "d.page", total: "d.total",
              records: "d.records" };

如果服务器没有设置rows，page，total和records参数的响应，只是在你的情况下，返回的数据列表一样，你可以使用下面的jsonReader

jsonReader: {
    root: function (obj) { return obj.d; },
    page: function (obj) { return 1; },
    total: function (obj) { return 1; },
    records: function (obj) { return obj.d.length; }
}

（请参见此处）。如果您不想实现服务器端数据分页，排序和过滤，我建议您使用loadonce:true。

而且您的代码有一些问题。第一个是您JavaScriptSerializer.Serialize在网络方法中手动调用。如果使用dataType: "json"JSON响应，则将通过转换为object
$.ajax。您的情况也是如此。因此，处理程序的msg参数success具有d属性。但这msg.d不是对象，而是另一个JSON字符串，您可以使用将该字符串转换为对象eval(msg.d)。原因是您的方法的结果将再次转换为JSON。

要解决此问题，您应该将Web方法GetUsersJSON更改为以下内容：

[WebMethod]
[ScriptMethod (ResponseFormat = ResponseFormat.Json)]
public static List<User> GetUsersJSON()
{
    using(UserAdministrationSandboxDataContext uasd =
                                    new UserAdministrationSandboxDataContext())
    {
        return uasd.GetUserList();                
    }
}

那么您可以将data: eval(msg.d)上一个示例放置到中data: msg.d。

通常，一种使用web方法的附加属性[ScriptMethod (ResponseFormat = ResponseFormat.Json)]或[ScriptMethod (UseHttpGet = true, ResponseFormat = ResponseFormat.Json)]属性，但是在许多情况下（在您的情况下似乎也是如此）不需要使用此方法。

使用和之后ajaxGridOptions，jqGrid将能够读取数据页面，但是数据应为JSON格式，而不是两次编码的JSON格式。serializeGridData``jsonReader

更新 ：您要求我发表评论， 为什么
您需要使用中的repeatitems:false设置jsonReader才能读取您的数据。这是了解jsonReader工作方式的重要问题，但答案将占很小的位置。

通常，有两种主要样式可以为jqGrid格式化JSON数据。它应该是网格行的数据数组。数组的每一项都代表网格中的行，并且该行应为两个主形式中的一个

1）作为具有命名属性的对象，例如

{"Username":"TestUser","Email":"[e-mail]","Comment":"..","IsApproved":true}

或2）像这样的字符串数组

["TestUser","[e-mail]","true"]

要么

["TestUser","[e-mail]","1"]

jqGrid在edittype:'checkbox'设置的情况下将“ true”和“ 1”值都映射到布尔值“ true”
。如何了解网格中是否有许多复选框列，使用“ 1” /“ 0”格式可以减小传输数据的大小。

该repeatitems:false选项意味着jqGrid应该扫描JSON数据以查找数据的第一个（对象样式）表示形式。该repeatitems:true装置的第二个（阵列式）表示。

顺便说一句，如果您使用对象样式（repeatitems:false）cell，jsonReader则
不会使用的cell:''设置，您可以删除使用的设置。

如果网格中的一列具有唯一值id，则jsonReader采用数字形式的选项很实用。该选项id:'0'意味着“用户名”列的值将用作行ID。如果使用IE或Chrome开发人员工具的Firebug检查网格，则会看到相应的<tr>元素具有属性id="TestUser"（用于数据中）。由于在一个HTML页面上不允许在ID中重复ID，因此您可以理解，使用正确的唯一ID定义网格非常重要。如果不jqGrid的数据中找到ID列它将使用ID为“1”，“2”，......所以，如果你看到你的网格有你应该寻找在错误的价值id的财产jsonReader。

接下来的重要事情是数据表示的两种方式的优缺点：对象样式（repeatitems:false）和数组样式（repeatitems:true）

对象样式在两种主要情况下具有优势

1. 您只想在服务器上以较少的工作量发布现有对象（快速而肮脏的解决方案）
2. 您从服务器获取的数据无法更改。

在所有其他情况下，数组样式（repeatitems:true）与对象样式相比具有优势。从那里主要

1. 在对象样式表示中，将 根据需要 频繁发送 更多数据 。在您的示例中，将发送“注释”属性，而jqGrid不会使用该属性。
2. 数组样式的数据更加紧凑，因为您不会在每一行中传输属性的名称（它们是 html" target="_blank">常量 ）。

因此，如果您想减少传输数据的大小，并且可以在服务器端进行更改，我建议您使用repeatitems:true数据表示形式的数组样式（）。在这种情况下的cell:''该财产jsonReader可以很好的使用。

我建议你看看，虽然jqGrid的文档的部分约jsonReader，xmlReader和localReader。