La présentation des données est un aspect critique du développement web, et lorsqu'on traite des données tabulaires, avoir un tableau interactif et riche en fonctionnalités est essentiel. jQuery DataTables est une bibliothèque JavaScript puissante qui offre des fonctionnalités avancées pour créer des tableaux dynamiques et réactifs. Dans cet article, nous verrons comment intégrer et utiliser jQuery DataTables dans une application web ASP.NET pour améliorer la présentation des données tabulaires.
jQuery DataTables est un plugin jQuery léger et flexible pour gérer des données tabulaires. Il offre une large gamme de fonctionnalités, telles que le tri, la recherche et la pagination, ce qui en fait un choix idéal pour présenter de grands ensembles de données de manière conviviale.
Dans le traitement côté client, le navigateur est habilité à gérer l'ensemble de données localement. jQuery DataTables, grâce à ses fonctionnalités puissantes, permet une interaction dynamique et une manipulation des données directement dans le navigateur de l'utilisateur. Bien que cette approche fonctionne parfaitement pour les ensembles de données plus petits, elle peut rencontrer des défis lorsque les ensembles de données sont importants en raison de goulots d'étranglement potentiels en termes de performance et de consommation accrue de ressources.
Dans cet article, nous explorerons le traitement côté client dans une application de page Razor ASP.NET, en soulignant les avantages qu'il offre pour les ensembles de données plus petits et en fournissant des idées sur les considérations et optimisations potentielles pour garantir une expérience utilisateur fluide et réactive.
Cet article utilisera une application Web de page Razor ASP.NET ciblant .NET Framework 4.8. Vous pouvez utiliser Blazor, MVC, ou Web Forms, selon vos besoins.
L'approche Code-First sera utilisée dans cet article. Vous pouvez utiliser l'approche Database First selon vos préférences. Nous devons installer les paquets suivants pour utiliser l'approche Code First.
Installez les paquets ci-dessus en utilisant la commande Install-Package à partir de la console du Package Manager NuGet ou installez-les à partir de la solution du Package Manager NuGet en les recherchant.
Configurons notre projet en ajoutant la classe Modèle, la classe ApplicationDbContext, le Contrôleur, la chaîne de connexion, et la configuration des services dans le fichier Program.cs.
J'utilise la classe de modèle Employee pour cet exemple. Vous pouvez l'utiliser selon vos besoins.
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 ClassNous devons ajouter la classe ApplicationDbContext pour configurer 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 ClassAjoutez le EmployeeController pour créer le point d'accès.
[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 ClassIci, nous utilisons la méthode HttpGet, car nous allons récupérer l'ensemble des données du serveur côté client, et mettre en œuvre la pagination, la recherche et le tri côté client. Nous renvoyons un tableau JSON qui sera rendu côté client.
Ajouter la chaîne de connexion suivante dans le fichier appsettings.json.
"ConnectionStrings": {
"EmployeeDB": "Server=localserver\\SQLEXPRESS;Database=EmployeeDB;Trusted_Connection=True;MultipleActiveResultSets=true;TrustServerCertificate=True;"
}Ajoutez la ligne suivante dans la classe Program.cs sous la ligne webApplication.CreateBuilder() pour se connecter au serveur SQL.
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)L'étape suivante consiste à exécuter la migration car nous utilisons l'approche Code First. Exécutez la commande suivante dans la console du gestionnaire de packages.
Add-Migration initCette commande créera une migration. Maintenant, exécutez la commande suivante pour appliquer cette migration à la base de données.
update-databaseMaintenant que notre projet est configuré et que la base de données est prête, nous devons simplement ajouter la bibliothèque jQuery et les tables HTML pour rendre notre interface utilisateur prête. Nous avons utilisé SQL Server comme source de données dans cet exemple, mais vous pouvez utiliser toute autre base de données.
Nous devons ajouter la bibliothèque jQuery DataTables, qui est un plugin d'amélioration de table pour la bibliothèque JavaScript jQuery, dans notre projet. Nous pouvons l'ajouter en cliquant avec le bouton droit sur le projet, en sélectionnant 'Ajouter', puis en choisissant 'Ajouter une bibliothèque côté client'. Une petite fenêtre apparaîtra, où nous pourrons rechercher 'jquery datatables' et l'installer, comme montré ci-dessous :
Ajoutons un tableau HTML avec un corps de table vide. Nous ajouterons les en-têtes de colonnes requis lors de la configuration du jQuery DataTable. Ajoutez le code suivant au fichier 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>
}Nous devons ajouter le fichier EmployeeDatatable.js dans le dossier wwwroot/Js. Dans ce fichier, nous aurons un appel Ajax et des fonctionnalités avancées de jQuery DataTable comme la filtration, la pagination, la recherche, le tri, etc.
Créez un fichier EmployeeDatatable.js dans le dossier wwwroot/Js. Ajoutez le code suivant.
$(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 }
]
});
});Nous avons utilisé la bibliothèque jQuery DataTables riche en fonctionnalités. Ce puissant plugin jQuery nous permet d'implémenter des fonctionnalités avancées côté client avec un minimum d'effort.
Maintenant, construisez et exécutez cette application.
Nous pouvons voir que nous avons une interface utilisateur très interactive prête grâce à jQuery dans ASP.NET. Les données affichées sont les suivantes :
Maintenant, la pagination est implémentée côté client, donc les données complètes sont envoyées par le serveur comme ci-dessous :
Nous pouvons rechercher, trier et changer de page, tout sera effectué côté client comme montré ci-dessous :
IronXL pour la manipulation des fichiers Excel .NET est une bibliothèque qui vous permet de travailler avec des fichiers Excel dans des applications .NET. Elle peut créer, lire, modifier et enregistrer des documents Excel dans divers formats comme XLS, XLSX, CSV, et TSV. Elle ne nécessite pas l'installation de Microsoft Office ou d'Excel Interop. Elle prend en charge .NET 5, Core, Framework, et Azure.
Nous avons souvent besoin d'exporter des données dans des fichiers Excel ou CSV. IronXL est le meilleur choix dans ce cas. Maintenant, nous allons écrire du code pour exporter nos données dans un fichier Excel.
Installez la bibliothèque IronXL dans votre projet en entrant la commande suivante dans la console du Package Manager.
Cela installera IronXL et les dépendances requises dans notre projet. Vous pouvez également la télécharger directement depuis IronXL NuGet Package.
Écrivons le code pour convertir notre liste d'employés en un fichier 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 SubNous avons créé un fichier Excel à partir d'une liste de manière simple et facile.
IronXL fournit des tutoriels complets sur la création de fichiers XLSX, des exemples de code pour lire des fichiers Excel, et une documentation détaillée pour vous aider à utiliser au mieux son API complète.
En conclusion, jQuery DataTables a émergé comme un atout puissant pour transformer la présentation des données tabulaires dans les applications web ASP.NET. Sa nature légère mais riche en fonctionnalités facilite la création de tableaux interactifs, mettant le tri, la recherche et la pagination au premier plan. Nous avons exploré les nuances du traitement côté client, tirant parti des capacités du navigateur pour les ensembles de données plus petits tout en reconnaissant les défis potentiels avec des volumes de données plus importants. Le guide étape par étape sur la configuration d'une application de Page Razor ASP.NET et l'intégration de jQuery DataTables fournit aux développeurs des insights pratiques. De plus, l'introduction de IronXL comme solution transparente pour les tâches liées à Excel ajoute une couche précieuse à la boîte à outils, permettant une exportation efficace des données. Avec ces outils, les développeurs peuvent améliorer l'expérience utilisateur en présentant les données de manière attrayante et accessible.
IronXL propose diverses options de licences, selon le nombre de développeurs, de projets, et les besoins de redistribution. Les licences sont perpétuelles et incluent une assistance et des mises à jour gratuites.
Jacob Mellor est directeur de la technologie chez Iron Software et un ingénieur visionnaire pionnier de la technologie C# PDF. En tant que développeur à l'origine de la base de code centrale d'Iron Software, il a façonné l'architecture des produits de l'entreprise depuis sa création, la transformant aux côtés du PDG Cameron Rimington en une entreprise de plus de 50 personnes au service de la NASA, de Tesla et d'agences gouvernementales mondiales.
IronPDF fait partie de IRONSUITE
10 API .NET pour vos documents
Lorsque vous avez besoin que votre PDF ressemble à HTML, rapidement.
