Paginación en ASP.NET

Es típico que en algún momento quieras mostrar los registros guardados en una base de datos al cliente de la aplicación. Pero, ¿qué pasa cuando estos registros son demasiados para ser mostrados de una sola vez? Muchos problemas pueden ocurrir si intentas mostrar demasiados registros de una vez:

- Consumir mucho ancho de banda de manera innecesaria
- El cliente tendrá que esperar mucho más tiempo para obtener los resultados de su consulta
- Si el cliente está viendo la página desde su smartphone, es posible que este se ponga bastante lento
- El cliente se puede sentir abrumado por tanta información cuando, probablemente, sólo quería verificar un dato pequeño

Para solucionar este problema recurrimos a la fragmentación de los resultados de la consulta, o paginación, en una sola palabra. Paginación es dividir en páginas los resultados de una consulta. Es lo mismo que ves en el buscador de Google cuando haces una búsqueda, ellos dividen el resultado en páginas si la consulta devuelve un número de datos bastante elevado.

En este artículo implementaremos la paginación de dos formas: con ADO.NET y con Entity Framework. Usaremos SQL Server como motor de bases de datos. Pero descuida, aún si no programas en c#/vb.net ni usas ASP.NET/Entity Framework, le puedes sacar provecho al código de este artículo (o al menos a su lógica) y hacer paginación en php y mysql, por ejemplo. Solo es cuestión de ver los aspectos claves del código y aplicarlos a tu entorno.

Antes que nada, necesitamos una tabla de una base de datos con muchos registros para paginar el resultado de su consulta. Si no tienes una tabla con muchos registros (con 50 basta para nuestros propósitos) usa este script para crear una tabla e insertarle 100 valores:


Pasemos ahora a la aplicación web. Necesitamos dos controles: uno en el cual mostraremos los datos y el otro en el que mostraremos las páginas en las que dividimos los datos fragmentados. Para esto usaremos un GridView y un Repeater, respectivamente.


Para resaltar la página utilizaremos código CSS bastante complejo:

  .PaginaSeleccionada{
            color: red;
        }

Ahora, veamos el code-behind. Nota que he incluido dos implementaciones para llenar los registros del GridView, una con SQL Server y otra con Entity Framework. Además, en la implementación de SQL Server, incluí dos queries (consultas): una para SQL Server 2012 y otra para versiones anteriores de SQL Server. Puedes borrar la implementación que no te interese (coloco el link del código y no el código en sí por ser muy largo):

Code-Behind Paginación

Si hiciste todo bien, deberías tener una página similar a la siguiente (quizás con más diseño):

Y eso es todo, amigos. Es bastante sencillo, realmente. Aunque es importante notar que el código del code-behind necesita refactorización, pero lo hice simple porque el propósito es que se entienda. Si tienes algún problema implementando la paginación, no dudes en preguntar.

Hasta la próxima :)