Populate jqGrid from ASMX

I have been struggling to get 开发者_JAVA技巧this grid to populate.

This returns my 2 rows but the cells are empty?

I would prefer to do it all with the jqGrid (so with a separate Ajax call, but I couldn't get it working). Any help would be much appreciated.

The JSON the ASMX returns:

{"__type":"myproject.jq_grid","page":1,"total":1,"records":2,"rows":[{"id":1,"cell":["1","donald","duck"]},{"id":2,"cell":["2","daffy","duck"]}]}

Client side: scripts in the same order,

1. jquery-1.5.min.js
2. jquery-ui-1.8.9.custom.min.js
3. grid.locale-en.js

4. jquery.jqGrid.min.js

   $(document).ready(function () {
       $("#list1").jqGrid({
           datatype: function (postdata) {
               var params = new Object();
               params.page_index = postdata.page;
               params.page_size = postdata.rows;
               params.sort_index = postdata.sidx;
               params.sort_direction = postdata.sord;
   
               $.ajax({
                   url: "../service/contact_service.asmx/contact_jq_grid",
                   type: "POST",
                   data: JSON.stringify(params),
                   contentType: "application/json; charset=utf-8",
                   error: function (data, textStatus) {
                       alert("Error loading json");
                   },
                   success: function (data, st) {
                       if (st == "success") {
                           var results = (typeof data.d) == 'string' ? eval('(' + data.d + ')') : data.d;
   
                           $("#list1")[0].addJSONData(eval("(" + JSON.stringify(results) + ")"));
                       }
                   }
               });
           },
           colNames: ["contact_id", "first_name", "last_name"],
           colModel: [{ name: "contact_id", index: "contact_id", width: 100 },
                      { name: "first_name", index: "first_name", width: 150 },
                      { name: "last_name", index: "last_name", width: 150}],
           pager: "#pager1",
           rowNum: 10,
           rowList: [10, 20, 30],
           sortname: "contact_id",
           sortorder: "asc",
           viewRecords: true,
           jsonReader: {
               root: "rows",
               page: "page",
               total: "total",
               records: "records",
               repeatitems: false,
               id: "id",
               cell: "cell"
           }
       });
   });
   

Server side:

<WebMethod()> _
<ScriptMethod(ResponseFormat:=ResponseFormat.Json)> _
Public Function contact_jq_grid( _
  ByVal page_index As Integer, ByVal page_size As Integer, _
  ByVal sort_index As String, ByVal sort_direction As String)
  As jq_grid

    Dim jq_grid As New jq_grid

    Dim contacts As List(Of contact) = _
      contact_functions.get_contacts_aw(1, page_index - 1, page_size, sort_index, sort_direction)

    For i As Integer = 0 To contacts.Count - 1
        Dim row As New jq_grid.row()

        row.id = contacts(i).contact_id
        row.cell.Add(contacts(i).contact_id)
        row.cell.Add(contacts(i).first_name)
        row.cell.Add(contacts(i).last_name)

        jq_grid.rows.Add(row)
    Next

    jq_grid.page = page_index
    jq_grid.records = contacts.Count
    jq_grid.total = Math.Ceiling(contacts.Count / page_size)

    Return jq_grid
End Function

Public Class jq_grid
    Private _page As Integer
    Private _total As Integer
    Private _records As Integer
    Private _rows As List(Of row)

    Public Property page() As Integer
        Get
            Return _page
        End Get
        Set(ByVal value As Integer)
            _page = value
        End Set
    End Property

    Public Property total() As Integer
        Get
            Return _total
        End Get
        Set(ByVal value As Integer)
            _total = value
        End Set
    End Property

    Public Property records() As Integer
        Get
            Return _records
        End Get
        Set(ByVal value As Integer)
            _records = value
        End Set
    End Property

    Public Property rows() As List(Of row)
        Get
            Return _rows
        End Get
        Set(ByVal value As List(Of row))
            _rows = value
        End Set
    End Property

    Public Sub New()
        rows = New List(Of row)
    End Sub

    Public Class row
        Private _id As Integer
        Private _cell As List(Of String)

        Public Property id() As Integer
            Get
                Return _id
            End Get
            Set(ByVal value As Integer)
                _id = value
            End Set
        End Property

        Public Property cell() As List(Of String)
            Get
                Return _cell
            End Get
            Set(ByVal value As List(Of String))
                _cell = value
            End Set
        End Property

        Public Sub New()
            cell = New List(Of String)
        End Sub
    End Class
End Class

You main error is that you use repeatitems: false in the jsonReader, but you construct the data for repeatitems: true.

Another error: if the JSON data returned from the server really are in the format like you posted (I am not sure that it is so), that you should not use data.d in the success handle. I suppose, that you included as JSON not the server response, but the value of results variable where data.d are used.

You use very old code template with datatype as a function. You can easy rewrite the code without it (see this old answer for example). Moreover if you really need to use renamed parameters like page_index instead of page you can better use prmNames to do this.