Kendo Grid未绑定到ASMX Web Service的JSON结果

时间:2015-05-12 05:13:20

标签: asp.net json kendo-grid asmx

我遇到了将Kendo GRID绑定到ASP.NET asmx Web服务的问题。

以下是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上仍然看不到任何内容。 浏览器控制台没有错误。

2 个答案:

答案 0 :(得分:1)

我认为问题仅在于JSON数据。

下面给出了修改过的JSON,替换了\&#34;用&#34;并删除方括号前后的引用

queryParam

Please find the fiddle here after cleaning up the json

答案 1 :(得分:1)

我将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。这就是它如何为我工作。

但是如果可能的话,我仍在寻找在服务器端执行此操作的方法。

由于