Paginación en MVC

Como todos sabemos, la paginación de elementos es una herramienta muy útil de mostrar elementos sin necesidad de tener que enseñar todos los registros de nuestra base de datos. Por eso mismo en este Post veremos dos formas de hacerlo .

Lo primero de todo, necesitamos una base de datos en la cual tengamos los registros que queramos mostrar.

1ª Forma Vista

La primera forma la haremos con una vista de SqlServer. Para ello necesitamos crear nuestra vista y comprobar que tiene datos ya que sin ellos nuestra paginación no funcionará

create view VistaJugadores as
select * from (select cast(ROW_NUMBER()over (order by idjugador) as int ) as posicion,
IdJugador,Nombre from jugadores where idjugador>0) consulta
go

El segundo paso será crearnos el modelo de nuestra vista con los campos que necesitemos, en mi caso solo necesitaré la posición, el Id y el nombre

[Table("VistaJugadores")]
    public class VistaJugador
    {
        [Key]
        public int Posicion { get; set; }
        public int IdJugador { get; set; }
        public String Nombre { get; set; }
    }

Una vez hecho esto, crearemos nuestro context y nuestro repository para hacer el acceso a los datos desde el controller y hacer la conexion total entre ellos mediante inyección de dependencias.

public List<VistaJugador> PaginarJugadoresVista(int posicion)
        {
            var consulta = from datos in this.context.VistaJugador where  (datos.Posicion >= posicion && datos.Posicion < (posicion + 4)) select datos;
            return consulta.ToList(); 
        }

Una vez creado nuestro metodo, solo nos queda llamarlo desde el controller pasandole la página que queremos mostrar.

En cuanto al dibujo, la elección es libre, lo unico que es necesario es una forma de poder generar los enlaces a las paginas que en mi caso lo he hecho sacando el numero de campos que hay en la base de datos de la siguiente forma

int registros =int.Parse(ViewData["registros"].ToString());
    int paginas = (int)Math.Ceiling((double)registros / 4);

<p>
    @for(int i = 1; i <= paginas; i++)
    {
        <a asp-controller="Jugadores" asp-action="PaginarVista" asp-route-pagina="@i">@i</a>
    }

</p>

2ª Forma Linq

La segunda forma, a mi parecer mas sencilla y accesible, es mediante los métodos Skip y Take.

Como en el anterior, tenemos que asegurarnos de que tenemos datos en la base de datos. Pero en este, lo haremos directamente sobre la propia base de datos.

Necesitaremos crear el model de la tabla, el DbSet del context y nuestros métodos en el repositorio y también un helper. En mi caso lo he llamado Paginador para que nos ayude con la paginación independientemente de si le pasamos un Enumerable o un Queueable

public static class Paginador
        {
            public static IEnumerable<T> Page<T>(this IEnumerable<T> en, int pageSize, int page)
            {
                return en.Skip(page * pageSize).Take(pageSize);
            }
            public static IQueryable<T> Page<T>(this IQueryable<T> en, int pageSize, int page)
            {
                return en.Skip(page * pageSize).Take(pageSize);
            }
        }

Todo lo que haremos será llamar al helper desde el repositorio de la siguiente forma. Pasándole la pagina a la que queremos ir y el numero de elementos por página. No olvidéis hacer el import al Helper y poner este como public y static

public List<Jugador> PaginarJugadoresLinq(int pagina)
        {
            List <Jugador> jugadores= this.context.Jugadores.Page(4,pagina).ToList();
            return jugadores;
        }

Una vez en el Controller, este lo trataremos de forma diferente ya que a diferencia del anterior, este partirá desde 0 por lo que nuestro valor mínimo es 0 y no 1.

public IActionResult PaginarLinq(int? pagina)
        {
            if (pagina == null)
            {
                pagina = 1;
            }
            ViewData["registros"] = this.repo.GetJugadores().Count;
            return View(this.repo.PaginarJugadoresLinq(pagina.Value-1));
        }

Y como en el caso anterior, el dibujo puede ser cualquiera, lo único que necesitaremos será poder generar las paginas.

Autor: Javier López Collado
Curso: Desarrollo Web Full Stack, MultiCloud y Multiplataforma
Centro: Tajamar
Año Académico:2020-2021
Enlace a GitHub: Github