Datatables .NET (Comment ça fonctionne pour les développeurs)

Les développeurs ASP.NET recherchent souvent des moyens efficaces de présenter des données tabulaires ou des tableaux HTML avec des fonctions avancées telles que le tri, la recherche et la pagination. DataTables.NET est une puissante bibliothèque JavaScript jQuery et un outil extrêmement flexible qui facilite la création de tableaux interactifs et riches en fonctionnalités dans les applications web. Dans cet article, nous verrons comment intégrer les fichiers de distribution DataTables.NET, une bibliothèque d'amélioration des tableaux pour le traitement côté serveur, dans un projet ASP.NET afin d'améliorer la présentation et l'expérience utilisateur des données tabulaires.

Comment utiliser les tables de données dans une application Web ASP.NET ?

1. Créer une application Web ASP.NET

2. Ajouter le paquetage de style côté client de DataTables

3. Installer les Entity Framework Core Packages, uniquement le logiciel de base

4. Ajouter une classe de modèle, un contrôleur et une page Razor

5. Ajouter du code JavaScript dans le fichier JS

6. Mise en place de la configuration

7. Construire et exécuter le programme

8. Exporter les données dans un fichier Excel en utilisantIronXL pour l'exportation de données vers Excel

Qu'est-ce que DataTables.NET ?

DataTables.NET est une bibliothèque JavaScript jQuery qui permet de créer et de manipuler des tableaux interactifs dans les applications .NET. Il est basé sur le plug-in jQuery DataTables, qui offre des fonctions API complètes telles que la pagination, le tri, le filtrage et le défilement pour les tableaux HTML dynamiques ou statiques. Il s'agit d'une bibliothèque d'amélioration des tables qui peut fonctionner avec différentes sources de données, telles que les bases de données SQL, AJAX ou les objets en mémoire.

Traitement côté serveur

Prenons l'exemple d'un point d'accès à une API qui fournit un vaste ensemble de données sur les produits. L'approche standard implique que jQuery DataTables fasse un appel AJAX à cette API, obtienne une liste de produits au format JSON et rende un tableau HTML. C'est ce que l'on appelle le traitement côté client, qui est efficace pour les petits ensembles de données, généralement compris entre 100 et 1 000 enregistrements. Mais que se passe-t-il lorsque l'ensemble de données s'étend à 10 000 enregistrements ou plus ?

Lorsqu'il s'agit d'un nombre important d'enregistrements, il n'est pas pratique d'envoyer l'ensemble des données au navigateur en une seule fois. La transmission de 10 000 enregistrements en une seule fois n'est pas seulement un gaspillage en termes de bande passante, mais elle sollicite également les ressources du navigateur. Dans de tels cas, une approche alternative, le traitement côté serveur, devient cruciale pour optimiser les performances.

Dans le traitement côté serveur, plutôt que d'envoyer l'ensemble des données, l'API transmet les données par morceaux gérables, généralement paginés avec environ 50 enregistrements par page. Ce faisant, le temps de chargement est considérablement amélioré, car jQuery DataTables ne charge plus qu'un nombre modeste d'enregistrements(~50) au lieu de traiter l'ensemble des données en une seule fois. Cette approche réduit l'utilisation de l'unité centrale et de la bande passante, créant ainsi une interaction plus efficace entre l'API et le tableau de données.

Dans cet article, nous allons explorer la mise en œuvre du traitement côté serveur dans une application ASP.NET Razor Page, en démontrant comment traiter et afficher efficacement des ensembles de données volumineux tout en améliorant les performances globales de votre application web.

Démarrer avec DataTables.NET en ASP.NET 8

Pour commencer, nous devons ajouter la bibliothèque côté client DataTables.NET à notre projet. Dans cet article, nous utiliserons l'application Web ASP.NET Core(Pages du rasoir) avec .NET 8. Vous pouvez utiliser n'importe quel projet d'application Web en fonction de vos besoins.

Pour ajouter une bibliothèque côté client, cliquez avec le bouton droit de la souris sur Solution>Ajouter>Bibliothèque côté client et recherchez les tables de données comme indiqué ci-dessous.

Nous devons maintenant ajouter la classe de modèle, le contexte de la base de données, le contrôleur, la table HTML et l'appel AJAX.

Mais avant cela, nous devons installer les paquets Nuget EntityFramework pour connecter notre application à la base de données. Cet article utilise l'approche du code d'abord, vous pouvez utiliser la base de données d'abord selon votre préférence.

