1

我有一个转换为 JSON 的对象列表，我想将其加载到我的 KendoUi 自动完成控件中。

此代码不起作用

@{

    var suburbs = Html.Raw(Json.Encode(Model.Suburbs));

    <script>

    $(function () {

        var data = '@suburbs';

        $("#sSuburb").kendoAutoComplete({
                dataSource: data,
                filter: "startswith",
                placeholder: "Select suburb...",
                dataTextField: "SuburbName",
                dataValueField: "ID",
                separator: ", "
            });
     });
    <script>
}

但是这个是怎么工作的

 var data = [{ "ID": 1, "SuburbName": "NEWSTEAD", "PostCode": "4006", "State": "QLD", "CountryCode": 1 }, { "ID": 2, "SuburbName": "NEWSTEADS", "PostCode": "4006", "State": "QLD", "CountryCode": 1 }, { "ID": 4, "SuburbName": "NEWS", "PostCode": "4006", "State": "QLD", "CountryCode": 1 }, { "ID": 5, "SuburbName": "NEWSTEST", "PostCode": "4006", "State": "QLD", "CountryCode": 1 },];

  $("#sSuburb").kendoAutoComplete({
                dataSource: data,
                filter: "startswith",
                placeholder: "Select suburb...",
                dataTextField: "SuburbName",
                dataValueField: "ID",
                separator: ", "
            });

不用说，两个示例中的 JSON 结果是相同的。我在这里想念什么吗？

更新：

我也尝试过 JSON.Stringify 但仍然没有运气

    var data = JSON.stringify(@suburbs);

这是我使用 alert(data) 时的实际 json 结果；

[{"ID":1,"SuburbName":"NEWSTEAD","PostCode":"4006","State":"QLD","CountryCode":1},{"ID":2,"SuburbName":"NEWSTEADS","PostCode":"4006","State":"QLD","CountryCode":1},{"ID":4,"SuburbName":"NEWS","PostCode":"4006","State":"QLD","CountryCode":1},{"ID":5,"SuburbName":"NEWSTEST","PostCode":"4006","State":"QLD","CountryCode":1},{"ID":6,"SuburbName":"NETWORK","PostCode":"9006","State":"QLD","CountryCode":1},{"ID":7,"SuburbName":"NEW JERS","PostCode":"9006","State":"QLD","CountryCode":1},{"ID":8,"SuburbName":"SYDNEY","PostCode":"2001","State":"NSW","CountryCode":1},{"ID":9,"SuburbName":"SYDNEYHAM","PostCode":"2001","State":"NSW","CountryCode":1},{"ID":10,"SuburbName":"SYD","PostCode":"2001","State":"NSW","CountryCode":1},{"ID":11,"SuburbName":"SYRACUSE","PostCode":"2001","State":"NSW","CountryCode":1},{"ID":12,"SuburbName":"SYDTEST","PostCode":"9001","State":"NSW","CountryCode":1},{"ID":13,"SuburbName":"SYDDD","PostCode":"9001","State":"NSW","CountryCode":1}]

与硬编码的明显相同。

但是当我在萤火虫中查看它并data在第一个示例中查看变量时，似乎它被视为普通字符串

"[{"ID":1,"SuburbName":"NEWSTEAD","PostCode":"4006","State":"QLD","CountryCode":1},{"ID":2,"SuburbName":"NEWSTEADS","PostCode":"4006","State":"QLD","CountryCode":1}....

而在第二个例子中，萤火虫的手表显示

[Object { ID=1, SuburbName="NEWSTEAD", PostCode="4006", more...}, Object { ID=2, SuburbName="NEWSTEADS".......

*请注意Object第二个中的内容。*第二个工作正常。

4

2 回答 2

2

使用Kendo 数据源并从中读取来自服务器的数据。

var dataSource = new kendo.data.DataSource({
    transport: {
        read: {            
            url: serverMethodURL,  // the remote service url
            dataType: "jsonp",     // JSONP is required for cross-domain AJAX

            // additional parameters sent to the remote service
            data: {
                q: "html5"
            }
        }
    },
    // describe the result format
    schema: {
        // the data which the data source will be bound to is in the "results" field
        data: "results"
    }
});

然后将其绑定到自动完成（如演示）

$("#sSuburb").kendoAutoComplete({
      dataSource: dataSource,....
于 2013-06-25T05:40:22.153 回答
2

问题出在以下语句中：

var data = '@suburbs';

“数据”变量是一个字符串，它不是该dataSource选项的有效设置。您可以尝试var data = @suburbs;，因为您真的想要一个 JavaScript 数组而不是字符串。

于 2013-06-25T06:44:55.177 回答