如何使用C# asmx webservice 绑定 jqGrid

Question

请帮我解决一个问题，如何将jqGrid与C#的asmx webservice绑定。我查找了一些关于将asmx webservice转换为JSON的话题，但是我并不清楚。谢谢！祝好！

- Ayman Al Ahnomi

Answer 1

首先，您应该定义WebMethod，以提供jqGrid所需的数据。如果您计划实现服务器端排序和分页功能，则webmethod应至少具有以下参数：

public JqGridData TestMethod (int page, int rows, string sidx, string sord)

例如，JqGridData类将会被定义为：

public class TableRow {
    public int id { get; set; }
    public List<string> cell { get; set; }
}
public class JqGridData {
    public int total { get; set; }
    public int page { get; set; }
    public int records { get; set; }
    public List<TableRow> rows { get; set; }
}

有不同的选项可以填充网格，但首先重要的是要理解至少一种方法。

从Web方法返回JSON数据时，您无需手动将返回的数据转换为JSON。您只需要返回带有数据的对象，ASMX Web服务会根据HTTP请求头中的标头自行将对象序列化为XML或JSON。

如果向服务器的请求在HTTP标头的Content-Type部分中具有application/json; charset=utf-8或application/json，则返回的数据将是JSON，并且将被

{
    "d": {
        "page": 1,
        "total": 4,
        "records": 4,
        "rows": [
            ...
        ]
    }
}

在客户端，您应该使用：

$("#list").jqGrid({
    url: 'MyTestWS.asmx/TestMethod',
    datatype: 'json',
    mtype: 'POST',
    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"
    }
    gridview: true,
    ...
}

请参考这里的代码示例。

更新：你可以在这里和这里下载Visual Studio演示项目。查看答案以获取其他演示项目的链接。

- Oleg