Buscar en un TreeView con Autocomplete y JQuery

Para que una aplicación web tenga un interfaz de usuario fácil de utilizar y facilitemos su usabilidad no hay más remedio que pasar por un lenguaje script y por eso cada vez que tengo la oportunidad me gusta hacer alguna práctica con JavaScript y en este caso utilizando la librería JQuery que facilita nos facilita mucho esta tarea.

La excusa que utilizo hoy para hacer este ejemplo es una petición en los foros MSDN para hacer una búsqueda de texto en un TreeView y poder seleccionar posteriormente el nodo que coincida con esta selección.

Para esto voy a utilizar un plugin de Jquery que provee a los inputs la extensión de mostrar un autoComplete donde se mostraran los textos de los nodos que coincidan con el texto introducido en el input.

Para las referencias a las librerías Jquery utilizare CDN para aprovechar sus beneficios y no tener obligatoriamente las librerías en nuestro proyecto. Sigue leyendo

Anuncio publicitario

GridView Custom Edit

Este año ha sido mucho más productivo de lo que me esperaba y el que comienza parece que me va a deparar nuevos retos personales que espero sean lo más positivos posible.

Para empezar con buen pie y no cejar en mis artículos técnicos, hoy haré un nuevo ejemplo práctico para personalizar un control GridView, permitir editar sus elementos con JavaScript y enviar al servidor de manera asíncrona solo las modificaciones realizadas.

Realmente cada vez existen más controles que nos permiten mejorar la experiencia de usuario y potencian usabilidad de los usuarios. Pero con un poco de tiempo es posible dar este toque a los controles con los que trabajamos cotidianamente.

Para comenzar esta práctica crearemos un nuevo proyecto web y cargaremos una grid con la base de datos NorthWind que no puede faltar en cualquier ejemplo que utilice una base de datos SQL.

Para poder editar la grid lo que tenemos que hacer primero es marcar las celdas que se podrán editar con una propiedad llamada «editable»,  guardar el nombre del registro para tenerlo a mano a la hora de guardar las modificaciones y agregar el evento onmousedown para que llame a la función javaScript de edición tanto en IE como en Firefox. Sigue leyendo

¿Existe la columna con DataReader?

En mi empresa desde un principio hemos utilizado una herramienta propia para generar la capa de lógica de negocios, adaptada  al 100% a nuestras necesidades  y que ha ido creciendo con el tiempo. Eso nos ha beneficiado en tener controlado en todo momento nuestros objetos de negocio y nos ha evitado tener que hacer un salto obligatorio para utilizar alguno de los ORM que existen en el mercado, como puede ser: Entity Framework, NHibernate, etc.

Nuestra capa de acceso a datos “DAL” encapsula toda la lógica de conexiones a datos independientemente del proveedor y hay una de las funciones que retorna un lector de datos para poder personalizar la lectura de los datos desde la capa de lógica de Negocios.

/// <summary>
/// Ejecuta el comando creado y retorna el lector.
/// </summary>
/// <returns>El resultado de la consulta.</returns>
public DbDataReader EjecutarConsulta(string cmd, CommandType tipo)
{
   this.comando.CommandText = cmd;
   this.comando.CommandType = tipo;
   this.Conectar();
   return this.comando.ExecuteReader();
}

Eso facilita la carga del objeto de negocio y optimiza la lectura.

DbDataReader reader = null;
Using (Dal dal = new Dal())
{
  string command = "select id, nombre, descripcion from productos";
  reader = dal.EjecutarConsulta(command, CommandType.Text);
  while (reader.Read())
  {
    ...

Pero uno de los problemas habituales que nos encontraremos con el objeto DataReader es que si no nos gusta leer los datos por posición, como es mi caso y preferimos controlar la columna que deseamos leer. Nos podemos encontrar con el horrible error que no se encuentra la columna que estamos intentando leer.

Ya podemos intentar validar si el objeto es null, pero no funciona:

O si el dato está vacio:

Para poder validar si la columna que estamos consultando existe podemos tener una función en nuestro DAL que valide esta situación utilizando el propio esquena de la tabla:

public bool ValidarColumna( DbDataReader reader, string nombreColumna)
{
   reader.GetSchemaTable().DefaultView.RowFilter =
     "ColumnName= '"  + nombreColumna + "'";

   return (reader.GetSchemaTable().DefaultView.Count > 0);
}

Finalmente cuando queramos hacer la consulta de los datos utilizaremos el validador para evitar errores no controlados en el acceso a datos.

using (Dal dal = new Dal())
{
   string command = @"select id, nombre, descripcion
       from productos";

    reader = dal.EjecutarConsulta(command, CommandType.Text);

    while (reader.Read())
    {
      ProductoData produc = new ProductoData();
      produc.ID = (dal.ValidarColumna(reader, "ID")
        && reader["ID"] != DBNull.Value)?(int)reader["ID"]:0;

      produc.Nombre = (dal.ValidarColumna(reader, "Nombre")
        && reader["Nombre"] != DBNull.Value)
        ?reader["Nombre"].ToString():string.Empty;

      listaProductos.Add(produc);
    }
}

Es una forma un poco rebuscada, pero no conozco ninguna otra forma de verificar esta información.

Espero que os sea útil.