0

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"
        });
4

2 に答える 2

2

jqGridが"http://localhost/WebService1.asmx/GetPersonList"追加のパラメーターに送信することを理解することが重要です。jqGridは、サーバーがデータのページングを実装することを目的としています。したがって、10行のデータのみが表示され（を参照rowNum:10）、開始ページでユーザーを選択します。したがって、ページングをサポートするようにサーバーコードを変更することをお勧めします。（コード例については回答を参照してください）

loadonce: trueまたは、jqGridのオプションを使用することもできます。この場合、jqGridはクライアント側のページングを実装し、サーバーは現在のようにすべてのデータを返すことができます。それでも、グリッドを機能させるには、さらにいくつかのパラメーターを追加する必要があります。ASMXサービスがdプロパティ内のすべてのデータを返すことを知っておくことが重要です。したがってjsonReader、jqGridがサーバーから返されたデータを読み取る方法を説明するwhichを使用する必要があります。それは次のようなものかもしれません

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

（例として答えを参照してください）。

于 2012-08-29T20:59:43.930 に答える
1

編集：これを使用します。を返すパラメータのないASMXサービスを使用してテストしましたList<Person>。

$("#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"
});

もう1つの役立つヒントは、Firebugのようなものを使用して、jqGridが定義されたときにブレークポイントを設定することです。また、Firebugコンソールで、Webサービスが呼び出されたこと、および応答が返されるかどうかを確認する必要があります。

もう1つの役立つヒントは、タイムスタンプ、ステータス、メッセージ、結果、およびその他の必要なフィールドを使用して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; }
}
于 2012-08-29T20:05:47.063 に答える