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

Posted 2023-05-09

【中文标题】jqGrid 不显示来自 asmx Web 服务（vb.net）的数据

【英文标题】：jqGrid does not display data from asmx web service (vb.net)

【发布时间】：2012-08-24 11:35:42

【问题描述】：

我是 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"
        );

【参考方案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 为例）。

【参考方案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; 

【讨论】：

抱歉，我的实际代码中有“WebService1.asmx”。我更新了我的问题以反映更正。

我添加了 contentType 但仍然看不到网格中的数据:(

您使用的是什么版本的 jQuery 和 jqGrid？ （抱歉耽搁了——在我这样做的时候在我寂寞的地方吃晚饭）

Np，jQuery 是 v1.8.0，jqGrid 是 v4.4.1