Cómo desarrollar un sistema de paginación en ASP.NET MVC

26
May 2018 16

En entornos empresariales, trabajar con aplicaciones que manejan grandes volúmenes de datos es algo muy habitual. En este escenario de trabajo, realizar consultas sobre una base de datos que devuelvan una gran cantidad de registros, puede causar graves problemas de rendimiento en los servidores Web a la hora de tratar estos datos para ser enviados a los navegadores de los usuarios. Afortunadamente este problema se puede solucionar añadiendo un sistema de paginación de registros a las consultas realizadas sobre la base de datos.

A continuación veremos cómo desarrollar un sistema de paginación de registros en ASP.NET MVC 5, con Entity Framework como medio de acceso al origen de datos y Bootstrap 3.2 para dar formato y estilos a la Vista.

Paginación en ASP.NET MVC y Entity Framework

El modelo de datos

Para realizar este ejemplo, hemos utilizado el modelo de datos (tabla) Customers de la base de datos de pruebas Northwind de Microsoft (scripts disponibles para descargar al final del Post).

    public class Customer
    {
        [Key]
        [StringLength(5)]
        public string CustomerID { get; set; }

        [Required]
        [StringLength(40)]
        public string CompanyName { get; set; }

        [Required]
        [StringLength(30)]
        public string ContactName { get; set; }

        [StringLength(30)]
        public string ContactTitle { get; set; }

        [StringLength(100)]
        public string Address { get; set; }

        [StringLength(15)]
        public string City { get; set; }

        [StringLength(15)]
        public string Region { get; set; }

        [StringLength(10)]
        public string PostalCode { get; set; }

        [Required]
        [StringLength(15)]
        public string Country { get; set; }

        [StringLength(24)]
        public string Phone { get; set; }

        [StringLength(24)]
        public string Fax { get; set; }

        [Required]
        [StringLength(100)]
        [DataType(DataType.EmailAddress)]
        public string Email { get; set; }
    }

Como no es el objetivo de este Post explicar como enlazar Entity Framework a una base de datos, supondremos que ya hemos definido el DbContext de la aplicación con el correspondiente DbSet del modelo de datos Customers.

public class AppDbContext : DbContext
{
   public AppDbContext() : base("DataModelConnectionString")
   {

   }
   public DbSet<Customer> Customers { get; set; }
}

La Clase de paginación

Para poder mantener el estado de la paginación durante las peticiones de consulta a la aplicación, necesitamos implementar una clase auxiliar que nos permita almacenar, tanto los parámetros de paginación cómo los resultados devueltos por la búsqueda.

Esta clase auxiliar de paginación, la definiremos como Clase genérica para que pueda ser utilizada para paginar cualquier tipo de modelo de datos:

    public class PaginadorGenerico<T> where T:class
    {
        public int PaginaActual { get; set; }
        public int RegistrosPorPagina { get; set; }
        public int TotalRegistros { get; set; }
        public int TotalPaginas { get; set; }
        public IEnumerable<T> Resultado { get; set; }
    }

El Controlador

En nuestra aplicación MVC creamos el Controlador CustomersController. A continuación, en la Acción por defecto Index() del Controlador, implementaremos el código para obtener de la base de datos los registros de la tabla Customers.

