Série da semana: Angular, API RESTful e Banco de Dados

Veja mais
O projeto está inativo

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.

36

PagedList: Paginação básica

Recurso de Paginação


Paginação básica Paginação com busca Paginação com tamanho de página selecionável

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.

Tela de listagem com paginação
Figura 1. Tela de listagem com paginação

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.

Instalando a biblioteca X.PagedList.Mvc pelo NuGet
Figura 2. Instalando a biblioteca X.PagedList.Mvc pelo NuGet

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.

Controles de navegação com Bootstrap
Figura 3. Controles de navegação com Bootstrap

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.TotalItemCount

Aqui 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.

Sugestão de Conteúdo

Suporte ao aluno - Deixe a sua dúvida.
Assinatura Devmedia
Faça parte dessa comunidade 100% focada em programação e tenha acesso ilimitado. Nosso compromisso é tornar a sua experiência de estudo cada vez mais dinâmica e eficiente. Portanto, se você quer programar de verdade seu lugar é aqui. Junte-se a mais de...
+ 800 Mil programadores
,90* / mês
  • Séries
  • Projetos completos
  • Cursos
  • Guias de carreiras
  • DevCasts
  • Desafios
  • Artigos
  • App
  • Suporte em tempo real
A assinatura é cobrado através do seu cartão de crédito. *Tempo minimo de assinatura: 12 meses.
Assinatura Devmedia
Faça parte dessa comunidade 100% focada em programação e tenha acesso ilimitado. Nosso compromisso é tornar a sua experiência de estudo cada vez mais dinâmica e eficiente. Portanto, se você quer programar de verdade seu lugar é aqui. Junte-se a mais de...
+ 800 Mil programadores
Conheça agora!
,90* / mês
  • Séries
  • Projetos completos
  • Cursos
  • Guias de carreiras
  • DevCasts
  • Desafios
  • Artigos
  • App
  • Suporte em tempo real
A assinatura é cobrada através do seu cartão de crédito. *Tempo mínimo de assinatura: 12 meses.