Installez les paquets suivants hébergés localement :

1. Microsoft.EntityFrameworkCore

2. Microsoft.EntityFrameworkCore.Design

3. Microsoft.EntityFrameworkCore.SqlServer

4. Microsoft.EntityFrameworkCore.Tools

   Installez le paquet ci-dessus en utilisant la commande install-package de la console NuGet Package Manager, ou installez-le à partir de la solution NuGet Package Manager en le recherchant.

Ajouter une classe de modèle

J'utilise la classe de modèle de produit pour cet exemple, vous pouvez l'utiliser en fonction de vos besoins.

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 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 Class

Ajouter la classe ApplicationDBContext

public class ApplicationDBContext : DbContext
{
    public ApplicationDBContext(DbContextOptions<ApplicationDBContext> options) : base(options)
    {
    }
    public DbSet<Product> Products { get; set; }
}

public 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 Class

Ajouter des contrôles d'interaction avancés

Nous ajouterons le fichier ProductDatatables.js dans le dossier wwwroot>js pour ajouter des contrôles avancés tels que la pagination, la recherche, etc.

//add advanced interaction controls
$(document).ready(function () {
    $("#productDatatable").DataTable({
        "processing": true,
        "serverSide": true,
        "filter": true,
        "ajax": {
            "url": "/api/Product",
            "type": "POST",
            "datatype": "json"
        },
        "columnDefs": [{
            "targets": [0].data,
            "visible": false,
            "searchable": false
        }],
        "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 },
            {
                "render": function (data, row) { return "<a href='#' class='btn btn-danger' onclick=DeleteProduct('" + row.id + "'); >Delete</a>"; }
            },
        ]
    });
});

//add advanced interaction controls
$(document).ready(function () {
    $("#productDatatable").DataTable({
        "processing": true,
        "serverSide": true,
        "filter": true,
        "ajax": {
            "url": "/api/Product",
            "type": "POST",
            "datatype": "json"
        },
        "columnDefs": [{
            "targets": [0].data,
            "visible": false,
            "searchable": false
        }],
        "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 },
            {
                "render": function (data, row) { return "<a href='#' class='btn btn-danger' onclick=DeleteProduct('" + row.id + "'); >Delete</a>"; }
            },
        ]
    });
});

'add advanced interaction controls
$(document).ready([function] () {
	$("#productDatatable").DataTable({
		"processing":= True, "serverSide":= True, "filter":= True, "ajax":= {
			"url":= "/api/Product",
			"type":= "POST",
			"datatype":= "json"
		},
		"columnDefs":= ({
			"targets":= (0).data,
			"visible":= False,
			"searchable":= False
		}), "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
		},
		{
			"render":= [function] (data, row) { Return "<a href='#' class='btn btn-danger' onclick=DeleteProduct('" & row.id & "'); >Delete</a>"; }
		},
		)
}); })

Nous devons maintenant ajouter un tableau HTML.

Ajouter un tableau HTML

Écrivez le code suivant dans le fichier index.cshtml pour ajouter une page HTML statique.

//static HTML page
@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>
}

//static HTML page
@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>
}

'static HTML page
page model ReadOnly Property () As IndexModel
	ViewData ("Title") = "Home page"
