[AutoCompleteExtender] Mejora la UI en nuestra App

H@la.

Quisiera hablar del componente AutoCompleteExtender del Control Tool Kit para Asp.Net Ajax.

Este componente ayuda mucho a la UI, para no sobrecargar la interfaz y hacerla mas agradable para el cliente, Imaginense el siguiente ecenario, tienen una tabla donde se almacenan codigos, los cuales tienes que enlazarlo con un control para que el usuario pueda ver y escojer dicho codigo. No parece nada del otro mundo, pero que pasa si la descripcion del cosigo es excesavamente larga y cuando lo enlazas al control Upsss, desborda el formulario y ya realmente la UI no se ve muy bien.

Pues bien lo que podriamos hacer es usar AutoCompleteExtender y bien enlazarlo con el codigo o con la descripcion, realmente como desees.

Primero miremos como quedaria el web service para que a medida que yo digite aparesca las concordancias de la BD con ese campo. El metodo quedaria haci.

   1: public string[] GetCie(string prefixText, int count)
   2:    {
   3:        List<string> items = new List<string>(count);
   4:        DataSet ds = new DataSet();
   5:  
   6:        string connectionString = "Data Source=(local);Initial Catalog=XXXX;Integrated Security=SSPI;";
   7:        using (SqlConnection connection = new SqlConnection(connectionString))
   8:        {
   9:            string sql = "SELECT CIE_Codigo FROM Tb_CIE10 WHERE CIE_Codigo LIKE '" + prefixText + "%'";
  10:            SqlDataAdapter adapter = new SqlDataAdapter();
  11:            adapter.SelectCommand = new SqlCommand(sql, connection);
  12:            adapter.Fill(ds);
  13:        }
  14:  
  15:        foreach (DataRow dr in ds.Tables[0].Rows)
  16:        {
  17:            items.Add(dr["CIE_Codigo"].ToString());
  18:        }
  19:  
  20:        return items.ToArray();
  21:    }

no olviden colocar esto al comenzar el web service,

   1: [System.Web.Script.Services.ScriptService]

Segidamente en el control de AutoCompleteExtender colocomos el metodo  que usara y le hacignamos el control al cual le voy ah pasar la funcionalidad de ajax.

AutoCompleteExtender

Basicamente de este modo nos podemos quitar varios dolores de cabeza, tratando de cuadrar la UI.

S@ludos.

Romny

Publicado por

Romny Duarte

Ingeniero de sistemas con experiencia en desarrollo web y móvil, geek, amante de la lectura y de la tecnología.

3 comentarios sobre “[AutoCompleteExtender] Mejora la UI en nuestra App”

  1. hola Rommy!

    Recuerda que siempre es mejor usar una consulta parametrizada:
    «SELECT … WHERE CIE_Codigo LIKE @prefix + ‘%'», y en el comando agregar un SqlParameter. Sobre todo en los parametros con fecha se te puede complicar mucho si no lo haces así, y también esta el lado de la seguridad.

    Y por la parte de Ado.net, creo que hubiera sido suficiente con un reader, y no un dataset/adapter. La serie de Carlos Walzer es excelente para aclarar estos temas: http://geeks.ms/blogs/sergiotarrillo/archive/2007/11/15/50355.aspx.

    Si por la rapidez de la entrada dejaste estos temas, para aclarar a los lectores. Y en cuanto al control es recontra útil, y te evita estar haciendo marcianadas, con los famosos controles de búsquedas de maestros.

    Saludos,

  2. Bueno si, Sergio, me disculpo por que como tu lo dices lo hice de forma rapida y como sabes lo rapido no implica que este bien. Aunque funicone!

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *