Странная ошибка автозаполнения KendoUI с источником данных JSON

У меня есть список объектов, которые были преобразованы в 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);

это фактический результат 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 во втором. * Второй работает нормально.


json jquery razor kendo-ui kendo-asp.net-mvc
person lincx    schedule 25.06.2013    source источник
comment
Можете ли вы показать содержимое @suburbs? - Вы можете получить его с помощью Console.log(@suburbs) или alert(@suburbs). Это поможет определить проблему.   -  person Paritosh    schedule 25.06.2013
comment
Смотрите мое редактирование, я использовал предупреждение (данные)   -  person lincx    schedule 25.06.2013
comment
если я использую alert(@suburb), это результат - [объект Объект],[объект Объект],[объект Объект],[объект Объект],[объект Объект],[объект Объект],[объект Объект],[объект Объект],[объект Объект],[объект Объект],[объект Объект],[объект Объект]   -  person lincx    schedule 25.06.2013
comment
Я проверил это с помощью firebug и посмотрел data, и похоже, что в первом примере data обрабатывался как обычная строка, а во втором это был список объектов   -  person lincx    schedule 25.06.2013
comment
в окне просмотра Firebug "данные" первого примера были - [{"ID":1,"SuburbName":"NEWSTEAD","PostCode":"4006","State":"QLD","CountryCode":1}....   -  person lincx    schedule 25.06.2013
comment
а второй пример его [Object { ID=1, SuburbName="NEWSTEAD", PostCode="4006", more...}, Object { ID=2, SuburbName="NEWSTEADS".....   -  person lincx    schedule 25.06.2013
comment
второй работает нормально   -  person lincx    schedule 25.06.2013
comment
Я не уверен, почему проблема существует. Одно предложение: используйте Html Helper-т.е.-@(Html.Kendo().AutoComplete().BindTo(Model.Suburbs) - Демо   -  person Paritosh    schedule 25.06.2013
comment
Нет, по какой-то причине помощник kendoui html не подходит (долгая история, но я использовал Orchard CMS, а помощник kendo html невозможен, потому что пользовательский интерфейс отображается в редакторе CMS, если вы понимаете, что я имею в виду).   -  person lincx    schedule 25.06.2013
comment
просто странно, почему первый не рассматривался как список объектов   -  person lincx    schedule 25.06.2013
comment
Затем используйте источник данных Kendo и считывайте из него данные с сервера.   -  person Paritosh    schedule 25.06.2013
comment
Это был бы мой последний вариант, у меня есть уровень службы REST в проекте, и я не хочу, чтобы жестко запрограммированный URL-адрес отображался в клиенте.   -  person lincx    schedule 25.06.2013
comment
Вы можете написать URL-адрес @Url.Action("ActionName", "ControllerName", new { parameter = "" }) вместо жесткого кодирования.   -  person Paritosh    schedule 25.06.2013

Ответы (2)


arrow_upward
2
arrow_downward

Проблема в следующем утверждении:

var data = '@suburbs';

Переменная «данные» представляет собой строку, которая не является допустимой настройкой для параметра dataSource. Вы можете попробовать var data = @suburbs;, потому что вам действительно нужен массив JavaScript, а не строка.

person Atanas Korchev    schedule 25.06.2013
comment
хорошо, он показывает синтаксическую ошибку в IDE (возможно, ошибка), но когда вы запускаете его, он работает. :) - person lincx; 26.06.2013

arrow_upward
2
arrow_downward

Используйте источник данных 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,....
person Paritosh    schedule 25.06.2013