End Property
'INSTANT VB WARNING: An assignment within expression was extracted from the following statement:
'ORIGINAL LINE: <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
"100%" cellspacing="0"> (Of thead) (Of tr) (Of th) Id</th> (Of th) Product Name</th> (Of th) Product Price</th> (Of th) Product Weight</th> (Of th) Product Description</th> (Of th) Product Manufacturing [Date]</th> (Of th) Product Expiry [Date]</th> (Of th) Actions</th> </tr> </thead> </table> </div> </div> section Scripts
'INSTANT VB WARNING: An assignment within expression was extracted from the following statement:
'ORIGINAL LINE: Friend <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
"table table-striped table-bordered dt-responsive nowrap" width="100%" cellspacing
'INSTANT VB WARNING: An assignment within expression was extracted from the following statement:
'ORIGINAL LINE: Private Friend <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
"productDatatable" class="table table-striped table-bordered dt-responsive nowrap" width
'INSTANT VB WARNING: An assignment within expression was extracted from the following statement:
'ORIGINAL LINE: Private Private Friend <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
"width:90%; margin:0 auto;"> <table id="productDatatable" class
'INSTANT VB WARNING: An assignment within expression was extracted from the following statement:
'ORIGINAL LINE: Private Private Private Friend <link href="~/lib/datatables/css/dataTables.bootstrap4.min.css" rel="stylesheet" /> <div Class="container"> <br /> <div style="width:90%; margin:0 auto;"> <table id
'INSTANT VB WARNING: Instant VB cannot determine whether both operands of this division are integer types - if they are then you should use the VB integer division operator:
"container"> <br /> <div style="width:90%; margin:0 auto;"> <table id
'INSTANT VB WARNING: An assignment within expression was extracted from the following statement:
'ORIGINAL LINE: Private Private Private Private Friend <link href="~/lib/datatables/css/dataTables.bootstrap4.min.css" rel="stylesheet" /> <div Class="container"> <br /> <div style
'INSTANT VB WARNING: Instant VB cannot determine whether both operands of this division are integer types - if they are then you should use the VB integer division operator:
"stylesheet" /> <div Class="container"> <br /> <div style
'INSTANT VB WARNING: An assignment within expression was extracted from the following statement:
'ORIGINAL LINE: Private Private Private Private Private Friend <link href="~/lib/datatables/css/dataTables.bootstrap4.min.css" rel="stylesheet" /> <div Class
"~/lib/datatables/css/dataTables.bootstrap4.min.css" rel="stylesheet" /> <div Class
Private Private Private Private Private Private Private Friend <link href="~/lib/datatables/css/dataTables.bootstrap4.min.css" rel
'INSTANT VB WARNING: An assignment within expression was extracted from the following statement:
'ORIGINAL LINE: <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>
	"~/lib/datatables/js/dataTables.bootstrap4.min.js"></script> <script src="~/js/ProductDatatable.js"></script>
'INSTANT VB WARNING: An assignment within expression was extracted from the following statement:
'ORIGINAL LINE: Private <script src="~/lib/datatables/js/jquery.dataTables.min.js"></script> <script src="~/lib/datatables/js/dataTables.bootstrap4.min.js"></script> <script src
	"~/lib/datatables/js/jquery.dataTables.min.js"></script> <script src="~/lib/datatables/js/dataTables.bootstrap4.min.js"></script> <script src
	Private Private Private <script src="~/lib/datatables/js/jquery.dataTables.min.js"></script> <script src
End Class

Nous devons ajouter le contrôleur.

Ajouter un contrôleur de produit

Ajout d'un contrôleur de produit pour créer des points d'extrémité et des demandes directes de téléchargement.

[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.ToList();
            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 ex)
        {
            throw;
        }
    }
}

[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.ToList();
            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 ex)
        {
            throw;
        }
    }
}

<Route("api/[controller]")>
<ApiController>
Public Class ProductController
	Inherits ControllerBase

	Private ReadOnly context As ApplicationDBContext
	Public Sub New(ByVal 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()
			If Not String.IsNullOrEmpty(searchValue) Then
				productData = productData.Where(Function(m) m.ProductName.Contains(searchValue) m.ProductDescription.Contains(searchValue) 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 Class

Ici, nous avons mis en œuvre la pagination et la recherche du côté du serveur.

Nous devons maintenant configurer notre base de données et ajouter la configuration à la classe Program.cs. Si vous utilisez .NET 5 ou une version inférieure, vous devrez peut-être le faire dans la classe Startup.cs.

Tout d'abord, ajoutez la chaîne de connexion suivante dans le fichier appsettings.json.

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

Ajoutez maintenant le code suivant à la 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. You may want to change this for production scenarios, see .NET documentation https://aka.ms/aspnetcore-hsts.
         app.UseHsts();
     }
     app.UseHttpsRedirection();
     app.UseStaticFiles();
     app.UseRouting();
     app.UseAuthorization();
     app.MapControllers();
     app.MapRazorPages();
     app.Run();
 }

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. You may want to change this for production scenarios, see .NET documentation https://aka.ms/aspnetcore-hsts.
         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. You may want to change this for production scenarios, see .NET documentation https://aka.ms/aspnetcore-hsts.
		 app.UseHsts()
	 End If
	 app.UseHttpsRedirection()
	 app.UseStaticFiles()
	 app.UseRouting()
	 app.UseAuthorization()
	 app.MapControllers()
	 app.MapRazorPages()
	 app.Run()
End Sub

Nous devons exécuter la migration, car nous utilisons une approche "code-first".

Exécutez la commande suivante dans la console du gestionnaire de paquets.

Add-Migration init

