0

我一直在努力尝试使用 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>

但是除了表中的页眉之外没有任何内容填充，页脚中的“没有要显示的项目”。

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

4

3 回答 3

2

您的 Web 服务不返回 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

于 2013-04-27T18:00:48.837 回答
1

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

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

于 2013-05-08T23:18:16.727 回答
0

尝试添加contentType属性

read: {
    ...
    contentType: "application/json; charset=utf-8"
}
于 2013-10-10T13:02:30.823 回答