如何将 jqGrid 与 asmx webservice C# 绑定

Question

请我在如何将 jqGrid 与 asmx webservice C# 绑定方面需要一些帮助，我发现了一些关于如何将 asmx webservice 转换为 JSON 的主题，但我不清楚

问候

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,
    ...
}

有关代码示例，请参阅 here。

更新：Here 和 here 您可以下载 Visual Studio 演示项目。有关其他演示项目的更多链接，请参阅 the answer。