Die Datenpräsentation ist ein entscheidender Aspekt der Webentwicklung. Wenn es um tabellarische Daten geht, ist eine interaktive und funktionsreiche Tabelle unerlässlich. jQuery DataTables ist eine leistungsstarke JavaScript-Bibliothek, die erweiterte Funktionen zur Erstellung dynamischer und reaktionsschneller Tabellen bietet. In diesem Artikel werden wir erkunden, wie man jQuery DataTables in eine ASP.NET-Webanwendung integriert und verwendet, um die Präsentation tabellarischer Daten zu verbessern.
jQuery DataTables ist ein leichtgewichtiger, flexibler und funktionsreicher jQuery-Plugin zur Verarbeitung tabellarischer Daten. Es bietet eine Vielzahl von Funktionen, wie Sortieren, Suchen und Paginierung, was es zur idealen Wahl macht, um große Datensätze benutzerfreundlich zu präsentieren.
Bei der clientseitigen Verarbeitung ist der Browser in der Lage, den Datensatz lokal zu bearbeiten. jQuery DataTables ermöglicht durch seine leistungsstarken Funktionen eine dynamische Interaktion und Bearbeitung der Daten direkt im Browser des Benutzers. Während dieser Ansatz nahtlos bei kleineren Datensätzen funktioniert, kann er bei umfangreichen Datensätzen auf Herausforderungen stoßen, aufgrund möglicher Leistungsengpässe und erhöhtem Ressourcenverbrauch.
In diesem Artikel werden wir die clientseitige Verarbeitung in einer ASP.NET Razor Page Anwendung erkunden, wobei wir die Vorteile für kleinere Datensätze hervorheben sowie Einblicke in potenzielle Überlegungen und Optimierungen geben, um ein reibungsloses und reaktionsfreudiges Nutzererlebnis zu gewährleisten.
Dieser Artikel verwendet eine ASP.NET Razor Page-Webanwendung, die auf .NET Framework 4.8 abzielt. Sie können Blazor, MVC oder Web Forms nach Ihren Anforderungen verwenden.
Der Code-First-Ansatz wird in diesem Artikel verwendet. Sie können den Database-First-Ansatz nach Belieben verwenden. Wir müssen die folgenden Pakete installieren, um den Code First-Ansatz zu verwenden.
Installieren Sie die oben genannten Pakete mit dem Install-Package Befehl aus der NuGet-Paketmanager-Konsole oder installieren Sie sie über die NuGet-Paketmanager-Lösung, indem Sie sie suchen.
Richten wir unser Projekt ein, indem wir die Modellklasse, die ApplicationDbContext-Klasse, den Controller, die Verbindungszeichenfolge und die Dienste-Konfiguration in der Program.cs hinzufügen.
Ich verwende die Employee Modellklasse für dieses Beispiel. Sie können sie nach Belieben verwenden.
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 ClassWir müssen die ApplicationDbContext Klasse hinzufügen, um das Entity Framework einzurichten.
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 ClassFügen Sie die EmployeeController hinzu, um den Endpunkt zu erstellen.
[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 ClassHier verwenden wir die HttpGet Methode, da wir die vollständigen Daten vom Server auf der Clientseite abrufen und Paginierung, Suche und Sortierung auf der Clientseite implementieren werden. Wir geben ein JSON-Array zurück, das auf der Clientseite gerendert wird.
Fügen Sie die folgende Verbindungszeichenfolge in die appsettings.json-Datei ein.
"ConnectionStrings": {
"EmployeeDB": "Server=localserver\\SQLEXPRESS;Database=EmployeeDB;Trusted_Connection=True;MultipleActiveResultSets=true;TrustServerCertificate=True;"
}Fügen Sie in der Program.cs-Klasse unter der Zeile webApplication.CreateBuilder() die folgende Zeile hinzu, um eine Verbindung mit dem SQL Server herzustellen.
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)Der nächste Schritt ist das Ausführen der Migration, da wir den Code First-Ansatz verwenden. Führen Sie den folgenden Befehl in der Package Manager-Konsole aus.
Add-Migration initDieser Befehl erstellt eine Migration. Führen Sie nun den folgenden Befehl aus, um diese Migration auf die Datenbank anzuwenden.
update-databaseDa unser Projekt eingerichtet ist und die Datenbank bereit ist, müssen wir nur die jQuery-Bibliothek und HTML-Tabellen hinzufügen, um unsere Benutzeroberfläche bereitzustellen. Wir haben in diesem Beispiel SQL Server als Datenquelle verwendet, Sie können jedoch eine andere Datenbank nutzen.
Wir müssen die jQuery DataTables-Bibliothek hinzufügen, die ein Tabellenverbesserungs-Plugin für die jQuery-JavaScript-Bibliothek ist, in unser Projekt. Wir fügen es über einen Rechtsklick auf das Projekt und Auswahl von "Hinzufügen" und dann "Clientseitige Bibliothek hinzufügen" hinzu. Ein kleines Fenster wird angezeigt, in dem wir nach "jquery datatables" suchen und es installieren können, wie unten gezeigt:
Fügen wir eine HTML-Tabelle mit leerem Tabellenkörper hinzu. Wir werden die erforderlichen Spaltenüberschriften beim Einrichten des jQuery DataTable hinzufügen. Fügen Sie den folgenden Code zur Index.cshtml-Datei hinzu.
@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>
}Wir müssen die Datei EmployeeDatatable.js in den wwwroot/Js Ordner hinzufügen. In dieser Datei werden wir einen Ajax-Aufruf und erweiterte Funktionen der jQuery DataTable wie Filterung, Paginierung, Suchen, Sortieren usw. haben.
Erstellen Sie eine EmployeeDatatable.js-Datei im wwwroot/Js Ordner. Fügen Sie folgenden Code hinzu.
$(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 }
]
});
});Wir haben die funktionsreiche jQuery DataTables-Bibliothek genutzt. Dieses leistungsstarke jQuery-Plugin ermöglicht es uns, erweiterte Funktionen auf der Clientseite mit minimalem Aufwand zu implementieren.
Erstellen und führen Sie nun diese Anwendung aus.
Wir können sehen, dass wir eine sehr interaktive Benutzeroberfläche mit Hilfe von jQuery in ASP.NET bereit haben. Die angezeigten Daten sind wie folgt:
Jetzt ist die Paginierung auf der Clientseite implementiert, deshalb werden die vollständigen Daten wie unten gezeigt vom Server gesendet:
Wir können suchen, sortieren und die Seite wechseln, alles wird auf der Clientseite wie unten gezeigt durchgeführt:
IronXL for .NET Excel-Dateiverarbeitung ist eine Bibliothek, die es Ihnen ermöglicht, mit Excel-Dateien in .NET-Anwendungen zu arbeiten. Es kann Excel-Dokumente in verschiedenen Formaten wie XLS, XLSX, CSV und TSV erstellen, lesen, bearbeiten und speichern. Es erfordert weder die Installation von Microsoft Office noch von Excel Interop. Es unterstützt .NET 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. Jetzt werden wir Code schreiben, um unsere Daten in eine Excel-Datei zu exportieren.
Installieren Sie die IronXL-Bibliothek in Ihrem Projekt, indem Sie den folgenden Befehl in der Package Manager-Konsole eingeben.
Dies wird IronXL und die erforderlichen Abhängigkeiten in unserem Projekt installieren. Sie können sie auch direkt von IronXL NuGet-Paket herunterladen.
Lassen Sie uns Code schreiben, um unsere Mitarbeiterliste in eine Excel-Datei zu konvertieren.
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 SubWir haben auf einfache und unkomplizierte Weise eine Excel-Datei aus einer Liste erstellt.
IronXL bietet umfassende Tutorials zur Erstellung von XLSX-Dateien, Codebeispiele zum Lesen von Excel-Dateien und detaillierte Dokumentation, um Ihnen zu helfen, die umfassende API bestmöglich zu nutzen.
Abschließend lässt sich sagen, dass jQuery DataTables als leistungsstarkes Werkzeug erschienen ist, um die Präsentation von tabellarischen Daten in ASP.NET-Webanwendungen zu transformieren. Sein leichtgewichtiges, aber funktionsreiches Wesen erleichtert die Erstellung interaktiver Tabellen und bringt Sortierung, Suche und Paginierung in den Vordergrund. Wir haben die Nuancen der clientseitigen Verarbeitung erforscht und die Möglichkeiten des Browsers für kleinere Datensätze genutzt, während wir potenzielle Herausforderungen bei größeren Datenmengen anerkannt haben. Die Schritt-für-Schritt-Anleitung zur Einrichtung einer ASP.NET Razor Page-Anwendung und der Integration von jQuery DataTables bietet Entwicklern praktische Einblicke. Produktcontroller hinzufügen zur Erstellung des Endpunkts und Abruf von Pull-Anfragen. Mit diesen Werkzeugen können Entwickler das Benutzererlebnis verbessern, indem sie Daten auf eine überzeugende und zugängliche Weise präsentieren.
IronXL bietet verschiedene Lizenzierungsoptionen an, abhängig von der Anzahl der Entwickler, Projekte und Neuverteilungserfordernissen. 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.
