En una aplicación web se desea realizar operaciones típicas sobre las tablas de una base de datos. Las operaciones de CRUD (del inglés Create, Retrieve, Update, Delete), permiten Crear, Obtener, Actualizar y Borrar datos de una tabla de una base de datos. Visual Studio.Net propone el control web DataGrid, que presenta algunas deficiencias de usabilidad, y validación en el lado del cliente.

Existen controles web comerciales que mejoran las prestaciones de DataGrid como AxpDataGrid, (cabe decir que el autor del documento no tiene ningún vínculo con la empresa que desarrolla este producto). AxpDataGrid es un control web para “CRUDear”, y puede ser embebido dentro de una aplicación web en ASP.Net. El presente documento ilustra como embeber AxpDataGrid en un módulo de DotnetNuke.

Dotnetnuke es un portal web en ASP.Net, gratuito, con código fuente abierto (http://www.dotnetnuke.com), el cual permite autenticar usuarios, otorgar permisos para ver/manipular los contenidos, como pueden ser descargas, html, avisos, álbumes de fotos, blogs etc. En fin, es un gestor de contenidos inspirado en phpNuke.

El objetivo a la hora de usar un AxpDataGrid y DotNetNuke es que los desarrolladores no escriban directamente el código SQL para “CRUDear” sino que permitan a los usuarios avanzados configurar el acceso a sus datos al resto de usuarios del portal.

Por tanto trabajaremos con dos perspectivas:

• En modo usuario, diseñar una página para Usar el control web AxpDataGrid.
• En modo administrador, diseñar una página para
  • Configurar la tabla a consultar
  • Escoger los campos se han de visualizar
  • Establecer permisos para editar/añadir/borrar elementos de la tabla
  • El estilo gráfico
  •  y otros detalles…

Un ejemplo en web se puede ver en http://vila.2y.net/dnn/Default.aspx?tabid=125

Modo usuario: utilizando AxpDataGrid en DotNetNuke

La Ilustración 1 nos muestra dos instancias de AxpDataGrid en una página de DotNetNuke. La tabla izquierda deja añadir datos, y la derecha no lo permite (ver botón Add). Como se observa en la Ilustración 1 hay un botón de Excel con el que se puede exportar el contenido de las tablas a Excel.

Ilustración 1 Vista en modo usuario de dos instancias de AxpDataGrid insertadas en una página de DotNetNuke

Modo “usuario avanzado”: Configurando el visor de datos

Al entrar el usuario con privilegios administrativos para este módulo, se puede configurar el comportamiento de AxpDataGrid. En esta sección es donde realmente se programa la configuración. A continuación se presentan la descripción de los controles para realizar dicha configuración.

La Ilustración 2 muestra una página de DotNetNuke conectado con una cuenta de administrador.

Ilustración  2 Modo usuario avanzado, accediendo a la configuración del componente AxpDataGrid

Al pasar el puntero del ratón sobre los lápices aparece un menú (a la izquierda de la Ilustración 2), al elegir “Ver opciones” el portal redirige a la página de configuración del módulo visualizador de AxpDataGrid. Los controles para configurar las principales características de este visualizador de datos son:

• Cuadro de texto “Consulta SQL”, para escribir la consulta SQL que extrae los datos de la tabla.
• Casilla de verificación “Permitir Actualizar”, para activar/desactivar el permiso de actualizar registros. En caso de permitirlo ha de especificarse:
  • Su correspondiente sentencia SQL
  • La clave primaria de esta tabla
• Casilla de Verificación “Permitir Borrar” para activar/desactivar el permiso de eliminación registros, En caso de permitirlo ha de especificarse
  • Su correspondiente sentencia SQL
• Casilla de Verificación “Insertar registros”, para activar/desactivar el permiso de inserción de registros, depende de que esté activada la actualización de registros.
• Casilla de Verificación “Edición directa”: El control Web AxpDataGrid permite seleccionar un registro y pasar de la vista en formato tabla a la vista de un solo registro. La casilla de verificación “Edición Directa” permite establecer si al hacer clic en un registro pasamos a modo visualización completa del registro (figura derecha de la Ilustración 3 ), o a edición directa del mismo (figura izquierda de la Ilustración 3 )
  
   

Ilustración 3 Modos de edición indirecta y directa

• Definir el estilo gráfico por medio de una lista desplegable con diferentes estilos (asociado a una hoja de estilo CSS ya predefinida) y su correspondiente conjunto de imágenes para los botones.
• Casilla de Verificación “Especificar Registros por página” para activar/desactivar el permiso del usuario para escoger la cantidad máxima de registros que se deben visualizar por página. (AxpDataGrid permite paginar la visualización de los registros de una tabla)
• Cuadro de texto “Columnas con fecha”, si existe alguna columna o propiedad de la tabla de tipo datetime y permitimos editarla, al seleccionar un registro y pasar a modo edición directa, aparecerá un icono para lanzar un calendario al lado de cada propiedad registro que indiquemos en este cuadro de texto.
• Enlace de datos: Cuando en nuestra tabla deseamos visualizar un campo de otra tabla de la cual tenemos un campo que referencia su clave ajena, podemos establecerlo rellenando los campos:
  • Clave local.
  • Tabla Ajena.
  • Clave Ajena.
  • Titulo o campo a visualizar de la tabla ajena.
  • Ordenar la tabla ajena por.
• Una vez rellenamos estos campos han de guardarse en la lista de enlace de datos. Que permite Agregar , Obtener y eliminar los campos citados en el punto anterior

Ilustración 4 Configuración del módulo visualizador de AxpDataGrid en DotNetNuke

Conclusión

El uso de visualizadores de datos (como AxpDataGrid) integrado en portales de gestión de contenidos ASP.Net (como DotNetNuke) facilita la adaptación a los constantes cambios de presentación de requerimientos de presentación de datos en el entorno intranet de una empresa.

La responsabilidad del contenido de las tablas recae más sobre el administrador de los contenidos, en lugar de los desarrolladores debido a que estos últimos pueden implementar visualizaciones más flexibles apoyándose en AxpDataGrid.

Por un bajo coste se puede obtener un portal funcional y elegante para hacer una gran parte de las tareas rutinarias de edición modificación inserción y borrado de datos.

Fichero con el código de ejemplo: Vila_AxpDataGridDotNetNuke.zip - 318 KB (actualizado)