Paginação de dados no ASP.NET MVC com PagedList
Neste exemplo você verá como implementar paginação de registros em aplicações web com o ASP.NET MVC, utilizando para isso a biblioteca PagedList, que também já cria os controles de navegação com o Bootstrap.
Projeto já adicionado aos favoritos. Clique aqui para ver todos seus favoritos
Obrigado pela sua avaliação, deixe o seu feedback nos comentários :D
PagedList: Paginação básica
Recurso de Paginação
O recurso de paginação é bastante útil quando temos uma quantidade grande de registros que precisa ser apresentada para o usuário. Ao invés de exibir todos de uma vez, separamos a lista em partes (páginas) que o usuário pode acessar individualmente através dos controles de navegação, como podemos ver na Figura 1.
No ASP.NET MVC podemos implementar esse recurso com facilidade usando a biblioteca X.PagedList, que é open source e pode ser instalada via NuGet.
Observação: a biblioteca original PagedList foi descontinuada. Em seu lugar os desenvolvedores sugerem o uso da X.PagedList, que pode substituir a primeira sem grandes modificações no projeto.
Instalando a biblioteca PagedList
Para instalar a biblioteca X.PagedList devemos usar o gerenciador de pacotes NuGet. Clicando com a direita sobre o projeto no Solution Explorer e depois em Manage NuGet Packages, na tela que se abrirá (Figura 2) devemos localizar o pacote X.PagedList.Mvc e instalá-lo. A partir daí o pacote X.PagedList será instalado automaticamente, pois é uma dependência do primeiro.
Configurando a action do controller
Com a biblioteca instalada, o próximo passo é adequar o controller para retornar para a view uma lista paginada, que agora será representada pela interface IPagedList da biblioteca.
Devemos então referenciar o namespace X.PagedList no controller, da seguinte forma:
using X.PagedList;Em seguida o método do controller responsável pela listagem (nesse caso o Index) deve ser alterado como a seguir:
public ActionResult Index(int pagina = 1)
{
var produtos = db.Produtos.OrderBy(p => p.Id)
.ToPagedList(pagina, 10);
return View(produtos);
}Linha 1: O método deve receber um parâmetro inteiro representando a página que deve ser visualizada. O nome do parâmetro não precisa ser obrigatoriamente pagina;
Linha 3: Para que a lista seja paginada ela deve estar ordenada, por isso usamos o método OrderBy;
Linha 4: Usamos o método de extensão ToPagedList, declarado no namespace X.PagedList, para converter a lista de objetos para o tipo IPagedList. Os argumentos esperados por esse método são o índice da página que deve ser visualizada e o tamanho de cada página, ou seja, a quantidade de registros a serem retornados. Nesse caso o tamanho foi fixado em 10.
Configurando a view
Na view, para que seja possível exibir os controles de paginação devemos importar o namespace X.PagedList.Mvc e declarar o Model como um objeto do tipo PagedList, da seguinte forma:
@using X.PagedList.Mvc;
@model X.PagedList.PagedList<PaginacaoAspNetMvc.Models.Produto>Em seguida podemos adicionar os botões de navegação entre as páginas usando o helper PagedListPager, como vemos abaixo.
@Html.PagedListPager(Model,
pagina => Url.Action("Index", new { pagina }))O primeiro argumento do helper Html.PagedListPager é a lista de dados a ser paginada, que deve ser um objeto do tipo PagedList;
O segundo argumento é um delegate do tipo Func<int, string>, ou seja, um método que recebe um parâmetro inteiro representando o número da página selecionada e deve retornar uma string com a URL formada a partir daquela página. Neste caso preenchemos esse delegate com um método anônimo, representado por uma expressão lambda. Nele o argumento pagina é passado pelo próprio PagedListPager e então podemos usá-lo para compor a URL usando o helper Url.Action.
A biblioteca X.PagedList usa o Bootstrap, caso ele esteja instalado no projeto. Logo, automaticamente teremos os controles de paginação formatados, como vemos na Figura 3.
Além disso também podemos acessar informações complementares sobre a paginação, como primeiro e último registros que estão sendo exibidos no momento e o total de registros disponível:
Listando registros de @Model.FirstItemOnPage
a @Model.LastItemOnPage de um total de @Model.TotalItemCountAqui estamos exibindo um texto com informações sobre os registros apresentados na tela:
- Model.FirstItemOnPage: índice do primeiro registro exibido na tela;
- Model.LsatItemOnPage: índice do último registro exibido na tela;
- Model.TotalItemCount: total de registros disponível.