0

私はこの問題に関するさまざまな投稿やドキュメントを読んでおり、読んで考えられることはすべて試しましたが、まだ困惑しています。

JSON データをサーバーから Dot Net Nuke Web サイトの jqGrid にロードしようとしています。DNN の使用は私の選択ではないため、使用しないという選択肢はありません。そうは言っても、標準の DNN Web サイトをセットアップし、C# クラス ライブラリ プロジェクト (ApiLibrary という名前) を追加しました。その中には、次の 2 つのクラスがあります。

RouteMapper.cs

using DotNetNuke.Web.Api;

namespace ApiLibrary
{
    public class RouteMapper : IServiceRouteMapper
    {
        public void RegisterRoutes(IMapRoute mapRouteManager)
        {
            mapRouteManager.MapHttpRoute("ApiLibrary", "default", "{controller}/{action}", new[] { "ApiLibrary" });          
        }
    }
}

私のAJAX関数を含むWelcomeController.cs 。私がjqGridに使用しているものは次のとおりです。

[WebInvoke(Method = "POST", ResponseFormat = WebMessageFormat.Json, RequestFormat = WebMessageFormat.Json)]
public string GetMyData(string sidx, string sord, int page, int rows)
        {
            var myList = GetTransportTable(); // returns List<TransportInfo>
            var rowlist = new List<Row>() { };
            int m = 0;
            for (var i = 0; i < myList.Count; i++)
            {
                m = i + 1;
                Row rowobj = new Row();
                var stringList = new List<string>();
                rowobj.id = m.ToString();

                stringList.Add(myList[i].Pilot);
                stringList.Add(myList[i].Vessel);
                stringList.Add(myList[i].Dock);
                stringList.Add(myList[i].Amount.ToString("c"));

                rowobj.cell = stringList;
                rowlist.Add(rowobj);
            }

            var jsonToReturn = new
            {
                total = 3,
                page = 1,
                records = myList.Count.ToString(),
                rows = rowlist.ToArray()
            };


            string jData = string.Empty;        
            jData = JsonConvert.SerializeObject(jsonToReturn);

            return jData;
        }

これは、jqGrid が必要とする形式の 100% 有効な JSON (jslint で検証済み) を返します。

{ "total": "4", "page": "1", "records": "4", "rows": [ { "id": "1", "cell":["Myname", "Myboat ", "Mydock", "144"] }, { "id": "2", "cell":["Myname1", "Myboat1", "Mydock1", "1414"] } ] }

jqGrid のドキュメントに記載されている各イベントについて、alert()そのイベント中にデータを表示すると、完全にフォーマットされた JSON が表示されます。これは、jqGrid がデータを正常に受信していることを示していますが、何かがデータの表示を妨げています。

私はjsonReader、jsonmap、および私が遭遇した他のほとんどすべての提案/オプションを使用してみました。

javascript と css の参照を確認して再確認しましたが、問題ありません。グリッドをロードするための私の Javascript は次のとおりです。

$("#reviewList").jqGrid({

ajaxGridOptions: { contentType: 'application/json; charset=utf-8' },
url: 'DesktopModules/ApiLibrary/API/Welcome/GetMyData',
jsonReader: {
                repeatitems: false,
                id: "id",
                root: "rows",
                page: "page",
                total: "total",
                records: "records",
                cell: "cell"
            },
colNames: ['Pilot', 'Vessel', 'Dock', 'Amount'],
colModel: [
 { name: 'Pilot', width: 250, align: 'center' },
 { name: 'Vessel', width: 250, align: 'center' },
 { name: 'Dock', width: 175, align: 'center' },
 { name: 'Amount', width: 110, align: 'center' }
],
rowNum: 10,
rowList: [10, 20, 30],
pager: "#pager2",
viewrecords: true,
sortname: 'Pilot',
sortorder: 'asc',
caption: 'Transport List Overview'

 }).navGrid("#pager2", { edit: false, add: false, del: false });

同じページで jQuery (GET と POST の両方) を使用して他のいくつかの AJAX 呼び出しを使用し、JSON の解析に問題がなかったことは注目に値します。また、その JSON (jqGrid 外の jQuery AJAX 呼び出しから) を使用して、jqGrid に表示できます。ただし、ローカル データであるため、並べ替え/ページング/検索ができません。これは私にはよくありません。

何がうまくいかないのですか？

4

1 に答える 1

2

DNN Services Frameworkをもう少し詳しく調べたところ、 WelcomController.csの AJAX メソッドを次のように変更することで、これを機能させることができました。

    [System.Web.Http.HttpPost]
    public HttpResponseMessage GetMyData()
    {
        var myList = GetTransportTable(); //returns List<TransportInfo>
        var rowlist = new List<Row>() { };

        for (var i = 0; i < myList.Count; i++)
        {
            Row rowobj = new Row();
            var stringList = new List<string>();
            rowobj.id = i;

            stringList.Add(myList[i].DockDate.ToString("d"));
            stringList.Add(myList[i].Pilot);
            stringList.Add(myList[i].Vessel);
            stringList.Add(myList[i].Dock);
            stringList.Add(myList[i].Amount.ToString("c"));

            rowobj.cell = stringList;
            rowlist.Add(rowobj);
        }

        var jsonToReturn = new
        {
            total = 1,
            page = 1,
            records = myList.Count.ToString(),
            rows = rowlist
        };

        return Request.CreateResponse(HttpStatusCode.OK, jsonToReturn);
    }

私のjavascriptでは、jsonReaderを削除して追加しましmtype:'POST'た。新しい jqGrid 関数は次のとおりです。

$("#reviewList").jqGrid({
            loadError: function(xhr, status, error) {
                alert('load error: ' + error);
            },    
            mtype: 'POST',
            ajaxGridOptions: { contentType: 'application/json; charset=utf-8' },
            url: 'DesktopModules/ApiLibrary/API/Welcome/GetMyData',
            datatype: "json",

            colNames: ['Date','Pilot', 'Vessel', 'Dock', 'Amount'],
            colModel: [
                {name: 'DockDate', index:'DockDate', width: 90,  align: 'center'},                
                { name: 'Pilot', index: 'Pilot', width: 250, sortable: true, align: 'center' },
                { name: 'Vessel', index: 'Vessel', width: 250, sortable: true, align: 'center' },
                { name: 'Dock', index: 'Dock', width: 175, sortable: true, align: 'center' },
                { name: 'Amount', index: 'Amount', width: 110, sortable: true, align: 'center', sorttype: 'float' }
            ],

            rownumbers: true,
            rowNum: 10,
            rowList: [10, 20, 30],
            pager: "#pager2",
            viewrecords: true,
            caption: 'Transport List Overview',
            height: "auto"
            //loadonce: true
        }).navGrid("#pager2", { edit: false, add: false, del: false });
于 2013-08-29T15:36:43.573 に答える