Ir para o conteúdo do rodapé
AJUDA DO .NET

Tabela de dados jQuery (Como funciona para desenvolvedores)

A apresentação de dados é um aspecto crucial do desenvolvimento web e, ao lidar com dados tabulares, ter uma tabela interativa e rica em recursos é essencial. jQuery DataTables é uma poderosa biblioteca JavaScript que oferece funcionalidades avançadas para a criação de tabelas dinâmicas e responsivas. Neste artigo, exploraremos como integrar e usar o jQuery DataTables em uma aplicação web ASP.NET para aprimorar a apresentação de dados tabulares.

Como usar o jQuery DataTables em um aplicativo Web ASP.NET ?

  1. Criar ou abrir uma aplicação web.
  2. Instale os pacotes do Entity Framework.
  3. Adicione o Modelo, o Contexto do Banco de Dados e o Controlador.
  4. Adicione a string de conexão do banco de dados e configure-a.
  5. Adicionar migração e atualizar banco de dados.
  6. Adicione a biblioteca jQuery DataTables do lado do cliente.
  7. Adicione a tabela HTML e o código JavaScript .
  8. Compile e execute o aplicativo.
  9. Exporte dados para o Excel usando o IronXL para manipulação do Excel .

O que é jQuery DataTables?

jQuery DataTables é um plugin jQuery leve, flexível e repleto de recursos para manipulação de dados tabulares. Oferece uma ampla gama de funcionalidades, como classificação, pesquisa e paginação, tornando-se uma escolha ideal para apresentar grandes conjuntos de dados de forma amigável ao usuário.

Processamento do lado do cliente

No processamento do lado do cliente, o navegador tem a capacidade de manipular o conjunto de dados localmente. O jQuery DataTables, por meio de seus recursos poderosos, permite a interação e manipulação dinâmica dos dados diretamente no navegador do usuário. Embora essa abordagem funcione perfeitamente para conjuntos de dados menores, ela pode enfrentar desafios ao lidar com conjuntos de dados extensos devido a possíveis gargalos de desempenho e aumento do consumo de recursos.

Neste artigo, exploraremos o processamento do lado do cliente em uma aplicação ASP.NET Razor Page, destacando as vantagens que ele oferece para conjuntos de dados menores e fornecendo insights sobre possíveis considerações e otimizações para garantir uma experiência de usuário fluida e responsiva.

Introdução ao uso do jQuery DataTables em uma aplicação web ASP.NET

Este artigo utilizará uma aplicação web ASP.NET Razor Page direcionada ao .NET Framework 4.8. Você pode usar Blazor, MVC ou Web Forms, conforme sua necessidade.

Neste artigo, será utilizada a abordagem Code-First. Você pode usar a abordagem Database First conforme sua preferência. Precisamos instalar os seguintes pacotes para usar a abordagem Code First.

  1. Microsoft.EntityFrameworkCore
  2. Microsoft.EntityFrameworkCore.Design
  3. Microsoft.EntityFrameworkCore.SqlServer
  4. Microsoft.EntityFrameworkCore.Tools

Instale os pacotes acima usando o comando Install-Package no Console do Gerenciador de Pacotes NuGet ou instale-os a partir da solução do Gerenciador de Pacotes NuGet , pesquisando por eles.

Vamos configurar nosso projeto adicionando a classe Model, a classe ApplicationDbContext, o Controller, a string de conexão e a configuração dos serviços no arquivo Program.cs.

Adicionar Classe de Modelo

Estou usando a classe de modelo Employee neste exemplo. Você pode usá-lo conforme sua necessidade.

