jqGrid 不显示来自 asmx Web 服务（vb.net）的数据

Question

我是 jQuery/jqGrid 的新手。我想从 asmx Web 服务返回 json 格式的数据并在 jqGrid 中显示数据。网格正在页面上呈现，但它不包含任何数据行。我不确定我是否返回了 jqGrid 正在寻找的正确格式。或者，如果我错过了其他东西。

（我遇到了很多与此主题相关的 SO 问题，所以如果已经回答，我提前道歉。在这一点上，即使是可用的不同答案的数量也会造成进一步的混乱）。

网络服务

 <System.Web.Script.Services.ScriptService()> _
    <WebService(Namespace:="http://tempuri.org/")> _
    <WebServiceBinding(ConformsTo:=WsiProfiles.BasicProfile1_1)> _
    <Global.Microsoft.VisualBasic.CompilerServices.DesignerGenerated()> _
    Public Class WebService1
    Inherits System.Web.Services.WebService

    Public Class Person
        Public FirstName As String
        Public LastName As String
    End Class

    <WebMethod()>
    <ScriptMethod(UseHttpGet:=False, ResponseFormat:=ResponseFormat.Json)> _
    Public Function GetPersonList() As List(Of Person)

        Dim personList As New List(Of Person)

        'Connect to DB

        'While reading from DB       
            personList.Add(
                New Person() With {
                    .FirstName= dr("fname"),
                    .LastName = dr("lastName")
                })

        'Does personList need to be converted to a different format?
        Return personList

    End Function
    End Class

ASPX 页面

jQuery("#list1").jqGrid({
            url: "http://localhost/WebService1.asmx/GetPersonList",
            datatype: "json",
            mtype: 'POST',
            colNames: ['FirstName', 'LastName'],
            colModel: [
            { name: 'FirstName', index: 'FirstName', width: 90 },
            { name: 'LastName', index: 'LastName', width: 90 }
            ],
            rowNum:10,
            rowList: [10,20,30],
            pager: '#pager1',
            viewrecords: true,
            caption: "Person List"
        });

Answer 1

了解 jqGrid 向"http://localhost/WebService1.asmx/GetPersonList" 发送附加参数很重要。 jqGrid是面向服务端实现数据分页的。因此它将仅显示 10 行数据（请参阅rowNum:10），并且起始页选择用户。因此最好更改服务器代码以支持分页。 （代码示例见the answer）

您也可以使用 jqGrid 的 loadonce: true 选项。如果 jqGrid 将实现 client side 分页并且服务器可以像您当前一样返回所有数据。不过，您必须添加更多参数才能使网格正常工作。重要的是要知道，ASMX 服务会返回 d 属性内的所有数据。所以你必须使用jsonReader 来描述jqGrid 如何读取从服务器返回的数据。可能是这样的

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

（以the answer 为例）。

Answer 2

编辑：使用这个。我已经使用没有返回 List<Person> 的参数的 ASMX 服务对其进行了测试。

$("#list1").jqGrid({
    url: "http://localhost/WebService1.asmx/GetPersonList",
    datatype: "json",
    mtype: 'POST',
    ajaxGridOptions: { contentType: 'application/json; charset=utf-8' 
    }, // ASMX wants request header to be application/json..
    serializeGridData: function (postdata) { 
        return null; 
    }, // ignores paging params - if not needed (else your service must define them)
    jsonReader: { // thanks Oleg for this tip on dealing with the ASMX data.d
        repeatitems: false,
        root: function (obj) { return obj.d; },
        page: function () { return 1; },
        total: function () { return 1; },
        records: function (obj) { return obj.d.length; }
    },
    colNames: ['FirstName', 'LastName'],
    colModel: [
        { name: 'FirstName', index: 'FirstName', width: 90 },
        { name: 'LastName', index: 'LastName', width: 90 }
        ],
    rowNum: 10,
    rowList: [10, 20, 30],
    viewrecords: true,
    caption: "Person List"
});

另一个有用的提示是在定义 jqGrid 时使用 Firebug 之类的东西来设置断点。您还应该在 Firebug 控制台中看到对您的 Web 服务进行了调用，以及响应是否返回。

另一个有用的提示是将您的 JSON 包装在 JsonResponse 类中，其中包含时间戳、状态、消息、结果......以及您需要的任何其他字段（我只使用这 4 个）。

public class JsonResponse
{
    public object[] Result { get; set; }
    public string TimeStamp { get; set; }
    public string Status { get; set; }
    public string Message { get; set; }
}