小编典典

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

json

我是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":"TestUser@test.com","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}

阅读 284

收藏
2020-07-27

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

如果服务器没有设置rowspagetotalrecords参数的响应,只是在你的情况下,返回的数据列表一样,你可以使用下面的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":"TestUser@test.com","Comment":"..","IsApproved":true}

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

["TestUser","TestUser@test.com","true"]

要么

["TestUser","TestUser@test.com","1"]

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

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

顺便说一句,如果您使用对象样式(repeatitems:falsecelljsonReader
不会使用的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. 数组样式的数据更加紧凑,因为您不会在每一行中传输属性的名称(它们是 常量 )。

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

我建议你看看,虽然jqGrid的文档的部分jsonReaderxmlReaderlocalReader

2020-07-27