public class Employee
{
    public int Id { get; set; }
    public string FirstName { get; set; } = string.Empty;
    public string LastName { get; set; } = string.Empty;
    public string Email { get; set; } = string.Empty;
    public string PhoneNumber { get; set; } = string.Empty;
    public string Gender { get; set; } = string.Empty;
    public string Designation { get; set; } = string.Empty;
}
public class Employee
{
    public int Id { get; set; }
    public string FirstName { get; set; } = string.Empty;
    public string LastName { get; set; } = string.Empty;
    public string Email { get; set; } = string.Empty;
    public string PhoneNumber { get; set; } = string.Empty;
    public string Gender { get; set; } = string.Empty;
    public string Designation { get; set; } = string.Empty;
}
Public Class Employee
	Public Property Id() As Integer
	Public Property FirstName() As String = String.Empty
	Public Property LastName() As String = String.Empty
	Public Property Email() As String = String.Empty
	Public Property PhoneNumber() As String = String.Empty
	Public Property Gender() As String = String.Empty
	Public Property Designation() As String = String.Empty
End Class
$vbLabelText   $csharpLabel

Adicionar a classe ApplicationDbContext

Precisamos adicionar a classe ApplicationDbContext para configurar o Entity Framework.

public class ApplicationDbContext : DbContext
{
    public ApplicationDbContext(DbContextOptions<ApplicationDbContext> options) : base(options)
    {
    }

    public DbSet<Employee> Employees { get; set; }
}
public class ApplicationDbContext : DbContext
{
    public ApplicationDbContext(DbContextOptions<ApplicationDbContext> options) : base(options)
    {
    }

    public DbSet<Employee> Employees { get; set; }
}
Public Class ApplicationDbContext
	Inherits DbContext

	Public Sub New(ByVal options As DbContextOptions(Of ApplicationDbContext))
		MyBase.New(options)
	End Sub

	Public Property Employees() As DbSet(Of Employee)
End Class
$vbLabelText   $csharpLabel

Adicionar Controlador de Funcionários

Adicione o EmployeeController para criar o endpoint.

[Route("api/[controller]")]
[ApiController]
public class EmployeeController : ControllerBase
{
    private readonly ApplicationDbContext _context;

    public EmployeeController(ApplicationDbContext context)
    {
        _context = context;
    }

    [HttpGet]
    public IActionResult GetEmployees()
    {
        try
        {
            var employeeData = _context.Employees.ToList();
            var jsonData = new { data = employeeData };
            return Ok(jsonData);
        }
        catch (Exception ex)
        {
            // Log exception here
            throw;
        }
    }
}
[Route("api/[controller]")]
[ApiController]
public class EmployeeController : ControllerBase
{
    private readonly ApplicationDbContext _context;

    public EmployeeController(ApplicationDbContext context)
    {
        _context = context;
    }

    [HttpGet]
    public IActionResult GetEmployees()
    {
        try
        {
            var employeeData = _context.Employees.ToList();
            var jsonData = new { data = employeeData };
            return Ok(jsonData);
        }
        catch (Exception ex)
        {
            // Log exception here
            throw;
        }
    }
}
<Route("api/[controller]")>
<ApiController>
Public Class EmployeeController
	Inherits ControllerBase

	Private ReadOnly _context As ApplicationDbContext

	Public Sub New(ByVal context As ApplicationDbContext)
		_context = context
	End Sub

	<HttpGet>
	Public Function GetEmployees() As IActionResult
		Try
			Dim employeeData = _context.Employees.ToList()
			Dim jsonData = New With {Key .data = employeeData}
			Return Ok(jsonData)
		Catch ex As Exception
			' Log exception here
			Throw
		End Try
	End Function
End Class
$vbLabelText   $csharpLabel

Aqui, estamos usando o método HttpGet, pois iremos recuperar os dados completos do servidor no lado do cliente e implementar paginação, busca e ordenação no lado do cliente. Estamos retornando um array JSON que será renderizado no lado do cliente.

Adicionar string de conexão

Adicione a seguinte string de conexão no arquivo appsettings.json.

"ConnectionStrings": {
  "EmployeeDB": "Server=localserver\\SQLEXPRESS;Database=EmployeeDB;Trusted_Connection=True;MultipleActiveResultSets=true;TrustServerCertificate=True;"
}

