Affichage des données avec le composant Telerik Grid pour ASP.NET Core

Découvrez comment implémenter rapidement et simplement une page Web pour afficher les enregistrements d’une base de données – avec des options de filtrage, de tri et de pagination – à l’aide du composant Data Grid disponible dans Telerik UI pour ASP.NET Core.

La gestion des données est très importante dans le développement de logiciels. Après tout, grâce aux données, nous pouvons mesurer la productivité, la rentabilité, les pertes et bien d’autres statistiques.

Une solution courante et utile pour gérer toutes ces données est une grille de données. Mais avez-vous essayé de construire vous-même une grille de données de zéro? Cela peut sembler si simple et devenir rapidement incontrôlable, même de petits composants nécessitent du temps pour créer le code HTML, CSS et JavaScript nécessaire. La bonne nouvelle est que nous pouvons utiliser un composant de grille de données pré-construit !

Dans cet article, nous allons voir comment mettre en place rapidement et simplement une page web pour afficher les enregistrements d’une table de base de données, avec des options de filtrage, de tri, d’export et de pagination, à l’aide du Interface utilisateur Telerik pour la grille de données de base ASP.NET.

À propos du projet

Le projet sera une application Web avec ASP.NET Core dans .NET 6, utilisant Entity Framework pour créer la table de base de données et insérer des exemples de données. Ensuite, nous verrons les multiples options intégrées disponibles dans l’interface utilisateur pour le composant ASP.NET Core Data Grid

Vous pouvez accéder au code source complet du projet final à ce lien : Code source.

Conditions préalables

• Interface utilisateur Telerik pour ASP.NET Core (configurez le flux Telerik NuGet ou installez les composants localement afin de pouvoir restaurer les packages)
• Visual Studio 2022
• SDK .NET 6

Création du projet Web

Pour créer le projet ASP.NET Core dans Visual Studio avec des composants Telerik, vous avez la possibilité de démarrer à partir d’un modèle de projet qui crée toutes les configurations nécessaires pour utiliser les composants pour vous ou de suivre la configuration étape par étape par vous-même. Vous pouvez suivre cet excellent guide produit par Telerik et choisir votre approche de configuration préférée : Premiers pas avec l’interface utilisateur Telerik pour ASP.NET Core.

Appelons le projet « OrderManager ».

Dépendances du projet

Ensuite, vous devez ajouter les dépendances du projet, soit directement dans le code du projet « OrderManager.csproj », soit en téléchargeant les packages EF Core NuGet :

   <PackageReference Include="Microsoft.EntityFrameworkCore" Version="6.0.3" />
    <PackageReference Include="Microsoft.EntityFrameworkCore.Design" Version="6.0.3">
        <PrivateAssets>all</PrivateAssets>
        <IncludeAssets>runtime; build; native; contentfiles; analyzers; buildtransitive</IncludeAssets>
    </PackageReference>
    <PackageReference Include="Microsoft.EntityFrameworkCore.Sqlite" Version="6.0.3" />
    <PackageReference Include="Microsoft.EntityFrameworkCore.Tools" Version="6.0.3">
        <PrivateAssets>all</PrivateAssets>
        <IncludeAssets>runtime; build; native; contentfiles; analyzers; buildtransitive</IncludeAssets>
    </PackageReference>

Classes modèles

Dans une prochaine étape, nous allons créer un nouveau dossier « Modèles » et à l’intérieur créer la classe ci-dessous :

using System.ComponentModel.DataAnnotations;

namespace OrderManager.Models
{
    public class OrderViewModel
    {
        [Key]
        public int OrderID { get; set; }
        public decimal? Freight { get; set; }
        public DateTime? OrderDate { get; set; }
        public string? ShipCity { get; set; }
        public string? ShipName { get; set; }
    }
}

DBContext

Ensuite, nous allons créer la classe qui contiendra les configurations de la base de données.

Créez un nouveau dossier « Data » et créez à l’intérieur la classe ci-dessous :

using OrderManager.Models;
using Microsoft.EntityFrameworkCore;

namespace OrderManager.Data
{
    public class ApplicationDbContext : DbContext
    {
        public ApplicationDbContext(DbContextOptions options) : base(options) { }

        protected override void OnConfiguring(DbContextOptionsBuilder options)
            => options.UseSqlite("DataSource = orderDB; Cache=Shared");

