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

JQGrid - Cannot call ASP.NET WebMethod but can with Ajax(JQGrid - 无法调用 ASP.NET WebMethod 但可以使用 Ajax)

问题描述

我是 jqGrid 的新手，我发现很难遵循文档 jqGrid 文档

I am new to jqGrid and I have found it difficult to follow the documentation jqGrid Documentation

在设置 JQGrid 时，我不知道如何调用 WebMethod.我已经成功地进行了 Ajax 调用以获取数据，然后使用本地数据设置 JQGrid.我认为这是设置过程中的一个额外步骤，并且我应该能够使用 url 属性提供网络方法的路径.

I cannot figure out how to call a WebMethod when setting up the JQGrid. I have been successful in making an Ajax call to get the data and then setting up the JQGrid with local data. I think its an extra step in the setup process and that I should be able to provide the path to the webmethod using the url property.

editurl 属性也是如此.我从来没有真正收到过服务器的帖子.

The editurl property is the same way. I am never actually receiving the post to the server.

原始代码

已尝试 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
                });
}

网络方法

        [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' 才能显示内容?

I got it working correctly now, but I still have one final question. Why did I have to set the 'repeatitems: false' in order to display the content?

要使其正常工作的一些注意事项包括设置 ajax 请求的不同方法.

Some of the caveats to get this to work include the different ways to setup the ajax request.

(Ajax: type) 是 (jqgrid: mtype)(Ajax: contentType) 是 (jqgrid : ajaxGridOptions: { contentType: })

(Ajax: type) is (jqgrid : mtype) (Ajax: contentType) is (jqgrid : ajaxGridOptions: { contentType: })

最后从文档中了解有关如何设置 JSONReader 的文档.

And finally understanding the documentation from the documentation on how to setup the JSONReader.

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

Hope this helps others and thanks Oleg for all your help.

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}

推荐答案

首先我希望代码示例来自 答案可以帮助你(另见这个答案).主要思想是，您应该使用以下附加的 jqGrid 参数

First of all I hope the code examples from the answer could help you (see also this answer). The main idea, that you should use following additional jqGrid parameters

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

If the server not set rows, page, total and records parameter in the response and just return the list of data like in your case you can use the following 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.

(see here and here). In the case if you don't want implement server side data paging, sorting and filtering I recommend you to use loadonce:true.

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

Moreover your code have some problems. The first one is that you call JavaScriptSerializer.Serialize manually in your web method. If you use dataType: "json" the JSON response will be converted to object by $.ajax. It is so in your case also. Because of that the msg parameter of the success handler has d property. But msg.d is not the object, but one more JSON string which you convert to object with eval(msg.d). The reason is that the results of your method will be converted to JSON one more time.

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

To fix the problem you should change the web method GetUsersJSON to the following:

[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.

then you can place data: eval(msg.d) in your previous example to data: msg.d.

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

Typically one use additional [ScriptMethod (ResponseFormat = ResponseFormat.Json)] or [ScriptMethod (UseHttpGet = true, ResponseFormat = ResponseFormat.Json)] attribute for the web method, but in many cases (it seems also in your case) it is not needed.

使用ajaxGridOptions后，serializeGridData和jsonReader jqGrid可以读取页面数据，但数据必须是JSON格式格式而不是两次编码的 JSON 格式.

After the usage of ajaxGridOptions, serializeGridData and jsonReader jqGrid will able to read the page of data, but the data should be in JSON format and not twice encoded JSON format.

已更新:您要求我评论为什么您需要在 jsonReader 中使用 repeatitems:false 设置能够读取您的数据.这是理解 jsonReader 是如何工作的重要问题，但答案会占一点位置.

UPDATED: You ask me to comment why you need to use repeatitems:false setting in the jsonReader to be able to read your data. It is important question for understanding how jsonReader work, but the answer will take a little place.

一般来说，有两种主要样式可以为 jqGrid 格式化 JSON 数据.它应该是网格行的数据数组.数组的每一项都代表网格中的行，行应该是两个主要形式之一

In general there are two main styles how the JSON data can be formatted for jqGrid. It should be array of data for grid rows. Every item of the array represent the row in grid and the row should be in one from the two main form

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

1) as an object with named properties like

