jQuery-Datentabelle (Wie es für Entwickler funktioniert)

Die Präsentation von Daten ist ein wichtiger Aspekt der Webentwicklung, und wenn man mit tabellarischen Daten arbeitet, ist eine interaktive und funktionsreiche Tabelle unerlässlich. jQuery DataTables ist eine leistungsstarke JavaScript-Bibliothek, die erweiterte Funktionen für die Erstellung dynamischer und reaktionsfähiger Tabellen bietet. In diesem Artikel erfahren Sie, wie Sie jQuery DataTables in eine Anwendung integrieren und verwenden können ASP.NET webanwendung zur Verbesserung der Darstellung von Tabellendaten.

Wie verwendet man jQuery DataTables in einer ASP.NET-Webanwendung?

1. Erstellen oder öffnen Sie eine Webanwendung.

2. Installieren Sie Entity Framework-Pakete.

3. Modell, DB-Kontext und Controller hinzufügen.

4. DB Connection String hinzufügen und Konfiguration einrichten.

5. Migration hinzufügen und Datenbank aktualisieren.

6. Client-seitige Bibliothek von jQuery DataTables hinzufügen.

7. HTML-Tabelle und JavaScript-Code hinzufügen.

8. Erstellen und Ausführen der Anwendung.

9. Daten in Excel exportieren mit IronXL.

Was ist jQuery DataTables?

jQuery DataTables ist ein leichtgewichtiges, flexibles und funktionsreiches jQuery-Plugin für den Umgang mit tabellarischen Daten. Sie bietet eine breite Palette von Funktionen wie Sortierung, Suche, Paginierung und vieles mehr und ist damit die ideale Wahl für die benutzerfreundliche Darstellung großer Datenmengen.

Client-seitige Verarbeitung

Bei der clientseitigen Verarbeitung ist der Browser in der Lage, den Datensatz lokal zu verarbeiten. jQuery DataTables ermöglicht durch seine leistungsstarken Funktionen eine dynamische Interaktion und Manipulation der Daten direkt im Browser des Benutzers. Während dieser Ansatz bei kleineren Datenmengen problemlos funktioniert, kann er bei umfangreichen Datenmengen aufgrund potenzieller Leistungsengpässe und eines erhöhten Ressourcenverbrauchs zu Problemen führen.

In diesem Artikel wird die clientseitige Verarbeitung in einer ASP.NET Razor Page-Anwendung untersucht. Dabei werden die Vorteile hervorgehoben, die sie für kleinere Datensätze bietet, und es werden Einblicke in mögliche Überlegungen und Optimierungen gegeben, um eine reibungslose und reaktionsschnelle Benutzererfahrung zu gewährleisten.

Erste Schritte mit jQuery DataTables in einer ASP.NET-Webanwendung

In diesem Artikel wird eine ASP.NET Razor Page-Webanwendung für das .NET-Framework 4.8 verwendet. Sie können Blazor, MVC oder Web Forms verwenden, je nach Ihren Anforderungen.

In diesem Artikel wird der Code-First-Ansatz verwendet. Sie können den "Database First Approach" je nach Ihren Wünschen verwenden. Für die Verwendung des Code-First-Ansatzes müssen wir die folgenden Pakete installieren.

1. Microsoft.EntityFrameworkCore

2. Microsoft.EntityFrameworkCore.Entwurf

3. Microsoft.EntityFrameworkCore.SqlServer

4. Microsoft.EntityFrameworkCore.Tools

   Installieren Sie die oben genannten Pakete mit dem Befehl "Install-Package" aus der NuGet-Paketmanager-Konsole oder installieren Sie sie aus der NuGet-Paketmanager-Lösung, indem Sie nach ihnen suchen.

   Richten wir unser Projekt ein, indem wir die Model-Klasse, die ApplicationDBContext-Klasse, den Controller, die Verbindungszeichenfolge und die Dienstekonfiguration in der Datei Program.cs hinzufügen.

Modellklasse hinzufügen

Ich verwende die Modellklasse "Mitarbeiter" für dieses Beispiel, Sie können sie je nach Ihren Anforderungen 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 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

ApplicationDbContext-Klasse hinzufügen

Wir müssen die Klasse ApplicationDbContext 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 : 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

Mitarbeiter-Controller hinzufügen

Fügen Sie den "EmployeeController" für die Erstellung des Endpunkts hinzu.

[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)
        {
            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)
        {
            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
			Throw
		End Try
	End Function
End Class

Hier verwenden wir die Methode "HTTPGet", da wir die vollständigen Daten vom Server auf der Client-Seite abrufen und Paginierung, Suche und Sortierung auf der Client-Seite implementieren werden. Wir geben ein JSON-Array zurück, das auf der Client-Seite gerendert wird.

Verbindungszeichenfolge hinzufügen

Fügen Sie die folgende Verbindungszeichenfolge in die Datei appsettings.json ein.

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

Fügen Sie die folgende Zeile in der Klasse Program.cs unter "webApplication.CreateBuilder" ein()zeile zur Verbindung mit 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)

Migration durchführen

Der nächste Schritt ist die Durchführung der Migration, da wir den Code-First-Ansatz verwenden. Führen Sie den folgenden Befehl in der Paketmanager-Konsole aus.

Add-Migration init

Mit diesem Befehl wird eine Migration erstellt. Führen Sie nun den folgenden Befehl aus, um diese Migration auf die Datenbank anzuwenden.

update-database