Adicione a seguinte linha na classe Program.cs, abaixo da linha webApplication.CreateBuilder(), para conectar com o SQL Server.

builder.Services.AddDbContext<ApplicationDbContext>(options =>
{
    options.UseSqlServer(builder.Configuration.GetConnectionString("EmployeeDB"));
});
builder.Services.AddDbContext<ApplicationDbContext>(options =>
{
    options.UseSqlServer(builder.Configuration.GetConnectionString("EmployeeDB"));
});
builder.Services.AddDbContext(Of ApplicationDbContext)(Sub(options)
	options.UseSqlServer(builder.Configuration.GetConnectionString("EmployeeDB"))
End Sub)
$vbLabelText   $csharpLabel

Executar Migração

O próximo passo é executar a migração, pois estamos utilizando a abordagem Code First. Execute o seguinte comando no Console do Gerenciador de Pacotes.

Add-Migration init
Add-Migration init
SHELL

Este comando criará uma migração. Agora, execute o seguinte comando para aplicar essa migração ao banco de dados.

update-database
update-database
SHELL

Agora que nosso projeto está configurado e o banco de dados está pronto, precisamos apenas adicionar a biblioteca jQuery e as tabelas HTML para deixar nossa interface de usuário pronta. Neste exemplo, utilizamos o SQL Server como fonte de dados, mas você pode usar qualquer outro banco de dados.

Adicionar a biblioteca jQuery DataTables

Precisamos adicionar a biblioteca jQuery DataTables, que é um plugin para aprimorar a funcionalidade de tabelas da biblioteca JavaScript jQuery, ao nosso projeto. Podemos adicioná-la clicando com o botão direito do mouse no projeto, selecionando "Adicionar" e, em seguida, selecionando "Adicionar biblioteca do lado do cliente". Uma pequena janela será exibida, onde poderemos pesquisar por "jquery datatables" e instalá-lo, como mostrado abaixo:

Adicionar biblioteca jQuery DataTables

Adicionar tabela HTML

Vamos adicionar uma tabela HTML com o corpo da tabela vazio. Adicionaremos os cabeçalhos de coluna necessários durante a configuração do jQuery DataTable. Adicione o seguinte código ao arquivo Index.cshtml.

@page
@model IndexModel
@{
    ViewData["Title"] = "Home page";
}
<link href="~/lib/datatables/css/dataTables.bootstrap4.min.css" rel="stylesheet" />
<div class="container">
    <br />
    <div style="width:90%; margin:0 auto;">
        <table id="employeeDatatable" class="table table-striped table-bordered dt-responsive nowrap" width="100%" cellspacing="0">
        </table>
    </div>
</div>
@section Scripts
{
    <script src="~/lib/datatables/js/jquery.dataTables.min.js"></script>
    <script src="~/lib/datatables/js/dataTables.bootstrap4.min.js"></script>
    <script src="~/js/EmployeeDatatable.js"></script>
}

Precisamos adicionar o arquivo EmployeeDatatable.js dentro da pasta wwwroot/Js. Neste arquivo, teremos uma chamada Ajax e recursos avançados do jQuery DataTable, como filtragem, paginação, pesquisa, classificação, etc.

Criar arquivo EmployeeDatatable.js

Crie um arquivo EmployeeDatatable.js dentro da pasta wwwroot/Js. Adicione o seguinte código.

