Paginação de dados

Uma forma muito simples de fazer paginação com ASP.NET MVC é utilizando o componente PagedList em conjunto com o PagedList.Mvc.

Como o PagedList foi criado utilizando IQueryable e Linq, ele é compatível com Entity Framework ou qualquer outro ORM que tenha funcionamento parecido.

Para utilizar o PagedList, adicione no seu projeto Data (caso seja separado do projeto MVC):

Install-Package PagedList

E no projeto MVC adicione o PagedList.Mvc:

Install-Package PagedList.MVC

A mágica acontece quando chamamos os métodos de extensão da biblioteca, no caso o método ToPagedList.

// Não esqueça de adicionar ao using
using PagedList;
        public IPagedList<Post> GetAllPosts(int pageNumber, int pageSize)
        {
            return
                _postRepository.Table.OrderByDescending(p => p.Id).ToPagedList(pageNumber, pageSize);
        }

No exemplo acima tenho a propriedade Table do meu _postRepository, me retorna o que seria um DbSet.

Agora no nosso Controller no projeto MVC, vamos chamar o método GetAllPosts().

        public ActionResult Index(int page = 1)
        {
            var data = _postService.GetAllPosts(page, 10);
            return View(data);
        }

Na pasta Views edite o Web.config e adicione o Namespace do PagedList para facilitar o uso:

        <add namespace="PagedList" />
        <add namespace="PagedList.Mvc" />

Screenshot_14

Agora vamos montar uma listagem simples na nossa View e exibir o controle de paginação utilizando o Helper do PagedList.Mvc.

@model IPagedList<Data.Entities.Post>

@{
    ViewBag.Title = "Index";
}

<h2>Posts</h2>

<!-- Exibir nossos posts -->
<table class="table">
    <tr>
        <th>
            @Html.DisplayNameFor(model => model.First().Title)
        </th>
    </tr>

    @foreach (var item in Model)
    {
        <tr>
            <td>
                @Html.DisplayFor(modelItem => item.Title)
            </td>
        </tr>
    }
</table>

<!-- Exibir controle de paginação -->
@Html.PagedListPager(Model, page => Url.Action("Index", "Home", new { page }))

Veja como ficou em execução:

Para mais informações e código fonte do PagedList acesse:
https://github.com/troygoode/PagedList

Até a próxima!


Curta também minha página no Facebook para ficar por dentro das novidades:
https://www.facebook.com/devleonardohofling