        protected override void OnModelCreating(ModelBuilder modelBuilder)
        {
            var seedData = Enumerable.Range(1, 30).Select(i => new OrderViewModel
            {
                OrderID = i,
                Freight = i * 10,
                OrderDate = new DateTime(2022, 04, 25).AddDays(i % 7),
                ShipName = "ShipNameExample" + i,
                ShipCity = "ShipCityExample" + i
            }).ToList();

            modelBuilder.Entity<OrderViewModel>().HasData(
                seedData[0], seedData[1], seedData[2], seedData[3], seedData[4], seedData[5],
                seedData[6], seedData[7], seedData[8], seedData[9], seedData[10], seedData[11],
                seedData[12], seedData[13], seedData[14], seedData[15], seedData[16], seedData[17],
                seedData[18], seedData[19], seedData[20], seedData[21], seedData[22], seedData[23],
                seedData[24], seedData[25], seedData[26], seedData[27], seedData[28], seedData[29]);
        }

        public DbSet<OrderViewModel> Orders { get; set; }
    }
}

Le code ci-dessus :

• Établit les paramètres de la base de données via la méthode « OnConfiguring »
• Insère des exemples de données dans la base de données via la méthode « OnModelCreating » lorsque les commandes EF Core sont exécutées

Exécution des commandes EF Core

Ensuite, nous devons exécuter les commandes depuis la console Visual Studio ou depuis le terminal de notre machine à la racine du projet. La première commande créera une migration appelée InitialModel et la seconde demandera à EF de créer une base de données et un schéma à partir de la migration. Plus d’informations sont disponibles dans le Documentation MSDN.

Cela nécessite CLI .NET outils à installer. Sinon, les commandes entraîneront une erreur.

• dotnet ef migrations add InitialModel
• dotnet ef database update

Vous pouvez également exécuter les commandes suivantes dans la console du gestionnaire de package dans Visual Studio :

• Add-Migration InitialModel
• Update-Database

Prestations de service

Ensuite, nous devons créer la classe de service qui contient les méthodes qui communiquent avec la base de données via la classe de contexte créée précédemment.

Commençons par créer un nouveau dossier « Helpers » et à l’intérieur une nouvelle classe « SessionExtensions » avec le code suivant :

using Newtonsoft.Json;

namespace OrderManager.Helpers
{
    public static class SessionExtensions
    {
        public static void SetObjectAsJson(this ISession session, string key, object value) =>
            session.SetString(key, JsonConvert.SerializeObject(value));
    }
}

Le code ci-dessus contient une méthode qui définira un objet comme JSON, qui sera utilisé dans la classe de service.

Ensuite, créez un nouveau dossier « Services » et à l’intérieur, créez la classe ci-dessous :

using OrderManager.Data;
using OrderManager.Models;

namespace OrderManager.Services
{
    public class OrderService
    {
        private readonly ApplicationDbContext _dbContext;

        public OrderService(ApplicationDbContext dbContext)
        {
            _dbContext = dbContext;
        }

        public IEnumerable<OrderViewModel> Read() => GetAll();

        public IList<OrderViewModel> GetAll() => _dbContext.Orders.ToList();
    }
}

Manette

Dans le dossier « Controllers », créez un nouveau contrôleur avec le code ci-dessous :

using Kendo.Mvc.Extensions;
using Kendo.Mvc.UI;
using OrderManager.Services;
using Microsoft.AspNetCore.Mvc;

namespace OrderManager.Controllers
{
    public class OrderController : Controller
    {
        private readonly OrderService _orderService;

        public OrderController(OrderService orderService)
        {
            _orderService = orderService;
        }

        public IActionResult Index()
        {
            return View();
        }

        public ActionResult Orders_Read([DataSourceRequest] DataSourceRequest request)
        {
            var result = _orderService.GetAll();

            var dsResult = result.ToDataSourceResult(request);
            return Json(dsResult);
        }
    }
}

Dans le Program.cs, ajoutez les lignes de code suivantes juste après l’appel AddKendo(). Ils ajouteront les paramètres de classe de contexte (ApplicationDbContext) et de service (OrderService).

builder.Services.AddDbContext<OrderManager.Data.ApplicationDbContext>();
builder.Services.AddScoped<OrderManager.Services.OrderService>();

Création de la page d’aperçu des données

Ensuite, créons une grille avec plusieurs options activées telles que Triable, Défilable et Filtrable, ainsi qu’une barre d’outils avec des options d’exportation PDF et Excel et une barre de recherche.

La grille utilise l’approche HTML Helper, disponible dans la bibliothèque d’interface utilisateur Telerik pour ASP.NET Core. (Veuillez noter qu’il existe également une option pour utiliser TagHelpers. Pour plus d’informations, vous pouvez vous référer à l’exemple de code dans le Interface utilisateur pour l’exemple ASP.NET Core Data Grid TagHelper.)