$(document).ready(function () {
    $("#employeeDatatable").DataTable({
        "processing": true,
        "serverSide": false,
        "filter": true,
        "ajax": {
            "url": "/api/Employee",
            "type": "GET",
            "datatype": "json"
        },
        "columnDefs": [{
            "targets": [0],
            "visible": false,
            "searchable": false
        }],
        "columns": [
            { "data": "id", "title": "Employee ID", "name": "Employee ID", "autoWidth": true },
            { "data": "firstName", "title": "First Name", "name": "First Name", "autoWidth": true },
            { "data": "lastName", "title": "Last Name", "name": "Last Name", "autoWidth": true },
            { "data": "email", "title": "Email", "name": "Email", "autoWidth": true },
            { "data": "phoneNumber", "title": "Phone Number", "name": "Phone Number", "autoWidth": true },
            { "data": "gender", "title": "Gender", "name": "Gender", "autoWidth": true },
            { "data": "designation", "title": "Designation", "name": "Designation", "autoWidth": true }
        ]
    });
});
$(document).ready(function () {
    $("#employeeDatatable").DataTable({
        "processing": true,
        "serverSide": false,
        "filter": true,
        "ajax": {
            "url": "/api/Employee",
            "type": "GET",
            "datatype": "json"
        },
        "columnDefs": [{
            "targets": [0],
            "visible": false,
            "searchable": false
        }],
        "columns": [
            { "data": "id", "title": "Employee ID", "name": "Employee ID", "autoWidth": true },
            { "data": "firstName", "title": "First Name", "name": "First Name", "autoWidth": true },
            { "data": "lastName", "title": "Last Name", "name": "Last Name", "autoWidth": true },
            { "data": "email", "title": "Email", "name": "Email", "autoWidth": true },
            { "data": "phoneNumber", "title": "Phone Number", "name": "Phone Number", "autoWidth": true },
            { "data": "gender", "title": "Gender", "name": "Gender", "autoWidth": true },
            { "data": "designation", "title": "Designation", "name": "Designation", "autoWidth": true }
        ]
    });
});
JAVASCRIPT

Utilizamos a biblioteca jQuery DataTables, que é rica em recursos. Este poderoso plugin jQuery nos permite implementar funcionalidades avançadas no lado do cliente com o mínimo esforço.

Agora, compile e execute este aplicativo.

Saída

Podemos ver que temos uma interface de usuário bastante interativa pronta com a ajuda do jQuery no ASP.NET. Os dados exibidos são os seguintes:

Saída do jQuery DataTables

Agora, a paginação é implementada no lado do cliente, portanto, os dados completos são enviados do servidor, conforme mostrado abaixo:

Paginação

Interface de saída

Podemos pesquisar, classificar e alterar a página; tudo será realizado no lado do cliente, conforme mostrado abaixo:

Interface de Saída

Introdução ao IronXL

IronXL para manipulação de arquivos Excel em .NET é uma biblioteca que permite trabalhar com arquivos Excel em aplicações .NET . Ele pode criar, ler, editar e salvar documentos do Excel em vários formatos, como XLS, XLSX, CSV e TSV. Não requer a instalação do Microsoft Office ou do Excel Interop. É compatível com .NET 5, Core, Framework e Azure.

Frequentemente, temos a necessidade de exportar dados para arquivos Excel ou CSV. IronXL é a melhor opção neste caso. Agora, vamos escrever o código para exportar nossos dados para um arquivo do Excel.

Instale o IronXL

Instale a biblioteca IronXL em seu projeto digitando o seguinte comando no Console do Gerenciador de Pacotes.

Install-Package IronPdf

Isso instalará o IronXL e as dependências necessárias em nosso projeto. Você também pode baixá-lo diretamente do pacote NuGet do IronXL .

Exportar dados para o Excel

Vamos escrever um código para converter nossa lista de funcionários em um arquivo do Excel.

