Os desenvolvedores ASP.NET frequentemente buscam maneiras eficientes de apresentar dados tabulares ou tabelas HTML com recursos avançados, como classificação, pesquisa e paginação. DataTables .NET é uma poderosa biblioteca jQuery e JavaScript , além de uma ferramenta altamente flexível que facilita a criação de tabelas interativas e ricas em recursos em aplicações web. Neste artigo, exploraremos como integrar os arquivos de distribuição do DataTables .NET , uma biblioteca de aprimoramento de tabelas para processamento no servidor, em um projeto ASP.NET para melhorar a apresentação e a experiência do usuário com dados tabulares.
DataTables .NET é uma biblioteca JavaScript jQuery que permite criar e manipular tabelas interativas em aplicações .NET . É baseado no plugin jQuery DataTables, que fornece recursos abrangentes de API, como paginação, classificação, filtragem e rolagem para tabelas HTML dinâmicas e estáticas. Trata-se de uma biblioteca para aprimoramento de tabelas que pode trabalhar com diversas fontes de dados, como bancos de dados SQL, AJAX ou objetos em memória.
Considere um cenário em que você tenha um endpoint de API que forneça um vasto conjunto de dados de produtos. A abordagem padrão envolve o jQuery DataTables fazendo uma chamada AJAX para esta API, obtendo uma lista de produtos em formato JSON e renderizando uma tabela HTML. Isso é conhecido como processamento do lado do cliente, que é eficiente para conjuntos de dados menores, normalmente variando de 100 a 1000 registros. No entanto, o que acontece quando o conjunto de dados se expande para 10.000 registros ou mais?
Ao lidar com um número substancial de registros, torna-se impraticável enviar todo o conjunto de dados para o navegador de uma só vez. Transmitir 10.000 registros de uma só vez não só desperdiça largura de banda, como também sobrecarrega os recursos do navegador. Nesses casos, uma abordagem alternativa, o processamento no servidor, torna-se crucial para otimizar o desempenho.
No processamento do lado do servidor, em vez de enviar o conjunto de dados completo, a API transmite os dados em partes gerenciáveis, normalmente paginadas com cerca de 50 registros por página. Ao fazer isso, o tempo de carregamento é significativamente melhorado, já que o jQuery DataTables agora carrega um número modesto de registros (~50) em vez de lidar com todo o conjunto de dados de uma só vez. Essa abordagem reduz o uso de CPU e largura de banda, criando uma interação mais eficiente entre a API e o DataTable.
Neste artigo, exploraremos a implementação do processamento no lado do servidor em uma aplicação ASP.NET Razor Page, demonstrando como lidar e exibir conjuntos de dados extensos de forma eficiente, ao mesmo tempo que se melhora o desempenho geral da sua aplicação web.
Para começar, precisamos adicionar a biblioteca DataTables .NET Client Side ao nosso projeto. Este artigo utilizará o projeto de aplicativo Web ASP.NET Core (Razor Pages) com .NET 8. Você pode usar qualquer projeto de aplicativo Web de acordo com suas necessidades.
Para adicionar uma biblioteca do lado do cliente, clique com o botão direito do mouse em Solução > Adicionar > Biblioteca do lado do cliente e procure por tabelas de dados, conforme mostrado abaixo.
Agora, precisamos adicionar a classe do modelo, o contexto do banco de dados, o controlador, a tabela HTML e a chamada AJAX.
Mas antes disso, precisamos instalar os pacotes NuGet do Entity Framework para conectar nossa aplicação ao banco de dados. Este artigo utilizará a abordagem Code First, mas você pode usar a abordagem Database First conforme sua preferência.
Instale os seguintes pacotes hospedados localmente:
Instale o pacote acima usando o comando Install-Package no Console do Gerenciador de Pacotes NuGet ou instale-o a partir da solução do Gerenciador de Pacotes NuGet, pesquisando-o.
Neste exemplo, estou usando a classe Product Model, mas você pode usá-la conforme sua necessidade.
public class Product
{
public int Id { get; set; }
public string ProductName { get; set; } = string.Empty;
public string ProductPrice { get; set; } = string.Empty;
public string ProductWeight { get; set; } = string.Empty;
public string ProductDescription { get; set; } = string.Empty;
public DateTime ProductManufacturingDate { get; set; }
public DateTime ProductExpiryDate { get; set; }
}Public Class Product
Public Property Id() As Integer
Public Property ProductName() As String = String.Empty
Public Property ProductPrice() As String = String.Empty
Public Property ProductWeight() As String = String.Empty
Public Property ProductDescription() As String = String.Empty
Public Property ProductManufacturingDate() As DateTime
Public Property ProductExpiryDate() As DateTime
End Classpublic class ApplicationDBContext : DbContext
{
public ApplicationDBContext(DbContextOptions<ApplicationDBContext> options) : base(options)
{
}
public DbSet<Product> Products { get; set; }
}Public Class ApplicationDBContext
Inherits DbContext
Public Sub New(ByVal options As DbContextOptions(Of ApplicationDBContext))
MyBase.New(options)
End Sub
Public Property Products() As DbSet(Of Product)
End ClassAdicionaremos o ProductDatatables.js dentro da pasta wwwroot/js para adicionar controles avançados, como paginação, pesquisa, etc.
// Initialize the DataTables plugin for the HTML element with 'productDatatable' ID
$(document).ready(function () {
$("#productDatatable").DataTable({
"processing": true, // Enable processing indicator
"serverSide": true, // Enable server-side processing
"ajax": {
"url": "/api/Product", // API endpoint for fetching product data
"type": "POST",
"datatype": "json"
},
"columnDefs": [{
// Define properties for columns
"targets": [0],
"visible": false, // Hide the 'Id' column
"searchable": false // Disable searching for the 'Id' column
}],
"columns": [
{ "data": "id", "name": "Id", "autoWidth": true },
{ "data": "productName", "name": "ProductName", "autoWidth": true },
{ "data": "productPrice", "name": "ProductPrice", "autoWidth": true },
{ "data": "productWeight", "name": "ProductWeight", "autoWidth": true },
{ "data": "productDescription", "name": "ProductDescription", "autoWidth": true },
{ "data": "productManufacturingDate", "name": "ProductManufacturingDate", "autoWidth": true },
{ "data": "productExpiryDate", "name": "ProductExpiryDate", "autoWidth": true },
{
// Add a 'Delete' button with an onclick event for deleting the product
"render": function (data, type, row) {
return "<a href='#' class='btn btn-danger' onclick=DeleteProduct('" + row.id + "');>Delete</a>";
}
}
]
});
});Agora, precisamos adicionar uma tabela HTML.
Escreva o seguinte código no arquivo index.cshtml para adicionar uma página HTML estática.
@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="productDatatable" class="table table-striped table-bordered dt-responsive nowrap" width="100%" cellspacing="0">
<thead>
<tr>
<th>Id</th>
<th>Product Name</th>
<th>Product Price</th>
<th>Product Weight</th>
<th>Product Description</th>
<th>Product Manufacturing Date</th>
<th>Product Expiry Date</th>
<th>Actions</th>
</tr>
</thead>
</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/ProductDatatable.js"></script>
}Precisamos adicionar o controlador.
Adicione um controlador de produto para criar solicitações de pull diretas e em endpoints.
[Route("api/[controller]")]
[ApiController]
public class ProductController : ControllerBase
{
private readonly ApplicationDBContext context;
public ProductController(ApplicationDBContext context)
{
this.context = context;
}
[HttpPost]
public IActionResult GetProducts()
{
try
{
var draw = Request.Form["draw"].FirstOrDefault();
var start = Request.Form["start"].FirstOrDefault();
var length = Request.Form["length"].FirstOrDefault();
var searchValue = Request.Form["search[value]"].FirstOrDefault();
int pageSize = length != null ? Convert.ToInt32(length) : 0;
int skip = start != null ? Convert.ToInt32(start) : 0;
int recordsTotal = 0;
var productData = context.Products.ToLis();
// Filtering data based on provided search value
if (!string.IsNullOrEmpty(searchValue))
{
productData = productData.Where(m => m.ProductName.Contains(searchValue)
|| m.ProductDescription.Contains(searchValue)
|| m.Id.ToString().Contains(searchValue)).ToList();
}
recordsTotal = productData.Count();
var data = productData.Skip(skip).Take(pageSize).ToList();
var jsonData = new { draw = draw, recordsFiltered = recordsTotal, recordsTotal = recordsTotal, data = data };
return Ok(jsonData);
}
catch (Exception)
{
throw;
}
}
}<Route("api/[controller]")>
<ApiController>
Public Class ProductController
Inherits ControllerBase
Private ReadOnly context As ApplicationDBContext
Public Sub New(context As ApplicationDBContext)
Me.context = context
End Sub
<HttpPost>
Public Function GetProducts() As IActionResult
Try
Dim draw = Request.Form("draw").FirstOrDefault()
Dim start = Request.Form("start").FirstOrDefault()
Dim length = Request.Form("length").FirstOrDefault()
Dim searchValue = Request.Form("search[value]").FirstOrDefault()
Dim pageSize As Integer = If(length IsNot Nothing, Convert.ToInt32(length), 0)
Dim skip As Integer = If(start IsNot Nothing, Convert.ToInt32(start), 0)
Dim recordsTotal As Integer = 0
Dim productData = context.Products.ToList()
' Filtering data based on provided search value
If Not String.IsNullOrEmpty(searchValue) Then
productData = productData.Where(Function(m) m.ProductName.Contains(searchValue) OrElse
m.ProductDescription.Contains(searchValue) OrElse
m.Id.ToString().Contains(searchValue)).ToList()
End If
recordsTotal = productData.Count()
Dim data = productData.Skip(skip).Take(pageSize).ToList()
Dim jsonData = New With {Key .draw = draw, Key .recordsFiltered = recordsTotal, Key .recordsTotal = recordsTotal, Key .data = data}
Return Ok(jsonData)
Catch ex As Exception
Throw
End Try
End Function
End ClassAqui, implementamos a paginação e a busca no lado do servidor.
Agora, precisamos configurar nosso banco de dados e adicionar a configuração à classe Program.cs. Se você estiver usando o .NET 5 ou uma versão anterior, talvez precise fazer isso na classe Startup.cs.
Primeiramente, adicione a seguinte string de conexão no arquivo appsettings.json.
"ConnectionStrings": {
"ProductDB": "Server=localserver\\SQLEXPRESS;Database=ProductDB;Trusted_Connection=True;MultipleActiveResultSets=true;TrustServerCertificate=True;"
}Agora, adicione o seguinte código à classe Program.cs.
public static void Main(string[] args)
{
var builder = WebApplication.CreateBuilder(args);
builder.Services.AddDbContext<ApplicationDBContext>(options =>
{
options.UseSqlServer(builder.Configuration.GetConnectionString("ProductDB"));
});
builder.Services.AddControllers();
// Add services to the container.
builder.Services.AddRazorPages();
var app = builder.Build();
// Configure the HTTP request pipeline.
if (!app.Environment.IsDevelopment())
{
app.UseExceptionHandler("/Error");
// The default HSTS value is 30 days.
app.UseHsts();
}
app.UseHttpsRedirection();
app.UseStaticFiles();
app.UseRouting();
app.UseAuthorization();
app.MapControllers();
app.MapRazorPages();
app.Run();
}Public Shared Sub Main(ByVal args() As String)
Dim builder = WebApplication.CreateBuilder(args)
builder.Services.AddDbContext(Of ApplicationDBContext)(Sub(options)
options.UseSqlServer(builder.Configuration.GetConnectionString("ProductDB"))
End Sub)
builder.Services.AddControllers()
' Add services to the container.
builder.Services.AddRazorPages()
Dim app = builder.Build()
' Configure the HTTP request pipeline.
If Not app.Environment.IsDevelopment() Then
app.UseExceptionHandler("/Error")
' The default HSTS value is 30 days.
app.UseHsts()
End If
app.UseHttpsRedirection()
app.UseStaticFiles()
app.UseRouting()
app.UseAuthorization()
app.MapControllers()
app.MapRazorPages()
app.Run()
End SubPrecisamos executar a migração, pois estamos usando uma abordagem "code-first".
Execute o seguinte comando no Console do Gerenciador de Pacotes.
Add-Migration initO comando acima criará uma migração. Agora precisamos aplicar essas migrações ao nosso banco de dados. Execute o seguinte comando no Console do Gerenciador de Pacotes.
Update-DatabaseO comando acima criará tabelas em nosso banco de dados. Adicione dados fictícios na tabela de produtos; Você pode gerar dados aleatórios a partir do Mockaroo .
Agora, compile e execute este aplicativo.
Podemos ver que temos uma interface de usuário muito interativa com controles de interação avançados.
Agora, a paginação é implementada no lado do servidor, conforme mostrado abaixo.
Os dados são então renderizados no lado do cliente com controles de interface de usuário avançados.
Você pode explorar mais a documentação do DataTables .NET clicando em " Explorar a documentação do DataTables .NET" .
IronXL - Biblioteca Excel for .NET é uma biblioteca que permite trabalhar com arquivos Excel em aplicações .NET . Ele pode criar planilhas do Excel , ler arquivos CSV , editar arquivos do Excel e exportar para o 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 8, 7, 6, 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 um código para exportar nossos dados para um arquivo do Excel.
Instale a biblioteca IronXL em nosso projeto digitando o seguinte comando no Console do Gerenciador de Pacotes.
Isso instalará o IronXL e as dependências necessárias em nosso projeto.
Vamos escrever um código para converter nossa lista de produtos em um arquivo do Excel.
public void ExportToExcel(List<Product> productList)
{
WorkBook wb = WorkBook.Create(ExcelFileFormat.XLSX); // Create a new workbook instance
WorkSheet ws = wb.DefaultWorkSheet; // Access the default worksheet
int rowCount = 1;
// Iterate over the product list and fill the worksheet
foreach (Product product in productList)
{
ws["A" + rowCount].Value = product.Id.ToString();
ws["B" + rowCount].Value = product.ProductName;
ws["C" + rowCount].Value = product.ProductDescription;
ws["D" + rowCount].Value = product.ProductPrice;
ws["E" + rowCount].Value = product.ProductWeight;
ws["F" + rowCount].Value = product.ProductManufacturingDate;
ws["G" + rowCount].Value = product.ProductExpiryDate;
rowCount++;
}
wb.SaveAs("product.xlsx"); // Save the workbook as an Excel file
}Public Sub ExportToExcel(ByVal productList As List(Of Product))
Dim wb As WorkBook = WorkBook.Create(ExcelFileFormat.XLSX) ' Create a new workbook instance
Dim ws As WorkSheet = wb.DefaultWorkSheet ' Access the default worksheet
Dim rowCount As Integer = 1
' Iterate over the product list and fill the worksheet
For Each product As Product In productList
ws("A" & rowCount).Value = product.Id.ToString()
ws("B" & rowCount).Value = product.ProductName
ws("C" & rowCount).Value = product.ProductDescription
ws("D" & rowCount).Value = product.ProductPrice
ws("E" & rowCount).Value = product.ProductWeight
ws("F" & rowCount).Value = product.ProductManufacturingDate
ws("G" & rowCount).Value = product.ProductExpiryDate
rowCount += 1
Next product
wb.SaveAs("product.xlsx") ' Save the workbook as an Excel file
End SubCriamos um arquivo Excel a partir da lista de uma maneira muito simples e fácil.
A IronXL oferece tutoriais completos sobre como criar arquivos XLSX , exemplos de código para leitura de arquivos Excel e documentação da API para usar sua API abrangente da melhor maneira possível.
Na otimização do desempenho do ASP.NET , confiamos exclusivamente na Only Core Software, garantindo um ambiente de desenvolvimento enxuto e eficiente. Utilizar o DataTables .NET como pacotes hospedados localmente aumenta ainda mais a capacidade de resposta, minimizando as dependências externas para um processamento de dados simplificado e exportação para o Excel. Além disso, contribuir com código de forma eficiente torna-se simples dentro desse ecossistema otimizado e autossuficiente.
IronPDF é uma solução projetada para converter páginas da web, URLs e HTML em documentos PDF . Os PDFs gerados mantêm a formatação original e os elementos estilísticos das páginas web de origem. Essa ferramenta é particularmente eficaz para criar versões em PDF de conteúdo da web, como relatórios e faturas.
using IronPdf;
class Program
{
static void Main(string[] args)
{
var renderer = new ChromePdfRenderer();
// 1. Convert HTML String to PDF
var htmlContent = "<h1>Hello, IronPDF!</h1><p>This is a PDF from an HTML string.</p>";
var pdfFromHtmlString = renderer.RenderHtmlAsPdf(htmlContent);
pdfFromHtmlString.SaveAs("HTMLStringToPDF.pdf");
// 2. Convert HTML File to PDF
var htmlFilePath = "path_to_your_html_file.html"; // Specify the path to your HTML file
var pdfFromHtmlFile = renderer.RenderHtmlFileAsPdf(htmlFilePath);
pdfFromHtmlFile.SaveAs("HTMLFileToPDF.pdf");
// 3. Convert URL to PDF
var url = "http://ironpdf.com"; // Specify the URL
var pdfFromUrl = renderer.RenderUrlAsPdf(url);
pdfFromUrl.SaveAs("URLToPDF.pdf");
}
}Imports IronPdf
Friend Class Program
Shared Sub Main(ByVal args() As String)
Dim renderer = New ChromePdfRenderer()
' 1. Convert HTML String to PDF
Dim htmlContent = "<h1>Hello, IronPDF!</h1><p>This is a PDF from an HTML string.</p>"
Dim pdfFromHtmlString = renderer.RenderHtmlAsPdf(htmlContent)
pdfFromHtmlString.SaveAs("HTMLStringToPDF.pdf")
' 2. Convert HTML File to PDF
Dim htmlFilePath = "path_to_your_html_file.html" ' Specify the path to your HTML file
Dim pdfFromHtmlFile = renderer.RenderHtmlFileAsPdf(htmlFilePath)
pdfFromHtmlFile.SaveAs("HTMLFileToPDF.pdf")
' 3. Convert URL to PDF
Dim url = "http://ironpdf.com" ' Specify the URL
Dim pdfFromUrl = renderer.RenderUrlAsPdf(url)
pdfFromUrl.SaveAs("URLToPDF.pdf")
End Sub
End ClassEm resumo, utilizar o DataTables .NET para processamento no servidor em projetos de repositórios de distribuição ASP.NET demonstra ser uma boa estratégia para lidar com grandes conjuntos de dados de forma eficiente. Essa abordagem garante um desempenho otimizado, transmitindo dados em blocos gerenciáveis, mitigando o uso de largura de banda e aprimorando a experiência do usuário. A integração do IronXL amplia ainda mais as capacidades do aplicativo, permitindo a exportação fácil de dados tabulares para o Excel para análise e geração de relatórios de dados abrangentes.
Ao adotar essas tecnologias, os desenvolvedores podem criar aplicativos da web que encontram um equilíbrio entre rica interatividade e eficiência de recursos, proporcionando aos usuários uma experiência perfeita e responsiva, especialmente em cenários que envolvem grandes conjuntos de dados. A IronXL oferece diversas opções de licenciamento para o IronXL , 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.
