¿Qué es y Cómo funciona?

Este ejemplo muestra una habitual rejilla de datos en MVC 5 sin añadir ningún plugin adicional como MVC - WebGrid o componente externo (Telerik, jqGrid, DataTable, etc.) ni AJAX.

La tabla en Base de Datos contiene 100 registros con los siguientes campos:

• ID (clave, int, autonumerico)
• NOMBRE (nvarchar(50))
• GUID1 (nvarchar(36))
• GUID2 (nvarchar(36))
• GUID3 (nvarchar(36))
• GUID4 (nvarchar(36))
• GUID5 (nvarchar(36))

Se puede seleccionar el numero de registros visibles por página entre varias opciones en el desplegable "Mostrar".

Podemos decidir las columnas que queremos mostrar en la tabla chequeando el desplegable "Columnas visibles".

Los datos se pueden ordenar por cualquier columna de ellas con un click en la cabecera. El siguiente click en la misma columna ordenará inversamente a la anterior ordenación.

Por ultimo los registros están paginados pudiendo navegar a otras páginas por número o "saltando" a la pagina posterior, anterior, última o primera.

 

Teoría

Mostrar datos en una tabla tiene en mi opinión varios puntos mínimos obligatorios:

1. Los datos han de ser paginados y ordenados en BBDD ya sea por ADO.NET o por EF para optimizar el rendimiento de grandes volúmenes de información de forma que la respuesta del servidor a la pagina solo contenga los registros mostrados.
   Realizar estos filtro en cliente supondría devolver a la vista todos los registros de la tabla y si hay un número considerable tendremos problemas de memoria.
2. Posibilidad de mostrar más o menos resultados por página.
3. En cuanto a diseño la tabla debe ser responsiva, con 2 variaciones en dispositivos moviles:
   • Crear overflow en eje x como hace Bootstrap pudiendo opcionalmente mostrar u ocultar columnas.
   • Cambiar maquetación de registros mostrando las propiedades de forma vertical.
4. Si realizamos la carga de registros submitando la pagina todos los parametros se muestran en la ruta pudiendo copiarla como una instántanea del estado de nuestro grid.
   Si realizamos la carga de registros por AJAX debemos recordar que no existirá una modificación en la ruta del navegador por lo que no se podrá guardar un estado del componente ni volver a uno anterior desde el navegador.

 

Configuración y Test

Se ha utilizado Visual Studio Express 2013 para Web y actualmente Visual Comunity 2015.
La programación se ha desarrollado con C#, Razor y acceso a Base de Datos por Entity Framework.

Las tablas mostradas en la aplicación se encuentran en un Microsoft® SQL Server® 2012 y actualmente en SQL de Azure

El alojamiento de las páginas se realizó en https://www.smarterasp.net con el plan .NET ADVANCE y actualmente se han movido a 2 Aplicaciones Web en Azure: una para este proyecto Web MVC y otra para un WCF usada en un ejemplo.

Se ha testeado con exito en diferentes navegadores y sistemas operativos, en pantallas de PC, tabletas y moviles.