Взаимодействия между Asp.Net и автозаполнением (JQuery)

Question

^ первой очереди: Извините за мой английский = 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 строки) - это то, что дает мне боль ...

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

с помощью:

BAssistance AutoComplete from JÖRN ZAEFFERER .

Asp.Net FrameWork 3.5.

Answer 1

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

Добавить новый «Web Service» в свой проект, я назвал мое «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 
}); 

Для получения дополнительной информации, проверки this article on MSDN.

Answer 2

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