El objetivo
de este post es preparar un ejemplo sobre un tema que es planteado muy frecuentemente en los Foros
de MSDN, como realizar un Autocomplete contra una base
de datos. Qué requerimos? Antes
de poder realizar un Autocomplete debemos tener en cuenta los elementos principales que requerimos para poder hacerlo funcionar, descritos
de la siguiente manera: 1. Textbox: Nuestro grandioso amigo Textbox, que será donde el usuario ingresará los datos a buscar. 2. Un Webservice: que contendrá el método que se conectara a
la base
de datos y devolverá una lista con
la información encontrada. 3. Ajax Autocomplete Extender: este es por decirlo así, el elemento más importante. Nos servirá como medio
de enlace entre el webservice que expone el método y el textbox recuperando y mostrando los datos en forma
de lista desplegable.
La implementación Si bien parecierá complicado, crear un autocomplete extender es bastante sencillo. Empezaremos creando un nuevo sitio asp.net, en este sitio agregaremos un textbox y dos controles muy importantes
de Ajax el ToolkitScriptManager para controlar el rende rizado
de los script
de ajax y el AutocompleteExtender que, como mencione anteriormente, será el medio
de enlace. Antes
de mostrar como quedará el código
de lo anterior, explicaré algunas propiedades del AutocompleteExtender para que se entienda
de mejor manera: 1. El ServicePath: contiene
la ruta relativa al webservice que utilizaremos. 2. MinimumPrefixLength: se refiere al número
de caracteres que deben ser digitados antes
de iniciar
la búsqueda. 3. ServiceMethod: el nombre del metodo
de nuestro webservice que se encargará
de devolver los datos. 4. EnableCaching: para mantener en cache los datos consultados, obteniendo mayor velocidad. 5. TargetControlID: una
de las propiedades más importantes, acá se coloca el nombre del textbox al cual se unirá el Autocomplete 6. CompletionInterval: tiempo que debe transcurrir antes
de iniciar con el trabajo
de los datos. Una vez, explicadas las propiedades básicas, veamos como queda implementada
la primer parte
de nuestro autocomplete: <form id="form1" runat="server">
<div>
<asp:ToolkitScriptManager ID="manager" runat="server" />
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<asp:AutoCompleteExtender ID="AutoCompleteExtender1" runat="server" ServicePath="WebService.asmx"
MinimumPrefixLength="1" ServiceMethod="PersonasInfo " EnableCaching="true" TargetControlID="TextBox1"
UseContextKey="True" CompletionSetCount="10" CompletionInterval="0">
</asp:AutoCompleteExtender>
</div>
</form>
Ahora que nuestro código html está completo, es hora
de trabajar directamente con nuestro webservice, este deberá contener un método que devuelva una lista o arreglo
de datos, los cuales por supuesto, serán traídos desde
la base
de datos.
Antes
de implementar este método, debemos asegurarnos
de que nuestra clase del webservice tiene habilitados los espacios para ser utilizada
[System.Web.Script.Services.ScriptService()]
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
public class WebService : System.Web.Services.WebService
{}
Ahora si, nuestro metodo principal
[WebMethod()]
[System.Web.Script.Services.ScriptMethod()]
public string[] PersonasInfo(string prefixText, int count)
{
string connstring = ConfigurationManager.ConnectionStrings["LocalSqlServer"].ConnectionString;
using (SqlConnection conn = new SqlConnection(connstring))
{
SqlCommand comando = new SqlCommand("select nombre from personas where nombre LIKE '%' + @param + '%' ", conn);
comando.Parameters.AddWithValue("@param", prefixText);
SqlDataReader dr = default(SqlDataReader);
comando.Connection.Open();
dr = comando.ExecuteReader();
List<string> items = new List<string>();
while (dr.Read())
{
items.Add(dr["nombre"].ToString());
}
comando.Connection.Close();
return items.ToArray();
}
}
Del método anterior no explicaré en profundidad, pues es bastante sencillo. Una consulta a
la base
de datos utilizando un datareader y devolviendo los datos en una lista como arreglo.
Lo más importante serían las 2 primeras líneas [WebMethod()] y el [ScriptMethod()] las cuales habilitan nuestro método para poder ser accedido y utilizado.
Por último, el código
de ejemplo en C# (VB Autcomplete):
