ASP .NET Core 3.1 - Paginação de dados

  Neste artigo veremos como realizar a paginação de dados em uma aplicação ASP .NET Core MVC com  .NET Core 3.1.

A paginação de dados é útil para mostrar uma quantidade N de registros em uma página, permitindo a otimização da carga dos dados conforme a demanda do usuário.

Eu já escrevi diversos artigos sobre como realizar a paginação de dados com ASP.NET MVC e hoje vamos recordar os procedimentos básicos adotando uma abordagem bem simples e direta.

Veremos um exemplo de como realizar a paginação instalando a biblioteca X.PagedList.Mvc.Core via Nuget:

Install-Package X.PagedList.Mvc.Core -Version 7.9.1
Esta biblioteca é compatível com o .NET Standard 2.0.

Vamos usar uma abordagem DataBase First acessar os dados da tabela Clientes do banco de dados ContatosDB do SQL Server que possui a seguinte estrutura :

Para isso vamos criar uma entidade chamada Cliente em nosso projeto com propriedades cujo nomes serão iguais aos da coluna da tabela Clientes.

Atualmente temos os seguintes registros na tabela Clientes:

Obs: Você pode criar o banco de dados e a tabela usando o Code-First. Para isso basta aplicar o Migrations.

'Bora' pro código...

Recursos :

Criando o projeto no VS 2019 Community

Abra o VS 2019 Community e crie uma solução em branco via menu File-> New Project;

Selecione o template ASP .NET Core Web Application, e, Informe o nome Aspnet_Paginacao1.

A seguir selecione .NET Core e ASP .NET Core 3.1 e marque o template Web Application(MVC) e as configurações conforme figura abaixo:

Clicando no botão Create teremos o projeto criado.

Vamos usar o EF Core para se comunicar com o banco de dados e, precisamos incluir uma referência no projeto para poder usar os recursos do EF Core. No menu Tools-> Nuget Package Manager clique em Manage Nuget packages for Solution e selecione o pacote Microsoft.EntityFrameworkCore.SqlServer na versão 3.1.0 e clique em Install.

Ao instalar este pacote todas as dependências necessárias serão instaladas inclusive o Entity Framework Core.

Se você for aplicar o Migrations vai ter que instalar também o pacote Microsoft.EntityFrameworkCore.Tools no projeto. Caso contrário não precisa instalar.

Já vamos instalar também o pacote X.PageList.Mvc.Core no projeto via menu Tools em Manage Packages for Solution :

Definindo o modelo de domínio e o contexto

Vamos criar o nosso modelo de domínio que para o nosso exemplo será a classe Cliente onde vamos definir as propriedades para ClienteId, Nome, Endereco e Email.

Na pasta Models do projeto crie a classe Cliente.cs e defina o código abaixo:

    public class Cliente
    {
        public int ClienteId { get; set; }
        public string Nome { get; set; }
        public string Endereco { get; set; }
        public string Email { get; set; }
    }

A seguir vamos criar a classe AppDbContext onde vamos definir o nosso contexto do EF Core que vai permitir acessar os dados do banco de dados mapeados para a entidade Cliente.

Na pasta Models crie o arquivo AppDbContext.cs com o código abaixo:

using Microsoft.EntityFrameworkCore;
namespace AspNet_Paginacao1.Models
{
    public class AppDbContext : DbContext
    {
        public AppDbContext(DbContextOptions options) : base(options)
        { }

        public DbSet<Cliente> Clientes { get; set; }
    }
}

Essa classe herda da classe DbContext e define a propriedade do tipo DbSet<Cliente> que mapeia a entidade para a tabela Clientes do banco de dados.

Precisamos agora registrar o contexto como um serviço no arquivo Startup e definir a string de conexão do banco de dados que iremos usar no arquivo appsettings.json.

Abrindo o arquivo Startup inclua o código abaixo no método ConfigureServices:

     public void ConfigureServices(IServiceCollection services)
      {
            services.AddDbContext<AppDbContext>(opts =>
                opts.UseSqlServer(Configuration.GetConnectionString("sqlConnection")));
            services.AddControllersWithViews();
     }

Aqui definimos o provedor para usar o SQL Server e o nome da string de conexão como 'sqlconnection'.

No arquivo appsettings.json vamos incluir o código que define a string de conexão com uma instância do SQL Server local:

