我有一个页面使用了许多Kendo网格。每个网格定义一个数据源,对Wep API 2.0资源进行ajax调用。
Fiddler显示正在进行ajax调用并正确返回数据。但是,网格似乎对它无能为力。我有一个函数用于网格上的dataBound属性,它永远不会被调用。
有什么想法可能会发生什么?
这是代码和返回的数据。
var getUnassignedCases = new kendo.data.DataSource({
type: "odata",
transport: {
read: {
url: hostUrl + "/api/cases/getUnassignedCases/" + sakUser,
dataType: "jsonp",
cache: false,
data: { id: sakCase }
},
scrollable: {
virtual: true
},
pageSize: 10,
resizable: true,
sortable: {
mode: "single",
allowUnsort: true
},
pageable: {
input: true,
numeric: false,
buttonCount: 10
}
},
schema: {
model: {
id: "SakCase",
fields: {
SakCase: { type: "number" },
CaseId: { type: "string" },
SakIntake: { type: "string" },
CaseTypeDescription: { type: "string" },
DateCreated: { type: "date" },
CaseStatusCode: { type: "string" }
}
}
},
pageSize: 10
});
永远不会调用DisplayNoResultsFound
函数(现在就是这样),所以我没有包含源代码。
$("#UnassignedCasesGrid").kendoGrid({
columns: [
{ field: "CaseId", title: "Case ID", width: 150, template: "<a href='/Arms/Case_Information.aspx?SakCase=${SakCase}'>${CaseId}</a>" },
{ field: "SakIntake", title: "Intake ID", template: "#if (SakIntake === null) {# #} else {#<a href='/Arms/Intake.aspx?SakIntake=${SakIntake}'>${SakIntake}</a>#} #" },
{ field: "CaseTypeDescription", title: "Case Type", width: 100 },
{ field: "DateCreated", title: "Date Created", format: '{0:MM/dd/yyyy}', width: 100, editor: dateTimeEditor },
{ field: "CaseStatusCode", title: "Case Status" }
],
dataSource: getUnassignedCases,
dataBound: function () {
DisplayNoResultsFound($('#UnassignedCasesGrid'), 'UnassignedCasesCount', 'Unassigned Cases');
},
type: "aspnetmvc-ajax",
groupable: false,
scrollable: {
virtual: true
},
pageSize: 10,
resizable: true,
sortable: {
mode: "single",
allowUnsort: true
},
pageable: {
buttonCount: 10
}
});
前几个字段。标题中的长度反映了返回的100个测试行。
HTTP/1.1 200 OK
Cache-Control: no-cache
Pragma: no-cache
Content-Type: application/json; charset=utf-8
Expires: -1
Server: Microsoft-IIS/7.5
X-AspNet-Version: 4.0.30319
X-Powered-By: ASP.NET
Date: Fri, 24 Jul 2015 17:46:56 GMT
Content-Length: 14993
[
{
"SakCase": 1,
"CaseId": "2015M00001",
"SakIntake": null,
"CaseTypeDescription": "Medical Review",
"DateCreated": "2014-08-04T17:19:59",
"CaseStatusCode": "O"
},
{
"SakCase": 2,
"CaseId": "2015M00002",
"SakIntake": null,
"CaseTypeDescription": "Medical Review",
"DateCreated": "2013-03-20T08:02:46",
"CaseStatusCode": "O"
}
]
呼叫后下面是从chrome检查元素中获取的。
这是列的定义:
<thead role="rowgroup">
<tr role="row">
<th role="columnheader" data-field="CaseId" data-title="Case ID" class="k-header" data-role="sorter">
<a class="k-link" href="#">Case ID</a>
</th>
<th role="columnheader" data-field="SakIntake" data-title="Intake ID" class="k-header" data-role="sorter">
<a class="k-link" href="#">Intake ID</a>
</th>
<th role="columnheader" data-field="CaseTypeDescription" data-title="Case Type" class="k-header" data-role="sorter">
<a class="k-link" href="#">Case Type</a>
</th>
<th role="columnheader" data-field="DateCreated" data-title="Date Created" class="k-header" data-role="sorter">
<a class="k-link" href="#">Date Created</a>
</th>
<th role="columnheader" data-field="CaseStatusCode" data-title="Case Status" class="k-header" data-role="sorter">
<a class="k-link" href="#">Case Status</a>
</th>
</tr>
</thead>
这是表的内容:
<table role="grid">
<colgroup>
<col style="width:150px">
<col>
<col style="width:100px">
<col style="width:100px">
<col>
</colgroup>
<tbody role="rowgroup"></tbody>
</table>
答案 0 :(得分:0)
原来这是一只红鲱鱼。浏览器无法获取数据,这不是一个绑定问题。我们测试了我们的模板(很好),我们从API返回的数据,只是将它明确地插入到页面中,效果很好。
事实证明,当使用Fiddler和https连接时,fiddler会重新获取数据,但是由于CORS配置,浏览器拒绝了它。一旦我输入一些消息来试图找出绑定问题的位置(因此我打开控制台),就会在浏览器开发人员工具的控制台中看到这一点。将API服务器配置为允许使用web.config文件中的Access-Control-Allow-Origin
进行跨站点访问后,它就可以正常工作。