Nun, da unser Projekt fertig ist und die Datenbank bereit ist, müssen wir nur noch die jQuery-Bibliothek und HTML-Tabellen hinzufügen, um unsere Benutzeroberfläche fertigzustellen. Wir haben in diesem Beispiel SQL Server als Datenquelle verwendet, aber Sie können auch jede andere Datenbank verwenden.

JQuery DataTables-Bibliothek hinzufügen

Wir müssen die jQuery DataTables-Bibliothek, ein Tabellenerweiterungs-Plugin für die jQuery JavaScript-Bibliothek, zu unserem Projekt hinzufügen. Wir können sie hinzufügen, indem wir mit der rechten Maustaste auf das Projekt klicken, "Hinzufügen" wählen und dann "Client-seitige Bibliothek hinzufügen" auswählen. Es erscheint ein kleines Fenster, in dem wir nach "jquery datatables" suchen und es installieren können, wie unten gezeigt:

HTML-Tabelle hinzufügen

Fügen wir eine HTML-Tabelle mit einem leeren Tabellenkörper hinzu. Wir werden die erforderlichen Spaltenüberschriften beim Einrichten der jQuery DataTable hinzufügen. Fügen Sie den folgenden Code in die Datei Index.cshtml ein.

@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 Ordner "wwwwroot/Js" einfügen. In dieser Datei werden wir einen Ajax-Aufruf und erweiterte Funktionen der jQuery DataTable wie Filtern, Paginieren, Suchen, Sortieren usw. haben.

Datei EmployeeDatatable.js erstellen

Erstellen Sie eine Datei EmployeeDatatable.js im Ordner "wwwwroot/Js". Fügen Sie den 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 }
        ]
    });
});

$(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 verwendet. Dieses leistungsstarke jQuery-Plugin ermöglicht es uns, mit minimalem Aufwand erweiterte Funktionen auf der Client-Seite zu implementieren.

Erstellen Sie nun diese Anwendung und führen Sie sie aus.

Ausgabe

Wie wir sehen können, haben wir mit Hilfe von jQuery in ASP.NET eine sehr interaktive Benutzeroberfläche erstellt. Die angezeigten Daten sind wie folgt:

Jetzt wird die Paginierung auf der Client-Seite implementiert, daher werden die vollständigen Daten vom Server wie unten dargestellt gesendet:

Ausgabe UI

Wir können die Seite suchen, sortieren und ändern, alles wird auf der Client-Seite durchgeführt, wie unten gezeigt:

Einführung in IronXL

IronXL 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 keine Installation von Microsoft Office oder 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. Nun werden wir einen Code schreiben, um unsere Daten in eine Excel-Datei zu exportieren.

IronXL installieren

Installieren Sie die IronXL-Bibliothek in Ihrem Projekt, indem Sie den folgenden Befehl in der Paketmanager-Konsole eingeben.

Install-Package IronXL.Excel

Dadurch werden IronXL und die erforderlichen Abhängigkeiten in unserem Projekt installiert. Sie können es auch direkt herunterladen von diese download-Link.

Daten nach Excel exportieren

Lassen Sie uns Code schreiben, um unsere Mitarbeiterliste in eine Excel-Datei zu konvertieren.

public void ExportToExcel(List<Employee> employeeList)
{
    WorkBook wb = WorkBook.Create(ExcelFileFormat.XLSX);
    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
    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++;
    }

    wb.SaveAs("Employee.xlsx");
}

public void ExportToExcel(List<Employee> employeeList)
{
    WorkBook wb = WorkBook.Create(ExcelFileFormat.XLSX);
    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
    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++;
    }

    wb.SaveAs("Employee.xlsx");
}

Public Sub ExportToExcel(ByVal employeeList As List(Of Employee))
	Dim wb As WorkBook = WorkBook.Create(ExcelFileFormat.XLSX)
	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
	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

	wb.SaveAs("Employee.xlsx")
End Sub

Wir haben auf einfache Art und Weise eine Excel-Datei aus einer Liste erstellt.

IronXL bietet umfassende tutorials, code-Beispieleund dokumentation um Sie bei der optimalen Nutzung der umfassenden API zu unterstützen.

Schlussfolgerung

Zusammenfassend lässt sich sagen, dass sich jQuery DataTables als leistungsstarke Lösung für die Darstellung von Tabellendaten in ASP.NET-Webanwendungen erwiesen hat. Die leichtgewichtige und dennoch funktionsreiche Software erleichtert die Erstellung interaktiver Tabellen, wobei Sortieren, Suchen und Paginieren im Vordergrund stehen. Wir untersuchten die Feinheiten der clientseitigen Verarbeitung, wobei wir die Möglichkeiten des Browsers für kleinere Datensätze nutzten, aber auch die möglichen Herausforderungen bei größeren Datenmengen berücksichtigten. Die Schritt-für-Schritt-Anleitung zur Einrichtung einer ASP.NET Razor Page-Anwendung und zur Integration von jQuery DataTables bietet Entwicklern einen praktischen Einblick. Die Einführung von IronXL als nahtlose Lösung für Excel-bezogene Aufgaben erweitert das Toolkit um eine wertvolle Ebene, die einen effizienten Datenexport ermöglicht. Mit diesen Tools können Entwickler die Benutzererfahrung verbessern, indem sie Daten auf ansprechende und zugängliche Weise präsentieren.

IronXL bietet verschiedene Lizenzierungsoptionen an, die von der Anzahl der Entwickler, den Projekten und den Anforderungen an die Weiterverbreitung abhängen. Die Lizenzen sind unbefristet und beinhalten kostenlosen Support und Updates.