jqGrid正在加载JSON但不显示它

时间:2013-08-28 23:21:36

标签: c# jquery json jqgrid dotnetnuke

我一直在阅读关于这个问题的各种各样的帖子和文档,我已经尝试了所有我读过的并且可以想到的 - 仍然难倒。

我正在尝试将服务器中的JSON数据加载到Dot Net Nuke网站的jqGrid中。使用DNN不是我的选择,因此没有选择不使用它。话虽这么说,我已经建立了一个标准的DNN网站,并为其添加了一个C#类库项目(名为ApiLibrary)。其中有两个类:

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

WelcomeController.cs ,其中包含我的AJAX函数。我用于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;
        }

这将返回100%有效的JSON(在jslint上验证),其格式为jqGrid所需 - 即:

  

{       “总计”:“4”,       “page”:“1”,       “记录”:“4”,       “行”:[           {               “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中显示它。但是,由于它是本地数据,我无法对其进行排序/分页/搜索 - 这对我没有好处。

出了什么问题?

1 个答案:

答案 0 :(得分: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 });