{
  "Logging": {
    "LogLevel": {
      "Default": "Information",
      "Microsoft": "Warning",
      "Microsoft.Hosting.Lifetime": "Information"
    }
  },
  "ConnectionStrings": {
    "sqlConnection": "Data Source=Macoratti;Initial Catalog=ContatosDB;Integrated Security=True"
  },
  "AllowedHosts": "*"
}

Criando o controller ClientesController

Agora vamos criar um controlador ClientesController na pasta Controllers do projeto.

Clique com o botão direito do mouse sobre a pasta Controllers e selecione : Add->Controller;

Selecione a opção MVC Controller with views using Entity Framework da janela do Scaffold e clique em Add;

Informe o nome ClienteController e clique em Add;

A seguir informe as informações na janela Add API Controller conforme acima e clique em Add.

Sera criado o controlador com os métodos Actions e todas as views necessárias para gerenciar dos dados dos clientes na pasta /Views/Clientes.

Vamos ajustar a view Index.cshtml da pasta Views/Home e o arquivo _Layout.cshtml para exibir um link para acessar os clientes.

...
 <ul class="navbar-nav flex-grow-1">
     <li class="nav-item">
        <a class="nav-link text-dark" asp-area="" asp-controller="Home" asp-action="Index">Home</a>
    </li>
    <li class="nav-item">
        <a class="nav-link text-dark" asp-area="" asp-controller="Clientes" asp-action="Index">Clientes</a>
    </li>
</ul>
...

Executando o projeto teremos o resultado abaixo:

Temos aqui a exibição parcial das informações dos Clientes obtidas da tabela Clientes.

Vamos agora implementar a paginação de dados.

Implementando a paginação de dados

Vamos começar abrindo o arquivo ClientesController e incluindo uma referência ao pacote usado para realizar a paginação.

using X.PagedList;

Vamos aplicar a paginação ao método Index do controlador ClientesController pois é aqui que são retornadas as informações dos clientes.

Assim altere o código Action Index conforme abaixo:

  public async Task<IActionResult> Index(int? pagina)
  {
            const int itensPorPagina = 5;            
            int numeroPagina = (pagina ?? 1);            
            return View(await _context.Clientes.
                ToPagedListAsync(numeroPagina, itensPorPagina));
  }

Definimos no método o recebimento da pagina que pode ser null e a seguir definimos o número de itens por página igual a 5 e o número da pagina que se não for informado será igual a 1.

Usamos então o método ToPagedListAsync() passando esses valores para a view.

Agora a view Index.cshtml da pasta /Views/Clientes deve ter o seu código alterado conforme abaixo:

@model X.PagedList.IPagedList<AspNet_Paginacao1.Models.Cliente>
@using X.PagedList.Mvc.Core;
@{
    ViewData["Title"] = "Index";
}
<h1>Index</h1>
<p>
    <a asp-action="Create">Criar Novo</a>
</p>
<table class="table">
    <thead>
        <tr>
            <th> Nome</th>
            <th> Endereço</th>
            <th> Email</th>
            <th></th>
        </tr>
    </thead>
    <tbody>
        @foreach (var item in Model)
        {
            <tr>
                <td>
                    @Html.DisplayFor(modelItem => item.Nome)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.Endereco)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.Email)
                </td>
                <td>
                    <a asp-action="Edit" asp-route-id="@item.ClienteId">Edita</a> |
                    <a asp-action="Details" asp-route-id="@item.ClienteId">Detalhe</a> |
                    <a asp-action="Delete" asp-route-id="@item.ClienteId">Deleta</a>
                </td>
            </tr>
        }
    </tbody>
</table>
@Html.PagedListPager(Model, pagina => Url.Action("Index", new { pagina }))

 

Executando o projeto iremos obter o resultado abaixo onde temos cada página exibindo 5 registros:

E temos os números que permitem navegar pelas páginas (temos 3 páginas) neste exemplo.

Pegue o projeto (sem as referências) aqui :  AspNet_Paginacao1.zip

Porque a lei foi dada por Moisés; a graça e a verdade vieram por Jesus Cristo.
Deus nunca foi visto por alguém. O Filho unigênito, que está no seio do Pai, esse o revelou.
João 1:17,18

Referências:

José Carlos Macoratti