ASP.NET-Entwickler suchen häufig nach effizienten Wegen, um tabellarische Daten oder HTML-Tabellen mit erweiterten Funktionen wie Sortierung, Suche und Paginierung darzustellen. DataTables.NET ist eine leistungsstarke jQuery-, JavaScript-Bibliothek und ein hochflexibles Tool, das die Erstellung von interaktiven und funktionsreichen Tabellen in Webanwendungen erleichtert. In diesem Artikel werden wir untersuchen, wie man DataTables.NET-Distributionsdateien, eine tabellenverbessernde Bibliothek für serverseitige Verarbeitung, in ein ASP.NET-Projekt integriert, um die Darstellung und Benutzererfahrung von Tabellendaten zu verbessern.
DataTables.NET ist eine jQuery JavaScript-Bibliothek, die es Ihnen ermöglicht, interaktive Tabellen in .NET-Anwendungen zu erstellen und zu manipulieren. Es basiert auf dem jQuery DataTables-Plug-in, das umfassende API-Funktionen wie Paginierung, Sortierung, Filterung und Scrollen für dynamische sowie statische HTML-Tabellen bietet. Es handelt sich um eine tabellenverbessernde Bibliothek, die mit verschiedenen Datenquellen wie SQL-Datenbanken, AJAX oder In-Memory-Objekten arbeiten kann.
Betrachten Sie ein Szenario, in dem Sie einen API-Endpunkt haben, der einen umfangreichen Datensatz von Produkten liefert. Der Standardansatz besteht darin, dass jQuery DataTables einen AJAX-Aufruf an diese API macht, um eine Liste von Produkten im JSON-Format abzurufen und eine HTML-Tabelle zu rendern. Dies wird als clientseitige Verarbeitung bezeichnet, die für kleinere Datensätze effizient ist, die typischerweise von 100 bis 1000 Datensätzen reichen. Was passiert jedoch, wenn der Datensatz auf 10.000 Datensätze oder mehr anwächst?
Beim Umgang mit einer erheblichen Anzahl von Datensätzen wird es unpraktisch, den gesamten Datensatz in einem Rutsch an den Browser zu senden. Das gleichzeitige Übertragen von 10.000 Datensätzen ist nicht nur verschwenderisch in Bezug auf die Bandbreite, sondern belastet auch die Browserressourcen. In solchen Fällen wird ein alternativer Ansatz, die serverseitige Verarbeitung, entscheidend zur Optimierung der Leistung.
Bei der serverseitigen Verarbeitung überträgt die API nicht den gesamten Datensatz, sondern Daten in verwaltbaren Teilen, die typischerweise mit ca. 50 Datensätzen pro Seite paginiert sind. Dadurch verbessert sich die Ladezeit erheblich, da jQuery DataTables nun eine überschaubare Anzahl von Datensätzen (~50) lädt, anstatt den gesamten Datensatz auf einmal zu verarbeiten. Dieser Ansatz reduziert die CPU- und Bandbreitenauslastung und schafft eine effizientere Interaktion zwischen der API und der DataTable.
In diesem Artikel werden wir die Implementierung der serverseitigen Verarbeitung in einer ASP.NET Razor Page-Anwendung untersuchen und zeigen, wie umfangreiche Datensätze effizient gehandhabt und angezeigt werden können, während die Gesamtleistung Ihrer Webanwendung verbessert wird.
Um zu beginnen, müssen wir die DataTables.NET Client-Seitenbibliothek zu unserem Projekt hinzufügen. Dieser Artikel wird das ASP.NET Core Web App (Razor Pages)-Projekt mit .NET 8 verwenden. Sie können jedes Web App-Projekt gemäß Ihren Anforderungen verwenden.
Um eine Client-Seitenbibliothek hinzuzufügen, klicken Sie mit der rechten Maustaste auf Solution>Add> Client Side Library und suchen Sie nach Datentabellen, wie unten gezeigt.
Nun müssen wir Modellklasse, DB-Kontext, Controller, HTML-Tabelle und AJAX-Aufruf hinzufügen.
Aber davor müssen wir EntityFramework NuGet-Pakete installieren, um unsere Anwendung mit der Datenbank zu verbinden. Dieser Artikel verwendet den Code First-Ansatz; Sie können jedoch Database First nach Ihren Präferenzen verwenden.
Installieren Sie die folgenden lokal gehosteten Pakete:
Installieren Sie das obige Paket, indem Sie das install-package-Kommando in der NuGet Package Manager-Konsole verwenden, oder installieren Sie es aus der NuGet Package Manager-Lösung durch Suchen danach.
Ich verwende die Produktmodellklasse für dieses Beispiel; Sie können sie nach Ihrem Bedarf verwenden.
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 ClassWir werden den ProductDatatables.js im wwwroot/js-Ordner hinzufügen, um erweiterte Steuerelemente wie Paginierung, Suche usw. hinzuzufügen.
// 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>";
}
}
]
});
});Nun müssen wir eine HTML-Tabelle hinzufügen.
Schreiben Sie den folgenden Code in die index.cshtml-Datei, um eine statische HTML-Seite hinzuzufügen.
@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>
}Wir müssen den Controller hinzufügen.
Produktcontroller hinzufügen, um Endpunkte zu erstellen und Pull-Anfragen direkt abzurufen.
[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 ClassHier haben wir Paginierung & Suche auf der Serverseite implementiert.
Nun müssen wir unsere Datenbank einrichten und Konfiguration zur Program.cs-Klasse hinzufügen. Wenn Sie .NET 5 oder eine niedrigere Version verwenden, müssen Sie es möglicherweise in der Startup.cs-Klasse tun.
Fügen Sie zuerst den folgenden Verbindungstring in die appsettings.json-Datei ein.
"ConnectionStrings": {
"ProductDB": "Server=localserver\\SQLEXPRESS;Database=ProductDB;Trusted_Connection=True;MultipleActiveResultSets=true;TrustServerCertificate=True;"
}Fügen Sie nun den folgenden Code zur Program.cs-Klasse hinzu.
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 SubWir müssen die Migration ausführen, da wir einen Code-First-Ansatz verwenden.
Führen Sie den folgenden Befehl in der Package Manager-Konsole aus.
Add-Migration initDer obige Befehl wird eine Migration erstellen. Nun müssen wir diese Migrationen auf unsere Datenbank anwenden. Führen Sie den folgenden Befehl in der Package Manager-Konsole aus.
Update-DatabaseDer obige Befehl wird Tabellen in unserer Datenbank erstellen. Fügen Sie Dummy-Daten in die Produkttabelle ein; Sie können zufällige Daten von Mockaroo generieren.
Erstellen und führen Sie nun diese Anwendung aus.
Wir können sehen, dass wir eine sehr interaktive Benutzeroberfläche mit erweiterten Interaktionssteuerelementen haben.
Nun ist die Paginierung auf der Serverseite implementiert, wie unten gezeigt.
Die Daten werden dann auf der Client-Seite mit reichhaltiger UI-Kontrolle gerendert.
Sie können mehr aus der DataTables.NET-Dokumentation erfahren, indem Sie auf explore DataTables.NET documentation klicken.
IronXL - Excel-Bibliothek für .NET ist eine Bibliothek, die es Ihnen ermöglicht, mit Excel-Dateien in .NET-Anwendungen zu arbeiten. Sie kann Excel-Tabellenkalkulationen erstellen, CSV-Dateien lesen, Excel-Dateien bearbeiten und nach Excel exportieren in verschiedenen Formaten wie XLS, XLSX, CSV und TSV. Es erfordert nicht, dass Microsoft Office oder Excel Interop installiert sind. Es unterstützt .NET 8, 7, 6, 5, Core, Framework, und Azure.
Wir haben oft die Anforderung, Daten in Excel oder CSV-Dateien zu exportieren. IronXL ist in diesem Fall die beste Wahl. Nun werden wir einen Code schreiben, um unsere Daten in eine Excel-Datei zu exportieren.
Installieren Sie die IronXL-Bibliothek in unserem Projekt, indem Sie den folgenden Befehl in die Package Manager-Konsole eingeben.
Dies wird IronXL und die erforderlichen Abhängigkeiten in unserem Projekt installieren.
Lassen Sie uns einen Code schreiben, um unsere Produktliste in eine Excel-Datei umzuwandeln.
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 SubWir haben eine Excel-Datei aus der Liste auf sehr einfache und leichte Weise erstellt.
IronXL bietet umfassende Tutorials zum Erstellen von XLSX-Dateien, Codebeispiele zum Lesen von Excel, und API-Dokumentation, um seine umfassende API so gut wie möglich zu nutzen.
Bei der Optimierung der ASP.NET-Leistung verlassen wir uns ausschließlich auf Only Core Software und gewährleisten eine schlanke und effiziente Entwicklungsumgebung. Die Nutzung von DataTables.NET als lokal gehostete Pakete steigert zudem die Reaktionsfähigkeit, minimiert externe Abhängigkeiten für eine reibungslose Datenverarbeitung und Excel-Export. Darüber hinaus wird das effiziente Beitragen von Code in diesem optimierten und eigenständigen Ökosystem nahtlos.
IronPDF ist eine Lösung, die entworfen wurde, um Webseiten, URLs und HTML in PDF-Dokumente umzuwandeln. Die generierten PDFs bewahren die ursprüngliche Formatierung und stilistische Elemente der Quellwebseiten. Dieses Tool ist besonders effektiv für die Erstellung von PDF-Darstellungen von webbasierten Inhalten wie Berichten und Rechnungen.
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 ClassZusammenfassend erweist sich die Nutzung von DataTables.NET für die serverseitige Verarbeitung in ASP.NET-Verteilungs-Repo-Projekten als gute Strategie für den effizienten Umgang mit umfangreichen Datensätzen. Dieser Ansatz gewährleistet eine optimierte Leistung, indem Daten in handhabbare Teile übermittelt werden, wodurch die Bandbreitennutzung verringert und die Benutzererfahrung verbessert wird. Die Integration von IronXL erweitert die Fähigkeiten der Anwendung weiter und ermöglicht den mühelosen Export von Tabellendaten zu Excel für umfassende Datenanalyse und Berichterstattung.
Durch die Nutzung dieser Technologien können Entwickler Webanwendungen erstellen, die ein Gleichgewicht zwischen reichhaltiger Interaktivität und Ressourceneffizienz liefern und den Benutzern eine nahtlose und reaktionsfähige Erfahrung bieten, insbesondere in Szenarien, in denen große Datensätze involviert sind. IronXL bietet verschiedene Lizenzierungsoptionen für IronXL, abhängig von der Anzahl der Entwickler, Projekte und Vertriebsanforderungen. Die Lizenzen sind unbefristet und beinhalten kostenlosen Support sowie Updates.
Jacob Mellor ist Chief Technology Officer bei Iron Software und ein visionärer Ingenieur, der Pionierarbeit in der C# PDF-Technologie leistet. Als der ursprüngliche Entwickler hinter der Kern-Codebasis von Iron Software hat er die Produktarchitektur des Unternehmens seit seiner Gründung geprägt und es zusammen mit CEO Cameron Rimington in ein Unternehmen mit mehr als 50 Mitarbeitern verwandelt, das die NASA, Tesla und globale Regierungsbehörden beliefert.
IronPDF ist ein Teil der IRONSUITE
10 .NET-API-Produkte für Ihre Bürodokumente
Wenn Ihr PDF wie HTML aussehen soll, schnell.
