Paginación con Nuget XPagedList

¿Qué es XPagedList?

XPagedList es un Nuget de NET Core que se utiliza para manipular un conjunto de objetos de una List y mostrarlos de forma paginada en una vista HTML.

Su principal ventaja es que, si los datos a tratar provienen de una base de datos, no requiere el uso de procedimientos almacenados ni vistas en nuestro proveedor de datos.

De hecho, la paginación se aplica directamente al objeto List de cualquier clase (strings, ints, objetos…) independientemente de su procedencia (una base de datos o creado manualmente).

Ejemplo práctico

Con esto, consideremos el siguiente ejemplo: estamos creando una aplicación web ASP NET Core de una tienda. Nuestra tarea es mostrar en la pagina principal una colección de productos destacados que recibimos de una base de datos SQL Server.

Una vez instalado Linq, configurado el Middleware, haber creado nuestro Modelo/Clase Producto, creado nuestro Context y creado nuestro repositorio para recibir todos los datos, nos damos cuenta de que son 200 productos. A continuación nos piden que se muestre una imagen y unos pocos detalles en una tabla de cada uno, pero a la hora de visualizar el resultado de nuestro trabajo, vemos una gigantesca tabla. Nuestro objetivo será mostrar los 200 productos paginándolos de 10 en 10

Lo primero que haremos será instalar los Nugets:

Una vez instalados, haremos sus respectivos using en ViewImports de forma que si en futuro tenemos que paginar más elementos, podremos reutilizar estos Nugets.

Ahora vamos a la vista donde tendremos en nuestro @model un List<Producto>.Lo primero que haremos será cambiar ese List por un PagedList.

Una vez hecho esto, vamos a irnos a la parte del código donde queremos poner la numeración de paginas de nuestra colección e incluiremos el siguiente elemento Razor:

En este código tendremos en cuenta los siguientes parámetros:

• page: el numero de pagina que pasaremos por el GET de nuestro Controller
• Model: Que corresponde a nuestra List
• PagedListRenderOptions: Objeto que nos permitirá agregar utilidades a la numeración de nuestra pagina, clases de css, estilos, el nuemro maximo de paginas a mostrar…

Añadiremos, por ejemplo, las siguientes opciones:

Por último, al haber puesto en la vista @model PagedList, debemos dirigirnos a nuestro controller donde obtenemos esta List de productos (ya sea de una base de datos o, como en este ejemplo, lo crearemos con bucle) y en lugar de devolver directamente la List, la convertiremos y devolveremos como paged List a la vista utilizando el metodo ToPagedList() de X.PagedList.

A este método le pasaremos :

• Una variable page que recibiremos en el propio IActionResult como parámetro que acepte nulos, de forma que pondremos una condición. Si «page» es nulo, «page» será 1 (si no recibimos pagina, mostraremos la pagina 1 de la lista) como «page ?? 1»
• El numero de elementos que se mostrarán en cada pagina (en este caso, como lo queremos de 10 en 10, le pasamos 10)

Teniendo nuestro código Razor y el Controller listo, la vista renderizará un <ul><li> para la numeración y la tabla mostrará los productos de 10 en 10

De esta forma, añadiendo un par de líneas de código a la vista y al Controller, tendremos una paginación totalmente funcional.

Aún así no es recomendable usar este tipo de paginación con una cantidad excesivamente grande de registros, ya que a diferencia de la paginación gestionada por la propia base de datos (lo más común), la paginación con este Nuget no evita que cada vez que cambiemos de pagina se vuelva cargar el controlador con absolutamente todos los registros que posteriormente se dividen, con lo cual el rendimiento no es tan efectivo a largo plazo.

Conclusión:

Teniendo en cuenta esto, X.PagedList es una solución sencilla a la hora de programar, pero quizás algo corta en rendimiento tratando enormes cantidades de datos a la larga.

Autor/a: Raúl Castro de la Torre

Curso: Desarrollo Web Full Stack, MultiCloud y Multiplataforma

Centro: Tajamar

Año académico: 2020-2021

Otros datos de interés:

Enlace a GitHub: https://github.com/karba98/Tajamar-Wordpress/tree/main/paginacion%20xpagedlist/PaginacionXpagedList

LinkedIn: https://www.linkedin.com/in/raul-castro-de-la-torre-861508103