{"Username":"TestUser","Email":"TestUser@test.com","Comment":"..","IsApproved":true}

或 2) 字符串数组，如

or 2) an array of strings like

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

或

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

jqGrid 在 edittype:'checkbox' 设置的情况下将true"和1"值映射到布尔值true".如果网格有许多复选框列，您如何理解使用1"/0"格式可以减少传输数据的大小.

jqGrid map both "true" and "1" values to the boolean value "true" in case of edittype:'checkbox' setting. How you can understand if the grid has many checkbox-columns the usage of "1"/"0" format can reduce the size of transfered data.

repeatitems:false 选项意味着 jqGrid 应该扫描 JSON 数据以获取数据的第一个(对象样式)表示.repeatitems:true 表示第二种(数组样式)表示.

The repeatitems:false option means that jqGrid should scan JSON data for the first (object style) representation of data. The repeatitems:true means the second (array style) representation.

顺便说一句，如果您使用对象样式 (repeatitems:false)，jsonReader 的 cell 设置将是 not使用，您可以删除您使用的 cell:'' 设置.

By the way if you use the object style (repeatitems:false) the cell setting of the jsonReader will be not used and you can remove cell:'' setting which you use.

jsonReader 的 id 选项如果您在网格中有一个具有唯一值的列，那么数字形式的选项是实用的.选项 id:'0' 表示用户名"列的值将用作行 id.如果您使用 IE 或 Chrome 的开发者工具的 Firebug 检查网格，您会看到相应的 <tr> 元素具有属性 id="TestUser"(在您的数据).因为在一个 HTML 页面上不允许重复 id，所以您可以理解使用正确的唯一 id 定义网格非常重要.如果 jqGrid 在数据中找不到 id 列，它将使用 ids "1", "2", ... 所以如果你看到你的网格有值，你应该在 id 中搜索错误jsonReader 的属性.

The id option of the jsonReader in numeric form is practical if you have one column in the grid with unique values. The option id:'0' means that the value of the column "Username" will be used as the row id. If you examine the grid with Firebug of Developer tools of IE or Chrome you will see that the corresponding <tr> element has attribute id="TestUser" (used in your data). Because duplicate in ids are not allowed on one HTML page, you can understand that it is very important to define grid with correct unique ids. If jqGrid not find id column in the data it will use ids "1", "2", ... So if you see that your grid has the values you should search for the error in the id property of the jsonReader.

接下来重要的是两种数据表示方式的优缺点:对象样式(repeatitems:false)和数组样式(repeatitems:true)

The next important thing is the advantages and disadvantages of two ways of the data representation: object style (repeatitems:false) and array style (repeatitems:true)

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

The object style has advantage in two main cases

1. 您只想在服务器上尽可能少地发布现有对象(快速而肮脏的解决方案)
2. 你从服务器获取数据，你不能改变哪个接口.

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

In all other situations the array style (repeatitems:true) has advantages compared with the object style. The main from there

1. 在对象样式表示中会经常发送更多数据根据需要.在您的示例中，例如评论"属性将被发送，jqGrid 不会使用它.
2. 数组样式的数据更加紧凑，因为您不会在每一行中传输属性名称(它们是常量).

1. In the object style representation will be send frequently more data as needed. In your example the "Comment" property for example will be send which will not be used by jqGrid.
2. The data from array style are much more compacter because you will not transfer the name of properties (which are constants) in every row.

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

So if you want to reduce the size of transfered data and you can make changes on the server side I would recommend you to use array style (repeatitems:true) of representation of data. In the case the cell:'' property of the jsonReader can be good used.

我建议您查看 jqGrid 文档部分 关于jsonReader、xmlReader和localReader.

I recommend you to look though the part of jqGrid documentation about jsonReader, xmlReader and localReader.

这篇关于JQGrid - 无法调用 ASP.NET WebMethod 但可以使用 Ajax的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！