jqGrid 正在加载 JSON 但不显示它

Question

我一直在阅读有关此问题的各种帖子和文档，并且我已经尝试了我所阅读和能想到的所有内容 - 仍然难以理解。

我正在尝试将 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”， “页”：“1”， “记录”：“4”， “行”：[ { "id": "1", "cell":["Myname", "Myboat", "Mydock", "144"] }, { “id”：“2”，“细胞”：[“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 });

值得注意的是，我在同一页面上使用了其他几个带有 jQ​​uery 的 AJAX 调用（GET 和 POST），并且解析任何 JSON 都没有问题。此外，使用该 JSON（来自 jqGrid 之外的 jQuery AJAX 调用），我可以在 jqGrid 中显示它。但是，由于它是本地数据，我无法对其进行排序/分页/搜索 - 这对我没有好处。

出了什么问题？

Answer 1

我对@9​​87654321@ 进行了更深入的研究，我可以通过将 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 });