La commande ci-dessus créera une migration. Nous devons maintenant appliquer ces migrations à notre base de données. Exécutez la commande suivante dans la console du gestionnaire de paquets.

Update-Database

La commande ci-dessus créera des tables dans notre base de données. Ajoutez des données fictives dans le tableau des produits, vous pouvez générer des données aléatoires à partir deMockaroo.

Maintenant, créez et exécutez cette application.

Sortie

Nous pouvons voir que nous avons une interface utilisateur très interactive avec des contrôles d'interaction avancés.

La pagination est maintenant mise en œuvre du côté du serveur, comme indiqué ci-dessous.

Sortie de l'interface utilisateur

Les données sont ensuite rendues sur le côté client à l'aide d'un contrôle d'interface utilisateur riche.

Vous pouvez en savoir plus dans la documentation de DataTables.NET en cliquant surexplorer la documentation de DataTables.NET.

Introduction d'IronXL

IronXL - Excel Library for .NET (en anglais) est une bibliothèque qui vous permet de travailler avec des fichiers Excel dans des applications .NET. Il peutcréer des feuilles de calcul Excel, lire les fichiers CSV, éditer des fichiers Exceletexporter vers Excel le logiciel Excel est disponible dans différents formats, tels que XLS, XLSX, CSV et TSV. Il n'est pas nécessaire d'installer Microsoft Office ou Excel Interop. Elle prend en charge .NET 8, 7, 6, 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. Nous allons maintenant écrire un code pour exporter nos données dans un fichier Excel.

Installer IronXL

Installez la bibliothèque IronXL dans notre projet en entrant la commande suivante dans la console du gestionnaire de paquets.

Install-Package ironXL.Excel

Ceci installera IronXL et les dépendances nécessaires dans notre projet.

Exporter des données vers Excel

Ecrivons un code pour convertir notre liste de produits en fichier Excel.

public void ExportToExcel(List<Product> productList)
{
    WorkBook wb = WorkBook.Create(ExcelFileFormat.XLSX);
    WorkSheet ws = wb.DefaultWorkSheet;
    int rowCount = 1;
    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");
}

public void ExportToExcel(List<Product> productList)
{
    WorkBook wb = WorkBook.Create(ExcelFileFormat.XLSX);
    WorkSheet ws = wb.DefaultWorkSheet;
    int rowCount = 1;
    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");
}

Public Sub ExportToExcel(ByVal productList As List(Of Product))
	Dim wb As WorkBook = WorkBook.Create(ExcelFileFormat.XLSX)
	Dim ws As WorkSheet = wb.DefaultWorkSheet
	Dim rowCount As Integer = 1
	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")
End Sub

Nous avons créé un fichier Excel à partir de la liste d'une manière très simple et facile.

IronXL fournit des informations complètes sur l'état de santé de la populationtutoriels sur la création de fichiers XLSX, exemples de code pour la lecture d'ExceletDocumentation de l'API d'utiliser son API complète de la meilleure façon possible.

Pour optimiser les performances de ASP.NET, nous nous appuyons exclusivement sur Only Core Software, ce qui garantit un environnement de développement allégé et efficace. L'utilisation de DataTables.NET en tant que progiciels hébergés localement améliore encore la réactivité, en minimisant les dépendances externes pour un traitement des données et une exportation Excel rationalisés. En outre, la contribution au code devient transparente dans cet écosystème optimisé et autonome.

Conclusion

En résumé, l'utilisation de DataTables.NET pour le traitement côté serveur dans les projets de distribution ASP.NET s'avère être une bonne stratégie pour traiter efficacement des ensembles de données importants. Cette approche permet d'optimiser les performances en transmettant les données en morceaux gérables, en réduisant l'utilisation de la bande passante et en améliorant l'expérience de l'utilisateur. L'intégration d'IronXL étend encore les capacités de l'application, permettant d'exporter sans effort des données tabulaires vers Excel pour une analyse complète des données et l'établissement de rapports.

En adoptant ces technologies, les développeurs peuvent créer des applications web qui trouvent un équilibre entre une interactivité riche et l'efficacité des ressources, offrant aux utilisateurs une expérience transparente et réactive, en particulier dans les scénarios où de grands ensembles de données sont impliqués. IronXL propose différentsoptions de licence pour IronXLen fonction du nombre de développeurs, de projets et des besoins de redistribution. Les licences sont perpétuelles et comprennent une assistance et des mises à jour gratuites.