数据返回到浏览器但是没有调用Kendo Grid?

时间:2015-07-22 22:36:11

标签: kendo-grid asp.net-web-api2

我有一个页面使用了许多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
    }
});

从Web API调用返回

前几个字段。标题中的长度反映了返回的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"
  }
]
呼叫后

DOM

下面是从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>

1 个答案:

答案 0 :(得分:0)

原来这是一只红鲱鱼。浏览器无法获取数据,这不是一个绑定问题。我们测试了我们的模板(很好),我们从API返回的数据,只是将它明确地插入到页面中,效果很好。

事实证明,当使用Fiddler和https连接时,fiddler会重新获取数据,但是由于CORS配置,浏览器拒绝了它。一旦我输入一些消息来试图找出绑定问题的位置(因此我打开控制台),就会在浏览器开发人员工具的控制台中看到这一点。将API服务器配置为允许使用web.config文件中的Access-Control-Allow-Origin进行跨站点访问后,它就可以正常工作。