我一直在努力尝试使用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>
但是没有任何内容填充,但表格中的标题在页脚中显示“没有要显示的项目”。
对于我的生活,我看不出我做错了什么。
答案 0 :(得分:2)
您的网络服务不会返回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
答案 1 :(得分:1)
在浏览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/
答案 2 :(得分:0)
尝试添加contentType
属性
read: {
...
contentType: "application/json; charset=utf-8"
}