我一直在阅读关于这个问题的各种各样的帖子和文档,我已经尝试了所有我读过的并且可以想到的 - 仍然难倒。
我正在尝试将服务器中的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中显示它。但是,由于它是本地数据,我无法对其进行排序/分页/搜索 - 这对我没有好处。
出了什么问题?
答案 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 });