public void ExportToExcel(List<Employee> employeeList)
{
    // Create a new workbook instance
    WorkBook wb = WorkBook.Create(ExcelFileFormat.XLSX);
    // Get the default worksheet
    WorkSheet ws = wb.DefaultWorkSheet;

    // Add Header Row
    ws["A1"].Value = "Employee ID";
    ws["B1"].Value = "First Name";
    ws["C1"].Value = "Last Name";
    ws["D1"].Value = "Designation";
    ws["E1"].Value = "Gender";
    ws["F1"].Value = "Phone Number";
    ws["G1"].Value = "Email";

    int rowCount = 2;

    // Add Data Rows
    foreach (Employee employee in employeeList)
    {
        ws["A" + rowCount].Value = employee.Id.ToString();
        ws["B" + rowCount].Value = employee.FirstName;
        ws["C" + rowCount].Value = employee.LastName;
        ws["D" + rowCount].Value = employee.Designation;
        ws["E" + rowCount].Value = employee.Gender;
        ws["F" + rowCount].Value = employee.PhoneNumber;
        ws["G" + rowCount].Value = employee.Email;

        rowCount++;
    }

    // Save the workbook as an Excel file
    wb.SaveAs("Employee.xlsx");
}
public void ExportToExcel(List<Employee> employeeList)
{
    // Create a new workbook instance
    WorkBook wb = WorkBook.Create(ExcelFileFormat.XLSX);
    // Get the default worksheet
    WorkSheet ws = wb.DefaultWorkSheet;

    // Add Header Row
    ws["A1"].Value = "Employee ID";
    ws["B1"].Value = "First Name";
    ws["C1"].Value = "Last Name";
    ws["D1"].Value = "Designation";
    ws["E1"].Value = "Gender";
    ws["F1"].Value = "Phone Number";
    ws["G1"].Value = "Email";

    int rowCount = 2;

    // Add Data Rows
    foreach (Employee employee in employeeList)
    {
        ws["A" + rowCount].Value = employee.Id.ToString();
        ws["B" + rowCount].Value = employee.FirstName;
        ws["C" + rowCount].Value = employee.LastName;
        ws["D" + rowCount].Value = employee.Designation;
        ws["E" + rowCount].Value = employee.Gender;
        ws["F" + rowCount].Value = employee.PhoneNumber;
        ws["G" + rowCount].Value = employee.Email;

        rowCount++;
    }

    // Save the workbook as an Excel file
    wb.SaveAs("Employee.xlsx");
}
Public Sub ExportToExcel(ByVal employeeList As List(Of Employee))
	' Create a new workbook instance
	Dim wb As WorkBook = WorkBook.Create(ExcelFileFormat.XLSX)
	' Get the default worksheet
	Dim ws As WorkSheet = wb.DefaultWorkSheet

	' Add Header Row
	ws("A1").Value = "Employee ID"
	ws("B1").Value = "First Name"
	ws("C1").Value = "Last Name"
	ws("D1").Value = "Designation"
	ws("E1").Value = "Gender"
	ws("F1").Value = "Phone Number"
	ws("G1").Value = "Email"

	Dim rowCount As Integer = 2

	' Add Data Rows
	For Each employee As Employee In employeeList
		ws("A" & rowCount).Value = employee.Id.ToString()
		ws("B" & rowCount).Value = employee.FirstName
		ws("C" & rowCount).Value = employee.LastName
		ws("D" & rowCount).Value = employee.Designation
		ws("E" & rowCount).Value = employee.Gender
		ws("F" & rowCount).Value = employee.PhoneNumber
		ws("G" & rowCount).Value = employee.Email

		rowCount += 1
	Next employee

	' Save the workbook as an Excel file
	wb.SaveAs("Employee.xlsx")
End Sub
$vbLabelText   $csharpLabel

Criamos um arquivo Excel a partir de uma lista de forma simples e fácil.

Arquivo Excel de saída

O IronXL oferece tutoriais completos sobre como criar arquivos XLSX , exemplos de código para leitura de arquivos Excel e documentação detalhada para ajudá-lo a utilizar sua API abrangente da melhor maneira possível.

Conclusão

Em conclusão, o jQuery DataTables emergiu como um recurso poderoso para transformar a apresentação de dados tabulares em aplicações web ASP.NET . Sua natureza leve, porém rica em recursos, facilita a criação de tabelas interativas, colocando a classificação, a pesquisa e a paginação em primeiro plano. Exploramos as nuances do processamento do lado do cliente, aproveitando os recursos do navegador para conjuntos de dados menores, ao mesmo tempo que reconhecemos os potenciais desafios com volumes de dados maiores. O guia passo a passo sobre como configurar um aplicativo ASP.NET Razor Page e integrar o jQuery DataTables fornece aos desenvolvedores informações práticas. Além disso, a introdução do IronXL como uma solução integrada para tarefas relacionadas ao Excel adiciona uma camada valiosa ao conjunto de ferramentas, permitindo a exportação eficiente de dados. Munidos dessas ferramentas, os desenvolvedores podem aprimorar a experiência do usuário, apresentando os dados de maneira atraente e acessível.

