Kendo 网格未绑定到来自 ASMX Web 服务的 JSON 结果
Kendo Grid not binding to JSON result from ASMX Web Service
我在将 Kendo GRID 绑定到 ASP.NET asmx 网络服务时遇到问题。
以下是HTML代码
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="styles/kendo.common.min.css" />
<link rel="stylesheet" href="styles/kendo.default.min.css" />
<link rel="stylesheet" href="styles/kendo.dataviz.min.css" />
<link rel="stylesheet" href="styles/kendo.dataviz.default.min.css" />
<link href="styles/kendo.common-bootstrap.min.css" rel="stylesheet" />
<link href="styles/kendo.bootstrap.min.css" rel="stylesheet" />
<link href="../BOOTSTRAP/bootstrap.min.css" rel="stylesheet" />
<script src="../Scripts/jquery-2.0.3.min.js"></script>
<script src="js/kendo.all.min.js"></script>
<script src="../BOOTSTRAP/bootstrap.min.js"></script>
</head>
<body>
<div id="example">
<div id="grid" class="table table-bordered"></div>
<script>
$(document).ready(function () {
$("#grid").kendoGrid({
columns: [
{ field: "srno", title: "SRNO" },
{ field: "party", title: "PARTY" }
],
dataSource: new kendo.data.DataSource({
transport: {
read: {
url: "../Service/DatabaseHandling.asmx/GetPurchaseJangad_JSON",
dataType: "json",
contentType: "application/json; charset=utf-8"
}
}
}),
schema: {
data: "d"
},
sortable: true
});
});
</script>
</div>
</body>
</html>
JSON 从服务返回看起来正常,如下所示。
{"d":"[{\"srno\":17,\"party\":\"PARESH\",\"dt\":\"11/5/2015\",\"weight\":15000.0,\"timestamp\":\"2015-05-11T20:19:55.093\"},{\"srno\":18,\"party\":\"SIM\",\"dt\":\"11/5/2015\",\"weight\":11000.0,\"timestamp\":\"2015-05-11T20:21:44.177\"}]"}
GRID 上仍然看不到任何内容。
并且浏览器控制台没有错误。
我认为问题仅出在 JSON 数据上。
修改了下面给出的 JSON,将 \" 替换为 " 并删除了方括号前后的引号
{"d":[{"srno":17,"party":"PARESH","dt":"11/5/2015","weight":15000.0,"timestamp":"2015-05-11T20:19:55.093"},{"srno":18,"party":"SIM","dt":"11/5/2015","weight":11000.0,"timestamp":"2015-05-11T20:21:44.177"}]}
我将 jQuery 代码更改为以下代码。
$(document).ready(function () {
var data;
var webMethod = "../Service/DatabaseHandling.asmx/GetPurchaseJangad_JSON";
var parameters = "{}";
$.ajax({
contentType: "application/json; charset=utf-8",
url: webMethod,
data: parameters,
dataType: "json",
success: function (response) {
data = $.parseJSON(response.d);
console.log(data);
$("#grid").kendoGrid({
columns: [
{ field: "srno", title: "SRNO" },
{ field: "party", title: "PARTY" },
{ field: "dt", title: "DATE" },
{ field: "weight", title: "WEIGHT" }
],
dataSource: {
transport: {
read: function (options) {
options.success(data);
}
},
schema: {
}
}
});
}
});
});
我所做的是通过 jQuery ajax 调用的服务。得到包含反斜杠和引号的数据。然后在代码中,使用 $.parseJSON 获得所需的 JSON 格式。然后在成功后将该数据传递给 Kendo GRID。这就是它为我工作的方式。
但如果可能的话,我仍在寻找一种在服务器端执行此操作的方法。
谢谢
我在将 Kendo GRID 绑定到 ASP.NET asmx 网络服务时遇到问题。
以下是HTML代码
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="styles/kendo.common.min.css" />
<link rel="stylesheet" href="styles/kendo.default.min.css" />
<link rel="stylesheet" href="styles/kendo.dataviz.min.css" />
<link rel="stylesheet" href="styles/kendo.dataviz.default.min.css" />
<link href="styles/kendo.common-bootstrap.min.css" rel="stylesheet" />
<link href="styles/kendo.bootstrap.min.css" rel="stylesheet" />
<link href="../BOOTSTRAP/bootstrap.min.css" rel="stylesheet" />
<script src="../Scripts/jquery-2.0.3.min.js"></script>
<script src="js/kendo.all.min.js"></script>
<script src="../BOOTSTRAP/bootstrap.min.js"></script>
</head>
<body>
<div id="example">
<div id="grid" class="table table-bordered"></div>
<script>
$(document).ready(function () {
$("#grid").kendoGrid({
columns: [
{ field: "srno", title: "SRNO" },
{ field: "party", title: "PARTY" }
],
dataSource: new kendo.data.DataSource({
transport: {
read: {
url: "../Service/DatabaseHandling.asmx/GetPurchaseJangad_JSON",
dataType: "json",
contentType: "application/json; charset=utf-8"
}
}
}),
schema: {
data: "d"
},
sortable: true
});
});
</script>
</div>
</body>
</html>
JSON 从服务返回看起来正常,如下所示。
{"d":"[{\"srno\":17,\"party\":\"PARESH\",\"dt\":\"11/5/2015\",\"weight\":15000.0,\"timestamp\":\"2015-05-11T20:19:55.093\"},{\"srno\":18,\"party\":\"SIM\",\"dt\":\"11/5/2015\",\"weight\":11000.0,\"timestamp\":\"2015-05-11T20:21:44.177\"}]"}
GRID 上仍然看不到任何内容。 并且浏览器控制台没有错误。
我认为问题仅出在 JSON 数据上。
修改了下面给出的 JSON,将 \" 替换为 " 并删除了方括号前后的引号
{"d":[{"srno":17,"party":"PARESH","dt":"11/5/2015","weight":15000.0,"timestamp":"2015-05-11T20:19:55.093"},{"srno":18,"party":"SIM","dt":"11/5/2015","weight":11000.0,"timestamp":"2015-05-11T20:21:44.177"}]}
我将 jQuery 代码更改为以下代码。
$(document).ready(function () {
var data;
var webMethod = "../Service/DatabaseHandling.asmx/GetPurchaseJangad_JSON";
var parameters = "{}";
$.ajax({
contentType: "application/json; charset=utf-8",
url: webMethod,
data: parameters,
dataType: "json",
success: function (response) {
data = $.parseJSON(response.d);
console.log(data);
$("#grid").kendoGrid({
columns: [
{ field: "srno", title: "SRNO" },
{ field: "party", title: "PARTY" },
{ field: "dt", title: "DATE" },
{ field: "weight", title: "WEIGHT" }
],
dataSource: {
transport: {
read: function (options) {
options.success(data);
}
},
schema: {
}
}
});
}
});
});
我所做的是通过 jQuery ajax 调用的服务。得到包含反斜杠和引号的数据。然后在代码中,使用 $.parseJSON 获得所需的 JSON 格式。然后在成功后将该数据传递给 Kendo GRID。这就是它为我工作的方式。
但如果可能的话,我仍在寻找一种在服务器端执行此操作的方法。
谢谢