Hay que tener en cuenta que en un sistema de consultas paginadas, debemos de indicar en todo momento la página de registros que queremos recuperar desde el origen de datos. Esto lo haremos mediante un parámetro de entrada en la Acción Index(int pagina = 1), por defecto recuperamos siempre la primera página de registros.

    public class CustomersController : Controller
    {
        private readonly int _RegistrosPorPagina = 10;

        private AppDbContext _DbContext;        
        private List<Customer> _Customers;
        private PaginadorGenerico<Customer> _PaginadorCustomers;

        // GET: Customers
        public ActionResult Index(int pagina = 1)
        {            
            int _TotalRegistros = 0;
            using (_DbContext = new AppDbContext())
            {
                // Número total de registros de la tabla Customers
                _TotalRegistros = _DbContext.Customers.Count();
                // Obtenemos la 'página de registros' de la tabla Customers
                _Customers = _DbContext.Customers.OrderBy(x => x.ContactName)
                                                 .Skip((pagina - 1) * _RegistrosPorPagina)
                                                 .Take(_RegistrosPorPagina)
                                                 .ToList();
                // Número total de páginas de la tabla Customers
                var _TotalPaginas = (int)Math.Ceiling((double)_TotalRegistros/_RegistrosPorPagina);
               // Instanciamos la 'Clase de paginación' y asignamos los nuevos valores
                _PaginadorCustomers = new PaginadorGenerico<Customer>()
                {
                    RegistrosPorPagina = _RegistrosPorPagina,
                    TotalRegistros = _TotalRegistros,
                    TotalPaginas = _TotalPaginas,
                    PaginaActual = pagina,
                    Resultado = _Customers
                };
                // Enviamos a la Vista la 'Clase de paginación'
                return View(_PaginadorCustomers);
            }            
        }
    }

La Vista

Por último crearemos la Vista (Index.cshtml) asociada a la Acción Index(int pagina = 1) del Controlador Customers. La Vista recibirá como Modelo de datos un objeto de la clase PaginadorGenerico<Customer>, y contendrá una tabla HTML para representar los datos y el paginador de registros.

@model PaginadorGenerico<Customer>
@{
    ViewBag.Title = "Customers";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

@*CÓDIGO PARA LA TABLA DE DATOS*@
<table class="table table-bordered">
    <thead>
        <tr>
            <th>
                Contact Name
            </th>
            <th>
                Company Name
            </th>
            <th>
                Email
            </th>
        </tr>
    </thead>
    @foreach (var item in Model.Resultado)
    {
        <tbody>
            <tr>
                <td>
                    @Html.DisplayFor(modelItem => item.ContactName)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.CompanyName)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.Email)
                </td>
            </tr>
        </tbody>
    }
</table>

@*CÓDIGO PARA EL PAGINADOR DE REGISTROS*@
@if (Model.Resultado.Count() > 0)
{
    <span>
        <strong>@Model.TotalRegistros</strong> registros encontrados
    </span>
    <span>&nbsp;|&nbsp;</span>
    <span>
        Página <strong>@(Model.PaginaActual)</strong> de 
        <strong>@Model.TotalPaginas</strong>
    </span>
    <span>&nbsp;|&nbsp;</span>
}
else
{
    <span>No hay resultados para esta búsqueda</span>
    <span>&nbsp;|&nbsp;</span>
}

@if (Model.PaginaActual > 1)
{
    @Html.ActionLink("<<", "Index", new { pagina = 1 },
                    new { @class = "btn btn-sm btn-default" })
    <span></span>
    @Html.ActionLink("Anterior", "Index", new { pagina = Model.PaginaActual - 1 },
                    new { @class = "btn btn-sm btn-default" })
}
else
{
    @Html.ActionLink("<<", "Index", new { pagina = 1 },
                    new { @class = "btn btn-sm btn-default disabled" })
    <span></span>
    @Html.ActionLink("Anterior", "Index", new { pagina = 1 },
                    new { @class = "btn btn-sm btn-default disabled" })
}
<span></span>
@if (Model.PaginaActual < Model.TotalPaginas)
{
    @Html.ActionLink("Siguiente", "Index", new { pagina = Model.PaginaActual + 1 },
                    new { @class = "btn btn-sm btn-default" })
    <span></span>
    @Html.ActionLink(">>", "Index", new { pagina = Model.TotalPaginas },
                    new { @class = "btn btn-sm btn-default" })
}
else
{
    @Html.ActionLink("Siguiente", "Index", new { pagina = Model.TotalPaginas - 1 },
                    new { @class = "btn btn-sm btn-default disabled" })
    <span></span>
    @Html.ActionLink(">>", "Index", new { pagina = Model.TotalPaginas },
                    new { @class = "btn btn-sm btn-default disabled" })
}