A IronXL oferece diversas opções de licenciamento, dependendo do número de desenvolvedores, projetos e necessidades de redistribuição. As licenças são perpétuas e incluem suporte e atualizações gratuitas.

Perguntas frequentes

Como o jQuery DataTables pode aprimorar a apresentação de dados em aplicações web ASP.NET?

O jQuery DataTables aprimora a apresentação de dados, fornecendo recursos como classificação, pesquisa e paginação, o que facilita a interação dos usuários com grandes conjuntos de dados de maneira responsiva e amigável.

Quais são os passos básicos para integrar o jQuery DataTables em uma aplicação ASP.NET Razor Page?

Para integrar o jQuery DataTables em uma aplicação ASP.NET Razor Page, você começa configurando o modelo, o DbContext e o controlador, configura a conexão com o banco de dados e implementa o processamento do lado do cliente para gerenciar os dados de forma eficiente usando a abordagem Code-First com o Entity Framework.

Como o processamento no servidor beneficia o jQuery DataTables ao gerenciar grandes conjuntos de dados?

O processamento no servidor beneficia o jQuery DataTables ao transferir as operações de dados para o servidor, o que melhora o desempenho e a eficiência ao lidar com grandes conjuntos de dados, em oposição ao processamento no lado do cliente, que pode ficar mais lento com grandes volumes de dados.

Qual é o papel do IronXL na exportação de dados para o Excel a partir de uma aplicação ASP.NET?

O IronXL permite que os desenvolvedores exportem dados para o Excel criando uma nova planilha, preenchendo-a com as linhas de dados do conjunto de dados e salvando-a como um arquivo do Excel. Isso simplifica a manipulação de arquivos do Excel sem a necessidade do Microsoft Office.

É possível trabalhar com arquivos do Excel em aplicações .NET sem o Microsoft Office?

Sim, o IronXL permite que aplicativos .NET trabalhem com arquivos do Excel independentemente do Microsoft Office, oferecendo suporte a vários formatos, como XLS, XLSX, CSV e TSV.

Quais são as opções de licenciamento para usar o IronXL em projetos .NET?

A IronXL oferece diversas opções de licenciamento com base no número de desenvolvedores, projetos e requisitos de distribuição. As licenças são perpétuas e incluem suporte e atualizações gratuitas.

Quais são as vantagens de usar a abordagem Code-First em ASP.NET com jQuery DataTables?

A abordagem Code-First em ASP.NET com jQuery DataTables oferece suporte à fácil configuração e ao gerenciamento do modelo e contexto do banco de dados, permitindo a integração dinâmica de dados com o DataTables do front-end para maior interatividade.

Como solucionar problemas comuns com o jQuery DataTables em uma aplicação ASP.NET?

Problemas comuns com o jQuery DataTables podem ser resolvidos garantindo a inclusão correta de scripts e folhas de estilo, verificando os caminhos da fonte de dados, verificando erros no console em busca de problemas de JavaScript e confirmando a configuração adequada do processamento no servidor.

Curtis Chau
Redator Técnico

Curtis Chau é bacharel em Ciência da Computação (Universidade Carleton) e se especializa em desenvolvimento front-end, com experiência em Node.js, TypeScript, JavaScript e React. Apaixonado por criar interfaces de usuário intuitivas e esteticamente agradáveis, Curtis gosta de trabalhar com frameworks modernos e criar manuais ...

Leia mais

Equipe de suporte de ferro

Estamos online 24 horas por dia, 5 dias por semana.
Bater papo
E-mail
Liga para mim