Exemplo: Paginao de dados no ASP.

NET MVC com PagedList

Neste exemplo voc ver como implementar paginao de registros em aplicaes web com o ASP.NET MVC, utilizando para isso a
biblioteca PagedList, que tambm j cria os controles de navegao com o Bootstrap.

Recurso de Paginao

Paginao bsica

Next

123

O recurso de paginao bastante til quando temos uma quantidade grande de registros que precisa ser apresentada para o usurio. Ao invs
de exibir todos de uma vez, separamos a lista em partes (pginas) que o usurio pode acessar individualmente atravs dos controles de
navegao, como podemos ver na Figura 1.
 Figura 1. Tela de listagem com paginao

No ASP.NET MVC podemos implementar esse recurso com facilidade usando a biblioteca X.PagedList, que open source e pode ser
instalada via NuGet.

Observao: a biblioteca original PagedList foi descontinuada. Em seu lugar os desenvolvedores sugerem o uso da X.PagedList, que pode
substituir a primeira sem grandes modificaes 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 dependncia do primeiro.

Figura 2. Instalando a biblioteca X.PagedList.Mvc

pelo NuGet

Configurando a action do controller

Com a biblioteca instalada, o prximo passo adequar o controller para retornar para a view uma lista paginada, que agora ser representada
pela interface IPagedList da biblioteca.
Devemos ento referenciar o namespace X.PagedList no controller, da seguinte forma:

using X.PagedList;

Em seguida o mtodo do controller responsvel pela listagem (nesse caso o Index) deve ser alterado como a seguir:

1
2
3
4
5
6
public ActionResult Index(int pagina = 1)
{
var produtos = db.Produtos.OrderBy(p => p.Id)
.ToPagedList(pagina, 10);
return View(produtos);
}

Linha 1: O mtodo deve receber um parmetro inteiro representando a pgina que deve ser visualizada. O nome do parmetro no precisa
ser obrigatoriamente pagina;

Linha 3: Para que a lista seja paginada ela deve estar ordenada, por isso usamos o mtodo OrderBy;

Linha 4: Usamos o mtodo de extenso ToPagedList, declarado no namespace X.PagedList, para converter a lista de objetos para o tipo
IPagedList. Os argumentos esperados por esse mtodo so o ndice da pgina que deve ser visualizada e o tamanho de cada pgina, 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 possvel exibir os controles de paginao devemos importar o namespace X.PagedList.Mvc e declarar o Model como
um objeto do tipo PagedList, da seguinte forma:

1
2
@using X.PagedList.Mvc;
@model X.PagedList.PagedList<PaginacaoAspNetMvc.Models.Produto>

Em seguida podemos adicionar os botes de navegao entre as pginas usando o helper PagedListPager, como vemos abaixo.

1
2
@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 mtodo que recebe um parmetro inteiro representando o
nmero da pgina selecionada e deve retornar uma string com a URL formada a partir daquela pgina. Neste caso preenchemos esse delegate
com um mtodo annimo, representado por uma expresso lambda. Nele o argumento pagina passado pelo prprio PagedListPager e
ento 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 paginao
formatados, como vemos na Figura 3.

Figura 3. Controles de navegao com Bootstrap

Alm disso tambm podemos acessar informaes complementares sobre a paginao, como primeiro e ltimo registros que esto sendo
exibidos no momento e o total de registros disponvel:

1
2
Listando registros de @Model.FirstItemOnPage
a @Model.LastItemOnPage de um total de @Model.TotalItemCount

Aqui estamos exibindo um texto com informaes 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 disponvel.

Sugesto de Contedo

Curso O que NuGet?

Artigo ASP.NET Razor: Como implementar a Camada de Apresentao

Prximo vdeo