Ainsi, dans le dossier « Vues », créez un nouveau dossier « Commande » et à l’intérieur, créez une nouvelle vue avec le code ci-dessous :

@using OrderManager.Models
        @(Html.Kendo()
            .DataSource<OrderViewModel>()
            .Name("dataSource1")
            .Ajax(t=>t.Read(read => read.Action("Orders_Read", "Order")).PageSize(20))
        )
        @(Html.Kendo().Grid<OrderViewModel>()
            .Name("grid")
            .Columns(columns => {
                columns.Bound(p => p.OrderID).Width(120);
                columns.Bound(p => p.Freight).Width(120);
                columns.Bound(p => p.OrderDate).Format("{0:MM/dd/yyyy}").Width(140);
                columns.Bound(p => p.ShipName);
                columns.Bound(p => p.ShipCity).Width(150);
            })
            .Sortable()
            .Scrollable()
            .Filterable()
            .DataSource("dataSource1")
            .ToolBar(toolbar => {
                toolbar.Excel();
                toolbar.Pdf();
                toolbar.Search();
            })
            .Pdf(pdf=>pdf.ProxyURL(Url.Action("Excel_Export_Save", "Grid")))
            .Excel(excel=>excel.ProxyURL(Url.Action("Excel_Export_Save", "Grid")))
        )
        @(Html.Kendo().Pager()
            .Name("pager")
            .ButtonCount(5)
            .DataSource("dataSource1")
            .PageSizes(true)
            .Refresh(true)
        )

Version alternative de la définition de grille. Les composants Pager et DataSource peuvent être séparés ; cependant, ils peuvent également être configurés via les options de grille :

@(Html.Kendo().Grid<OrderViewModel>()
            .Name("grid")
            .Columns(columns => {
                columns.Bound(p => p.OrderID).Width(120);
                columns.Bound(p => p.Freight).Width(120);
                columns.Bound(p => p.OrderDate).Format("{0:MM/dd/yyyy}").Width(140);
                columns.Bound(p => p.ShipName);
                columns.Bound(p => p.ShipCity).Width(150);
            })
            .Sortable()
            .Scrollable()
            .Filterable()
            .ToolBar(toolbar => {
                toolbar.Excel();
                toolbar.Pdf();
                toolbar.Search();
            })
            .Pdf(pdf=>pdf.AllPages(true))
            .Excel(excel=>excel.AllPages(true))
            .Pageable(p=>p
                .ButtonCount(5)
                .PageSizes(true)
                .Refresh(true)
            )
            .DataSource(ds=>ds
                .Ajax()
                .Read(r=>r.Action("Orders_Read", "Order"))
            )
        )

Dans le Views/Shared/_Layout.cshtml fichier, dans le composant « Menu », ajoutez la ligne de code suivante. Il sera utilisé pour afficher un lien vers la page Commandes créée précédemment.

items.Add().Text("Orders").Action("Index", "Order", new { area = "" });

Affichage des données

Lors de l’exécution de l’application et de l’accès à la page de commande, la grille avec les enregistrements s’affichera. Comme le montre le GIF ci-dessous, il est possible d’utiliser le composant de pagination pour regrouper le nombre d’éléments par page.

Filtrage et classement des données

Le GIF suivant montre à quel point il est facile de filtrer et de classer les données avec le filtre intégré et la fonction de tri disponible dans la grille activée via une seule propriété.

Mise à jour des données

Pour modifier les enregistrements de la base de données, l’éditeur SQLite Viewer sera utilisé. Ensuite, comme indiqué dans le GIF ci-dessous, la grille sera mise à jour lorsque vous cliquerez sur le bouton de mise à jour, sans qu’il soit nécessaire de charger la page entière.

Exportation des données de grille

Vous trouverez ci-dessous la démonstration de l’exportation des données au format Excel et PDF.

Conclusion

Dans cet article, nous avons créé une application qui communique avec une base de données et affiche ces données dans une grille.

Dans l’exemple de l’article, nous avons profité des fonctionnalités de base comme les fonctions de filtrage, de tri, d’exportation et de mise à jour des données. Alors que notre exemple était simple, l’interface utilisateur Telerik pour ASP.NET Core Data Grid prend en charge des scénarios très complexes prêts à l’emploi qui gèrent facilement de gros volumes de données, comme la virtualisation pour les lignes et les colonnes, plus regroupement de serveurs avec virtualisation, simple glisser-déposer de lignes, sélection de plage et plus encore. J’ai hâte d’explorer davantage ces fonctionnalités par moi-même !