Question

我一直在努力尝试使用Kendo UI网格来使用简单的Web服务/测试页面。我的Web服务正在返回一串JSON数据：

[{"ord_number":"116347      ","ord_company":"HERHER12","origin_cmp_id":"HERHER02","origin_cmp_name":"HERSHEY-WEST PLANT","dest_cmp_id":"EDCPAL","dest_cmp_name":"EDC III BUILDING 1918","orderby_cmp_id":"HERHER12","orderby_cmp_name":"HERSHEY","orderby_cty_nmstct":"Hershey,PA/","billto_cmp_id":"HERHER12","billto_cmp_name":"HERSHEY","billto_cty_nmstct":"Hershey,PA/","ord_status_name":"Completed"},{"ord_number":"116348      ","ord_company":"HERHER12","origin_cmp_id":"HERHER02","origin_cmp_name":"HERSHEY-WEST PLANT","dest_cmp_id":"EDCPAL","dest_cmp_name":"EDC III BUILDING 1918","orderby_cmp_id":"HERHER12","orderby_cmp_name":"HERSHEY","orderby_cty_nmstct":"Hershey,PA/","billto_cmp_id":"HERHER12","billto_cmp_name":"HERSHEY","billto_cty_nmstct":"Hershey,PA/","ord_status_name":"Completed"}]

更准确地说，这是从Web服务调用返回的内容（这是一个ASP.NET Web服务。没什么好看的）

<?xml version="1.0" encoding="utf-8"?>
<string xmlns="http://tempuri.org/">[{"ord_number":"116347      ","ord_company":"HERHER12","origin_cmp_id":"HERHER02","origin_cmp_name":"HERSHEY-WEST PLANT","dest_cmp_id":"EDCPAL","dest_cmp_name":"EDC III BUILDING 1918","orderby_cmp_id":"HERHER12","orderby_cmp_name":"HERSHEY","orderby_cty_nmstct":"Hershey,PA/","billto_cmp_id":"HERHER12","billto_cmp_name":"HERSHEY","billto_cty_nmstct":"Hershey,PA/","ord_status_name":"Completed"},{"ord_number":"116348      ","ord_company":"HERHER12","origin_cmp_id":"HERHER02","origin_cmp_name":"HERSHEY-WEST PLANT","dest_cmp_id":"EDCPAL","dest_cmp_name":"EDC III BUILDING 1918","orderby_cmp_id":"HERHER12","orderby_cmp_name":"HERSHEY","orderby_cty_nmstct":"Hershey,PA/","billto_cmp_id":"HERHER12","billto_cmp_name":"HERSHEY","billto_cty_nmstct":"Hershey,PA/","ord_status_name":"Completed"}]</string>

以下是我希望填充数据的ASP.NET页面的内容：

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="KendoUI.aspx.cs" Inherits="KendoUI" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <link href="styles/kendo.common.min.css" rel="stylesheet" />
    <link href="styles/kendo.default.min.css" rel="stylesheet" />
    <script src="js/jquery.min.js"></script>
    <script src="js/kendo.web.min.js"></script>
</head>
<body>
    <form id="form1" runat="server">
        <div id="example" class="k-content">
            <div id="grid"></div>
            <script>
                $(document).ready(function () {

                dataSource = new kendo.data.DataSource({
                    transport: {
                        read: {
                            type: "POST",
                            url: "http://localhost/GridTest/Services/WebService.asmx/GetLegsJSON",
                            dataType: "json"
                        }
                    },
                    schema: {
                        model: {
                            id: "ord_number",
                            fields: {
                                ord_number: { type: "string"},
                                ord_company: { type: "string" },
                                origin_cmp_id: { type: "string" },
                                origin_cmp_name: { type: "string" },
                                dest_cmp_id: { type: "string" },
                                dest_cmp_name: { type: "string" },
                                orderby_cmp_id: { type: "string" },
                                orderby_cmp_name: { type: "string" },
                                orderby_cty_nmstct: { type: "string" },
                                billto_cmp_id: { type: "string" },
                                billto_cmp_name: { type: "string" },
                                billto_cty_nmstct: { type: "string" },
                                ord_status_name: { type: "string" }
                            }
                        }
                    },
                    pageSize: 10,
                    type: "json"
                });

                $("#grid").kendoGrid({
                    autobind: false,
                    dataSource: dataSource,
                    pageable: true,
                    columns: [
                        { title: "Order #", field: "ord_number" },
                        { title: "Company", field: "ord_company" },
                        { title: "Origin ID", field: "origin_cmp_id" },
                        { title: "Origin CN", field: "origin_cmp_name" },
                        { title: "Dest ID", field: "dest_cmp_id" },
                        { title: "Dest CN", field: "dest_cmp_name" },
                        { title: "Order By ID", field: "orderby_cmp_id" },
                        { title: "Order By CN", field: "orderby_cmp_name" },
                        { title: "Order By C/S", field: "orderby_cty_nmstct" },
                        { title: "BillTo ID", field: "billto_cmp_id" },
                        { title: "BillTo CN", field: "billto_cmp_name" },
                        { title: "BillTo C/S", field: "billto_cty_nmstct" },
                        { title: "Status", field: "ord_status_name" }
                    ]
                    });
                });
            </script>
        </div>
    </form>
</body>
</html>

但是没有任何内容填充，但表格中的标题在页脚中显示“没有要显示的项目”。

对于我的生活，我看不出我做错了什么。

Answer 1

您的网络服务不会返回JSON。它返回XML。您应该返回JSON而不是XML。我建议您查看以下博文：http://encosia.com/using-jquery-to-consume-aspnet-json-web-services/

此处还有一个示例网站，其中显示了如何将Kendo Grid绑定到ASMX服务：https://github.com/telerik/kendo-examples-asp-net/tree/master/grid-web-service-crud

Answer 2

在浏览WebService.asmx时获取XML的事实无需担心。这是默认配置，除非您篡改了web.config（或machine.config）。尝试使用$ .ajax（）来使用该服务，并确认结果是JSON，因为DataSource将执行此操作。问题必须在POST与GET以及使用.asmx提供的自动生成页面时进行，该服务的访问方式与使用$ .ajax（）

的标题不同。

此外，停止使用JavaScriptSerializer获取结果。创建一个表示数据模型的类，并将webMethod设置为返回该类，然后在方法中使用该类构造对象并返回该对象。 WebService将根据您的ScriptMethod提示自动解析并返回JSON。一篇很好的文章解释了这个WAY太常见的错误是http://encosia.com/asp-net-web-services-mistake-manual-json-serialization/

Answer 3

尝试添加contentType属性

read: {
    ...
    contentType: "application/json; charset=utf-8"
}

Kendo UI网格 - 不填充JSON数据

3 个答案: