En el desarrollo de aplicaciones web, es común lidiar con grandes volúmenes de datos. La paginación es una técnica útil que permite dividir los datos en partes más pequeñas y manejables. En esta entrada del blog, exploraremos cómo implementar la paginación en una vista que muestra un listado de videojuegos utilizando X.PagedList en una aplicación ASP.NET .Framework MVC5 con Entity Framework.
X.PagedList es una biblioteca en .NET que se utiliza para la paginación de datos en aplicaciones web, especialmente en ASP.NET MVC. Su propósito principal es 'dividir' grandes conjuntos de datos en páginas más pequeñas, facilitando la navegación y el rendimiento de las aplicaciones.
Existen dos versiones populares de esta biblioteca actualmente:
- PagedList.Mvc (Más antigua, ya no mantenida oficialmente)
- X.PagedList (Versión más moderna y recomendada)
Funciona tanto para .NET Framework como para .NET Core y .NET 5+.
Compatibilidad:
- .NET Framework (4.0 en adelante)
- .NET Core (2.0 en adelante)
- .NET 5/6/7+
Requisitos Previos
Antes de comenzar, vamos a aclarar un poco el entorno en el que vamos a trabajar.
Podes seguir esta misma guía para un proyecto en el cual ya estés trabajando o podes hacerlo con el CRUD que te dejo en el siguiente enlace de Github:
Vas a necesitar tener la biblioteca X.PagedList.Mvc instalada en tu proyecto. Más adelante vamos a ver como instalarla por línea de comandos.Para poder ver los resultados necesitamos cualquier tipo de lista o datos que tenga varios registros, al menos unos 10. Esta lista puede venir de alguna base de datos que tengas o podés crear una en memoria, queda a tu criterio.
En el repositorio vas a encontrar un script con una base de datos para ejecutar con el SSMS de Microsoft o cualquier base de datos que estés usando, eso sí en caso de utilizar otra que no sea SQL Server tenes que encargarte de adaptar la cadena de conexión y demás detalles necesarios para la base de datos.
Nota: También revisar el Data Source en el connectionStrings del Web.config del proyecto en caso de notar algún problema en la comunicación con el servidor SQL. De paso hago acuerdo de que hay una guía en este blog sobre Entity Framework donde se habla un poco más al detalle de todo esto.
Objetivo
El resultado final, será lograr que esta vista:
Luzca de esta otra manera:
Así que manos a la obra.
Instalando X.PagedList.Mvc
La versión más reciente de X.PagedList es la 10.0.x, pero en este caso utilizaremos la versión 7.0.0, ya que las versiones más recientes no son compatibles con .NET Framework 4.6, que es la base de nuestro proyecto. Es importante que tengas esto en cuenta si estás trabajando con un repositorio propio, ya que la compatibilidad puede variar según la versión de .NET que estés utilizando.
En este blog, opto por trabajar con versiones anteriores de .NET Framework porque son las que suelen enseñarse en muchas academias y todavía están ampliamente presentes en diversas empresas. Esto te va a permitir aprender sobre tecnologías que siguen vigentes en el ámbito laboral y que podrías encontrarte en proyectos reales.
Vamos a proceder a instalar el paquete NuGet X.PagedList.Mvc por lo cual vamos a abrir la consola de Administrador de paquetes NuGet haciendo click en Herramientas ➔ Administrador de paquetes NuGet ➔ Consola del Administrador de paquetes
Asegurate de tener seleccionado el proyecto destino en la pestaña 'Proyecto predeterminado'. El proyecto tiene que ser el sitio el cual querés aplicar el paginado.
El comando es el siguiente:
Install-Package X.PagedList.Mvc -Version 7.0.0
Si todo finalizó correctamente deberías de ver un mensaje de éxito con el tiempo transcurrido de la instalación.
Modificando el Controlador
Para poder utilizar las prestaciones de esta biblioteca necesitamos primero importarla con el using correspondiente:
using X.PagedList;
// Para indicar la cantidad de elementos por página
private const int PageSize = 8;
// Listado de Juegos
public ActionResult Index(string _nombreJuego, string _filtroActual, int? page)
{
try
{
// Si page tiene un valor (!= null), asigna su valor a pageNumber.
// Si page es null, asigna 1 a pageNumber (para mostrar la primera página).
int pageNumber = page ?? 1;
// Si hay un filtro, obliga a que la búsqueda empiece en la primera página
// cuando el usuario filtra por nombre.
if (!string.IsNullOrEmpty(_nombreJuego))
{
page = 1;
}
else
{
_nombreJuego = _filtroActual;
}
// Salvamos el filtro actual para no perderlo al cambiar de pag.
ViewBag.FiltroActual = _nombreJuego;
// Definimos la consulta para luego filtrar la lista si es necesario
IQueryable<Models.Juegos> juegos =
from j in db.Juegos
select j;
// Si el usuario filtró por algún juego, filtramos
if (!string.IsNullOrEmpty(_nombreJuego))
{
juegos = juegos.Where(j => j.Nombre.ToLower().StartsWith(_nombreJuego.ToLower()));
}
// X.PagedList usa Skip() y Take() para la paginación, y en Entity Framework, Skip() solo se puede usar
// en una consulta ordenada (OrderBy() debe estar presente antes de Skip()).
juegos = juegos.OrderBy(j => j.Nombre);
return View(juegos.ToPagedList(pageNumber, PageSize));
}
catch (Exception ex)
{
return View("Error", new HandleErrorInfo(ex, nameof(CRUDController), nameof(Index)));
}
}- Se usa ToPagedList(pageNumber, pageSize) para convertir la consulta en una lista paginada.
- page es el número de página recibido como parámetro de la URL de la vista.
- pageSize define cuántos registros se mostrarán por página.
- pageNumber usa page ?? 1 para asegurarse de que, si no se recibe un número de página, se muestre la primera página.
Modificando la Vista
Vamos a navegar hasta la vista en donde se encuentra nuestro listado y vamos a agregar el modelo y el using correspondiente para trabajar con la lista paginada:
<!-- Agregamos el using y definimos el modelo para la entidad -->
@using X.PagedList.Mvc
@model X.PagedList.IPagedList<SitioMVC.Models.Juegos>Para no perder la posibilidad de filtrar por juego, tenemos que preservar el valor del filtro mediante un ViewBag que vamos a declarar en el Action del contenedor de paginación:
<!-- Control de paginación -->
<div class="d-flex justify-content-between align-items-center mt-3 fw-semibold p-2">
<div>
Page @(Model.PageCount < Model.PageNumber ? 0 : Model.PageNumber) of @Model.PageCount
</div>
<div class="pagination-container">
@Html.PagedListPager(Model, page => Url.Action("Index", new { page, _nombreJuego = ViewBag.FiltroActual }))
</div>
</div>PagedListPager crea los enlaces de paginación y cada vez que el usuario hace clic en una página, se llama a Url.Action("Index", new { page, _nombreJuego = ViewBag.FiltroActual }), que genera una URL con los parámetros adecuados.
ViewBag.FiltroActual mantiene el filtro aplicado, de modo que cuando se navega entre páginas, la búsqueda se sigue filtrando por el nombre del juego.
Ejemplo de URL generada:
/CRUD/Index?page=2&_nombreJuego=Zelda
Si no se incluyera _nombreJuego, al cambiar de página, la búsqueda se resetearía y se mostrarían todos los juegos.
Si tenés más de un filtro, tenés que guardarlos en ViewBag tal cual lo hicimos con _nombreJuego.
Recordá que este proyecto está público en Github y podes descargartelo con el siguiente comando:
Si te aportó algo de valor y querés, podes darme un follow en mi perfil de Github para colaborar en que pueda llegar a más personas.
Hasta la próxima entrada.