jQueryUI + ASP .NET MVC автодовършване с json данни

Имам наистина голям проблем с извикването на JSON с автоматично попълване на jQueryUI. Имам този доста прост JS:

$(document).ready(function() {
    $('#Editor_Tags').autocomplete({
        source: "/Forums/Ajax/GetTags",
        focus: function () {
            // prevent value inserted on focus
            return false;
        },
        select: function (event, ui) {
            var terms = split(this.value);
            // remove the current input
            terms.pop();
            // add the selected item
            terms.push(ui.TagName);
            // add placeholder to get the comma-and-space at the end
            terms.push("");
            this.value = terms.join(", ");
            return false;
        }
    });
});

И това е моделът, който се опитвам да върна:

public class TagView
{
    public int TagId { get; set; }
    public string TagName { get; set; }
    public int Weight { get; set; }
}

Но това не е основният проблем. Основният проблем е, че когато започна да пиша, jQuery не прави заявка към контролера. 100% съм сигурен, че посоченият URL адрес е добър. Тъй като мога ръчно да осъществя достъп до контролера, като напиша /Forums/Ajax/GetTags?term=text и получавам резултати за него. Използвам newset версия на jQuery и jQUI директно от google CDN.


autocomplete asp.net-mvc jquery-ui jquery-ui-autocomplete getjson
person Łukasz Baran    schedule 02.07.2011    source източник
comment
@Lukasz Baran: Виждате ли грешки в JavaScript на страницата? Какво се случва, когато отворите раздела console във Firebug? Изпраща ли се изобщо някаква заявка?   -  person Andrew Whitaker    schedule 02.07.2011
comment
в конзолата на firebug изглежда добре и изисква извличане на данни, но от друга страна във Fiddler не получавам никакъв резултат за ajax повикване.   -  person Łukasz Baran    schedule 02.07.2011

Отговори (2)


arrow_upward
5
arrow_downward

Приспособлението за автоматично довършване на jQueryUI очаква данните в параметъра source да отговарят на следните изисквания:

[..] прост масив от низове или съдържа обекти за всеки елемент в масива, с етикет или свойство стойност или и двете.

Така че имате две възможности:

  1. Променете модела на изглед, който сериализирате в JSON, за да отговаря на тези изисквания:

    public class TagView
{
    public string Label { get; set; }
    public string Value { get; set; }
}

  2. Променете параметъра source на приспособлението за автоматично довършване, за да бъде функция, в която сами извършвате извикването на AJAX и форматирате данните по подходящ начин:

    $("#Editor_Tags").autocomplete({
    source: function (request, response) {
        $.getJSON("/Forums/Ajax/GetTags", { term: request.term }, function (data) {
            response($.map(data, function (el) {
                return {
                    label: el.TagName,
                    value: el.TagId
                };
            }));
        });
    },
    /* other autocomplete options */
});

    Това предполага, че данните, върнати от сървъра, са JSON масив от TagView обекта.

Втората част от кода не е тествана, но поне трябва да ви насочи в правилната посока.

person Andrew Whitaker    schedule 02.07.2011

arrow_upward
0
arrow_downward

Накарах го да работи с този код:

    $('#Editor_Tags').autocomplete({
    source: function (request, response) {
        $.ajax({
            url: "/Forums/Ajax/GetTags",
            dataType: "json",
            data: {
                term: request.term
            },
            success: function (data) {
                response($.map(data, function (item) {
                    return {
                        label: item.TagName,
                        value: item.TagName
                    }
                }));
            }
        });
    }

});

Което по същество не е толкова различно от това, което е публикувал Андрю.

person Łukasz Baran    schedule 02.07.2011