KendoUI 网格不适用于 JSON

Question

我正在尝试将 KendoUI（没有服务器包装器）集成到我的 ASP.NET MVC 应用程序中：

这是 HTML 文件（仅需要代码）：

<div id="example" class="k-content">
    <div id="clientsDb">
        <div id="grid" style="height: 380px"></div>
    </div>

    <script>
        $(document).ready(function () {
            $("#grid").kendoGrid({
                dataSource: {
                    type           : "json",
                    transport      : {
                        read       : {
                            url     : "data.json",
                            type    : "POST",
                            dataType: "json"
                        },
                        contentType: "application/json"
                    },
                    schema         : {
                        data : "data",
                        total: "total"
                    },
                    pageSize       : 10,
                    serverPaging   : true,
                    serverFiltering: true,
                    serverSorting  : true
                },
                height    : 430,
                groupable : false,
                sortable  : false,
                pageable  : true,
                columns   : [
                    {
                        field: "PageUrl",
                        title: "PageUrl",
                        width: 140
                    },
                    {
                        field: "Id",
                        title: "Id",
                        width: 190
                    }
                ]
            });
        });
    </script>
</div>

这是“MyContollerName”的“ActionMethodName”方法返回的 JSON 结果：

{
    "Data" : [
        { "Id"     : 30, "PageUrl": "http://www.someurl.com" },
        { "Id"     : 29, "PageUrl": "http://www.someurl.com/" },
        { "Id"     : 26, "PageUrl": "http://www.someurl.com" }
    ],
    "Total": 10
}

但是没有渲染任何东西（渲染了网格，没有渲染结果）。获得无限渲染的“加载”图标。有人可以帮忙吗？

我还收到以下 JS 错误：“TypeError: Cannot call method 'slice' of undefined /Scripts/kendo/2013.3.1119/kendo.web.min.js:13”

Answer 1

在您定义的架构中，当您以大写形式返回数据时，数据的格式为 data（小写）。

将架构更改为：

schema         : {
    data : "Data",
    total: "total"
},

它会起作用的。