Autocompletar TextBox usando Ajax en ASP.Net

| |
Vamos a ver como autocompletar un TextBox con Ajax, para esto usamos un AJAXControlExtender, y vamos a ver que no es tan difícil como puede parecer.

Para esto vamos a usar el AutoCompleteExtender que es parte del Ajax Control Toolkit


Para el que nunca trabajó con Ajax, y mas precisamente con el Ajax Control Toolkit tal vez le pase lo mismo que a mi, al probarlo da una sensación de que todo se simplifica, que todo se vuelve transparente y las cosas funcionan. Cuando empece a trabajar con ASP.Net me sentí casi como programando en un Windows Form, con Ajax me sentí todavía mas así.

Bueno comencemos, en hay que tener siempre el AutoCompleteExtender conectado al TextBox, lo hacemos mediante la propiedad TargetControlID del AutoCompleteExtender.

Contamos con la siguiente tabla en nuestra base de datos:

Tabla "Paises"
Campo "nombre", contiene: "Argentina, Argelia, Sudafrica, Estados Unidos, España"

Como el proceso autocompletado lo vamos a realizar desde el lado del servidor, tenemos que crear un Web Service que nos lo haga.


[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[System.Web.Script.Services.ScriptService]
public class WebService : System.Web.Services.WebService 
{
//String de consulta
 const string selectQuery = "SELECT nombre FROM Paises WHERE nombre LIKE @prefijo";
//Metodo del Web Service que nos va a devolver el listado de paises
    [WebMethod]
    public string[] ObtenerListaDePaises(string prefijo)
    {
        //Array de nombres
        string[] Nombre = null;
        try
        {
            using (SqlConnection sqlCon = new SqlConnection(ConfigurationManager.ConnectionStrings["DatabaseConnectionString1"].ConnectionString))
            {
                sqlCon.Open();                
                using (SqlCommand sqlComd = sqlCon.CreateCommand())
                {
                    sqlComd.CommandType = CommandType.Text;
                    sqlComd.CommandText = selectQuery;
                    sqlComd.Parameters.Add(new SqlParameter("@prefijo", string.Format("{0}%", prefijo)));

                    using (SqlDataAdapter sqlAdpt = new SqlDataAdapter())
                    {
                        sqlAdpt.SelectCommand = sqlComd;

                        using (DataTable table = new DataTable())
                        {
                            sqlAdpt.Fill(table);
                            Nombre = new string[table.Rows.Count];
                            int i = 0;
                            foreach (DataRow rdr in table.Rows)
                            {
                                Nombre[i] = rdr["Country"].ToString().Trim();
                                ++i;
                            }
                        }
                    }
                }
            }
        }

        catch 
        {
            //Manejo de errores
        }

        return Nombre;
    }
   
}


Siguiendo, ahora vamos a trabajar desde el lado del cliente, relacionemos el WebService con el AutoCompleteExtender, y configurarlo para que utilice el método ObtenerListaDePaises, articulandolo con el TextBox.

<asp:scriptmanager runat="server" id="ScriptManager1"><services>
 <asp:servicereference path="AutoComplete.asmx">
</asp:servicereference></services>
</asp:scriptmanager>
<div>
<asp:textbox runat="server" id="txtPais" />
<ajaxtoolkit:autocompleteextender completioninterval="10" enablecaching="true" minimumprefixlength="1" servicemethod="GetCountriesList" servicepath="WebService.asmx" targetcontrolid="txtPais" id="autoComplete1" runat="server">
</ajaxtoolkit:autocompleteextender></div>
</asp:scriptmanager>

Ahora vamos a ejecutar la página y ver los resultados.


Los resultados van a ir apareciendo a medida que el usuario escriba en el TextBox, la informacion llega desde el lado del servidor en forma asíncrona

1 comentarios:

de donde sacas el autocomplete.asmx si tu servicio web se llama webservice.asmx. no entiendo..

Publicar un comentario

Con la tecnología de Blogger.