Question

我有一个转换为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}]

与硬编码的显然相同。

但是当我在firebug中查看它时，并观察data变量在第一个例子中，似乎它被视为普通字符串

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

而在第二个例子中，firebug的手表显示

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

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

Answer 1

使用Kendo datasource并从中读取服务器中的数据。

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,....

Answer 2

问题出现在以下声明中：

var data = '@suburbs';

“data”变量是一个字符串，它不是dataSource选项的有效设置。您可以尝试var data = @suburbs;，因为您确实希望JavaScript数组不是字符串。

使用JSON数据源的奇怪的Kendo UI Autocomplete错误

2 个答案: