Взаимодействие между Asp.Net и AutoComplete (jQuery) - PullRequest
Новая
       4

Взаимодействие между Asp.Net и AutoComplete (jQuery)

1 голос
/ 17 марта 2011

^, прежде всего: извините за мой английский = X

Я создаю компонент автозаполнения, и у меня возникли некоторые проблемы.

Я передаю через ajax некоторые параметры на мою страницу aspx.

JQuery код: 


/* AutoComplete */

$(function () {
    $('.ACCascata').bind('keyup', function () {

        // Criação do apontamento
        var tipoObj = $(this).attr("tipo").toString();

        $(this).autocomplete({
            source: function (request, response) {
                $.ajax({
                    url: "AutoComplete.aspx",
                    dataType: "json",
                    data: {
                        tipo: tipoObj, //Apontamento
                        q: request.term //Item digitado no input
                    },
                    success: function (event, ui) {
                        response(event);
                    },
                    error: function (xhr, ajaxOptions, thrownError) {
                        //alert(xhr.status);
                        //alert(thrownError);
                    }
                });
            }
        });
    });
});

.Net код 


public class AutocompleteItem
        {
            private String id;

            public String Id
            {
                get { return id; }
                set { id = value; }
            }

            private String value;

            public String Value
            {
                get { return this.value; }
                set { this.value = value; }
            }
        }

        protected void Page_Load(object sender, EventArgs e)
        {
            switch (Request.QueryString["tipo"])
            {
                case "pais":
                    this.BuscaPaises(Request.QueryString["q"]);
                    break;
                case "estado":
                    this.BuscaEstados(Request.QueryString["q"]);
                    break;
                case "cidade":
                    this.BuscaCidades(Request.QueryString["q"]);
                    break;
            }
        }

        private void BuscaPaises(string query)
        {
            try
            {
                AcessoDados BuscaLocal = new AcessoDados();
                BuscaLocal.OpenConnection();

                String SqlSelect = "SELECT ID, Nome FROM Paises Where Nome like '%" + query + "%'";

                BuscaLocal.Select(SqlSelect);

                //ArrayList resultado = new ArrayList();
                ArrayList result = new ArrayList();

                while (BuscaLocal.Records.Read())
                {
                    AutocompleteItem autoCompletar = new AutocompleteItem();
                    autoCompletar.Id = BuscaLocal.Records["ID"].ToString();
                    autoCompletar.Value = BuscaLocal.Records["Nome"].ToString();

                    //resultado.Add(autoCompletar);
                    result.Add(BuscaLocal.Records["Nome"].ToString());
                }

                BuscaLocal.CloseConnection();

                JavaScriptSerializer js = new JavaScriptSerializer();

                //string jsonResult = js.Serialize(resultado);
                string jsonResult = js.Serialize(result);

                Response.Write(String.Format("{0}", jsonResult));
            }
            catch (Exception falhaSelect)
            {
                throw falhaSelect;
            }
        }

Извините, португальский = X

код выше "работает", но только отправляет имя (конечно, это единственное, что я передаю). Комментированный код (3 строки) - вот что причиняет мне боль ...

Я пытаюсь отправить обратно ID и имя (Nome на португальском языке), но я не знаю, как этого добиться.

используя:

Автозаполнение Bassistance от JÖRN ZAEFFERER .

Asp.Net FrameWork 3.5.

Ответы [ 2 ]

1 голос
/ 17 марта 2011

Я только что сделал подобное упражнение.Я использовал ScriptMethod / WebMethod для обработки этого.Вот некоторый код:

Добавьте новый «Веб-сервис» в ваш проект, я назвал мой «Service.asmx» и сделайте так, чтобы ваш сервис выглядел примерно так: 

namespace Some.Thing
{
    [WebService(Namespace = "http://some.thing")]
    [ScriptService]
    public class Service : System.Web.Services.WebService
    {
        [WebMethod]
        [ScriptMethod(ResponseFormat = ResponseFormat.Json)]
        public Suggestion[] GetSuggestions(string text, int count)
        {
            using (MyDataContext context = new MyDataContext())
            {
                return (from a in context.Airports
                        ...
                        select new Suggestion()
                        {
                            ID = a.ID,
                            Text = a.ToString()
                        }).ToArray();
            }
        }

        public struct Suggestion
        {
            public string ID { get; set; }
            public string Text { get; set; }
        }
    }
}

Отредактируйте свойWeb.Config и добавьте эти строки, чтобы включить поведение WebMethod \ ScriptMethod: 

<system.web>
    <webServices>
        <protocols>
            <add name="HttpGet"/>
            <add name="HttpPost"/>
        </protocols>
    </webServices>
<system.web>

Проверьте свою службу, попытавшись посетить ее в браузере: 

http://localhost/Service.asmx/Suggestions?text=abc&count=10

Затем вы можете позвонить своемуновый метод обслуживания из JavaScript, подобный следующему: 

$("#" + fromTextBoxID).autocomplete(
{
    source: function (request, response)
    {
    $.ajax(
    {
        url: "/Service.asmx/GetSuggestions",
        type: "POST",
        async: false,
        contentType: "application/json",
        data: "{ text: \"" + request.term + "\", count: 10 }",
        success: function (data)
        {
        var items = new Array();

        for (var i = 0; i < data.d; i++)
            items[items.length] = { value: data.d[i].ID, label: data.d[i].Text };

        response(items);
        },
        error: goTravel.HandleAjaxError
    });
    },
    minLength: 1
});

Для получения дополнительной информации просмотрите эту статью на MSDN .

0 голосов
/ 17 марта 2011

Мой опыт работы с автозаполнением Jquery.UI, так что он может немного отличаться, но мы использовали этот подход, чтобы иметь соответствующее скрытое поле для каждого поля автозаполнения и обработчик для события изменения автозаполнения, которое установит идентификатор в скрытом поле. Тогда вы можете обработать отправку в обычном режиме.

...