Json 数据未绑定到 jqgrid

Question

这是我使用 jQGrid 的第一个示例，我编写了以下代码。显示了网格但没有显示数据bound.I看了很多示例但没有找到答案

这是我的Jquery代码

jQuery("#jQGridDemo").jqGrid({
                            url: 'http://localhost:7887/application/get',
                            datatype: "json",
                            contentType: 'application/json; charset=utf-8',
                            page: 1,
                            loadonce: true,
                            gridView: true,
                            loadonce: true,

                            colNames: ['Application ID', 'Application Name', 'PageLink', 'CreatedDate'],
                            colModel: [
                                { name: 'ApplicationId', key: true, width: 75 },
                                { name: 'ApplicationName', width: 150 },
                                { name: 'PageLink', width: 150 },
                                { name: 'CreatedDate', width: 150 }

                            ],

                            width: 750,
                            height: 250,
                            rowNum: 20,
                            scroll: 1, // set the scroll property to 1 to enable paging with scrollbar - virtual loading of records
                            emptyrecords: 'Scroll to bottom to retrieve new page', // the message will be displayed at the bottom 
                        })

我正在使用 web API 2 这是 c# 代码

    [Route("get")]
    [HttpGet]
public HttpResponseMessage GetApplicationData()
{
    //string pno = Request.RequestUri.ToString();

    DataSet ds = new DataSet();

    FillDataSet(ref ds);

    DataTable dt = ds.Tables[0];
    var Jsonresponse = JsonConvert.SerializeObject(dt);
    return Request.CreateResponse(HttpStatusCode.OK, Jsonresponse);
}

响应格式如下..

"[{\"ApplicationId\":1,\"ApplicationName\":\"Home\",\"PageLink\":\"~/web/Index.aspx\",\"CreatedDate\":\"2013-08-14T12:09:07.93\"},{\"ApplicationId\":2,\"ApplicationName\":\"Identify\",\"PageLink\":\"~/Web/Material/Home.aspx\",\"CreatedDate\":\"2013-08-14T12:09:07.93\"}........]"

任何人都可以告诉我为什么这个数据没有绑定到网格，请提供一些参考资料以学习使用 JQGrid

Answer 1

我建议您执行以下操作：

从 url: 'http://localhost:7887/application/get' 中删除 http://localhost:7887 前缀。对应于 Same-origin policy 你不能默认向另一个来源发出 Ajax 请求作为 HTML 页面的来源（没有其他服务器或其他端口）。所以最好在 URL 中使用绝对路径 '/application/get' 或相对路径 'application/get'。
您应该删除 JavaScript 代码中的语法错误。例如loadonce: true两次的用法是语法错误。
JavaScript 是区分大小写的语言。所以你应该小心你使用的所有参数。例如，没有 gridView 选项。您应该改用 gridview: true。
我不建议您至少在开始时使用 scroll: 1。 Virtual scrolling 在其他方法的使用上有很多小问题和限制。例如，您可以使用 toppager: true 添加标准寻呼机。
我建议您使用 height: "auto" 和 autoencode: true 选项。
jqGrid 没有 contentType 选项。你的意思可能是 ajaxGridOptions: {contentType: 'application/json; charset=utf-8'}

现在我认为您的代码的服务器部分有问题。如果您使用 datatype: "json"，则 HTTP 请求将在 HTTP header 中包含 Accept: application/json。所以通常使用 IEnumerable<Application> 作为 GetApplicationData() 的结果值。 Web API 2 会根据Accept: application/json 自动将生成的object 转换为JSON 。如果您将 unneeded 手动翻译为 JSON，则 Web API 2 将假设字符串（而不是项目数组）是 returned数据类型。对应于 JSON 标准，所有引号 " 都将被转义。所以响应包含字符串

"[{\"ApplicationId\":1,\"ApplicationName\":\"Home\",...}...]"

而不是

[{"ApplicationId":1,"ApplicationName":"Home",...}...]

要解决此问题，您应该更改 GetApplicationData() 的 return 类型并删除不需要的 JsonConvert.SerializeObject.
手动调用
我建议你使用Fiddler或IE/Chrome/Firefox的开发者工具（按F12启动）来跟踪客户端和服务器之间的HTTP流量.这对于共同理解和故障排除非常重要。

Json 数据未绑定到 jqgrid

Json data is not binding to jqgrid

jquery

jqgrid

jqgrid-asp.net