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.
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.
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.
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.
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.
Estou usando a classe de modelo Employee para este 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 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 ClassPrecisamos 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
Inherits DbContext
Public Sub New(ByVal options As DbContextOptions(Of ApplicationDbContext))
MyBase.New(options)
End Sub
Public Property Employees() As DbSet(Of Employee)
End ClassAdicione 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
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 ClassAqui, estamos usando o método HttpGet, pois estaremos recuperando os dados completos do servidor no lado do cliente, e implementando paginação, busca e ordenação no lado do cliente. Estamos retornando um array JSON que será renderizado no lado do cliente.
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 sob a linha webApplication.CreateBuilder() para conectar com o SQL Server.
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)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 initEste comando criará uma migração. Agora, execute o seguinte comando para aplicar essa migração ao banco de dados.
update-databaseAgora 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.
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:
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.
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 }
]
});
});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.
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:
Agora, a paginação é implementada no lado do cliente, portanto, os dados completos são enviados do servidor, conforme mostrado abaixo:
Podemos pesquisar, classificar e alterar a página; tudo será realizado no lado do cliente, conforme mostrado abaixo:
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 a biblioteca IronXL em seu projeto digitando o seguinte comando no Console do Gerenciador de Pacotes.
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 .
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 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 SubCriamos um arquivo Excel a partir de uma lista de forma simples e fácil.
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.
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.
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 bem estruturados e visualmente atraentes.
IronPDF faz parte do IRON SUITE.
10 produtos de API .NET para seus documentos de escritório
Quando você precisa que seu PDF tenha a aparência de HTML, rapidamente.
