composant ASP.NET Core Blazor `QuickGrid`

Article
11/06/2024

Le composant QuickGrid est un composant Razor permettant d’afficher rapidement et efficacement les données sous forme tabulaire. QuickGrid fournit un composant de grille de données simple et pratique pour les scénarios d’affichage de grille courants et sert d’architecture de référence et de base de performances pour la création de composants de grille de données. QuickGrid est hautement optimisé et utilise des techniques avancées pour obtenir des performances d’affichage optimales.

Package

Ajoutez une référence de package pour le package Microsoft.AspNetCore.Components.QuickGrid.

Remarque

Pour obtenir des conseils sur l’ajout de packages à des applications .NET, consultez les articles figurant sous Installer et gérer des packages dans Flux de travail de la consommation des packages (documentation NuGet). Vérifiez les versions du package sur NuGet.org.

Exemple d’application

Pour différentes démonstrations QuickGrid, consultez l’application QuickGrid Blazor un exemple d’application. Le site de démonstration est hébergé sur GitHub Pages. Le site se charge rapidement grâce au pré-rendu statique utilisant le BlazorWasmPrerendering.Buildprojet GitHubgéré par la communauté.

Implémentation `QuickGrid`

Pour implémenter un composant QuickGrid :

Spécifiez des balises pour le composant QuickGrid dans le balisage Razor (<QuickGrid>...</QuickGrid>).
Nommez une source interrogeable de données pour la grille. Utilisez l’une des sources de données suivantes :
- Items: IQueryable<TGridItem> nullable, où TGridItem est le type de données représentées par chaque ligne de la grille.
- ItemsProvider: rappel qui fournit des données pour la grille.
Class: nom de classe CSS facultatif. S’il est fourni, le nom de la classe est inclus dans l’attribut class de la table affichée.
Theme: nom de thème (valeur par défaut : default). Cela affecte les règles de style qui correspondent à la table.
Virtualize: si la valeur est true, la grille est affichée avec la virtualisation. Cela est habituellement utilisé conjointement avec le défilement et fait en sorte que la grille n’extrait et n’affiche que les données autour de la fenêtre d’affichage de défilement actuelle. Cela peut considérablement améliorer les performances lors du défilement de jeux de données volumineux. Si vous utilisez Virtualize, vous devez fournir une valeur pour ItemSize et devez vous assurer que chaque ligne s’affiche avec une hauteur constante. En règle générale, il est préférable de ne pas utiliser Virtualize si la quantité de données affichées est petite ou si vous utilisez la pagination.
ItemSize: applicable uniquement lors de l’utilisation de Virtualize. ItemSize définit une hauteur attendue en pixels pour chaque ligne, ce qui permet au mécanisme de virtualisation d’extraire le nombre correct d’éléments correspondant à la taille d’affichage et de garantir un défilement précis.
ItemKey: définit éventuellement une valeur pour @key sur chaque ligne affichée. En règle générale, il est utilisé pour spécifier un identificateur unique, tel qu’une valeur de clé primaire, pour chaque élément de données. Cela permet à la grille de conserver l’association entre les éléments de ligne et les éléments de données en fonction de leurs identificateurs uniques, même lorsque les instances TGridItem sont remplacées par de nouvelles copies (par exemple, après une nouvelle requête sur le magasin de données sous-jacent). S’il n’est pas défini, @key est l’instance TGridItem.
OverscanCount : définit le nombre d’éléments supplémentaires à afficher avant et après la région visible pour réduire la fréquence de rendu pendant le défilement. Bien que des valeurs plus élevées puissent améliorer la fluidité du défilement en affichant davantage d’éléments hors écran, elles peuvent également entraîner une augmentation des temps de chargement initiaux. Il est recommandé de trouver un équilibre en fonction de la taille de votre jeu de données et des exigences en matière d’expérience utilisateur. La valeur par défaut est 3. Uniquement disponible lors de l’utilisation de Virtualize.
Pagination: lie éventuellement cette instance TGridItem à un modèle PaginationState, faisant en sorte que la grille n’extrait et n’affiche que la page de données active. Cela est habituellement utilisé conjointement avec un composant Paginator ou une autre logique d’interface utilisateur qui affiche et met à jour l’instance PaginationState fournie.
Dans le contenu enfant QuickGrid (RenderFragment), spécifiez PropertyColumn<TGridItem,TProp>s, qui représentent des colonnes TGridItem dont les cellules affichent les valeurs :
- Property: définit la valeur à afficher dans les cellules de cette colonne.
- Format: spécifie éventuellement une chaîne de format pour la valeur. Utiliser Format nécessite que le type TProp implémente IFormattable.
- Sortable: indique si les données doivent être triables par cette colonne. La valeur par défaut peut varier en fonction du type de colonne. Par exemple, TemplateColumn<TGridItem> est trié si un paramètre SortBy est spécifié.
- InitialSortDirection: indique le sens de tri si IsDefaultSortColumn est true.
- IsDefaultSortColumn: indique si cette colonne doit être triée par défaut.
- PlaceholderTemplate: si elle est spécifiée, les grilles virtualisées utilisent ce modèle pour afficher les cellules dont les données n’ont pas été chargées.
- HeaderTemplate : un modèle facultatif pour la cellule d’en-tête de cette colonne. S’il n’est pas spécifié, le modèle d’en-tête par défaut inclut le Title, ainsi que les indicateurs de tri et les boutons d’options applicables.
- Title : texte du titre de la colonne. Le titre est affiché automatiquement si HeaderTemplate n’est pas utilisé.

Spécifiez des balises pour le composant QuickGrid dans le balisage Razor (<QuickGrid>...</QuickGrid>).
Nommez une source interrogeable de données pour la grille. Utilisez l’une des sources de données suivantes :
- Items: IQueryable<TGridItem> nullable, où TGridItem est le type de données représentées par chaque ligne de la grille.
- ItemsProvider: rappel qui fournit des données pour la grille.
Class: nom de classe CSS facultatif. S’il est fourni, le nom de la classe est inclus dans l’attribut class de la table affichée.
Theme: nom de thème (valeur par défaut : default). Cela affecte les règles de style qui correspondent à la table.
Virtualize: si la valeur est true, la grille est affichée avec la virtualisation. Cela est habituellement utilisé conjointement avec le défilement et fait en sorte que la grille n’extrait et n’affiche que les données autour de la fenêtre d’affichage de défilement actuelle. Cela peut considérablement améliorer les performances lors du défilement de jeux de données volumineux. Si vous utilisez Virtualize, vous devez fournir une valeur pour ItemSize et devez vous assurer que chaque ligne s’affiche avec une hauteur constante. En règle générale, il est préférable de ne pas utiliser Virtualize si la quantité de données affichées est petite ou si vous utilisez la pagination.
ItemSize: applicable uniquement lors de l’utilisation de Virtualize. ItemSize définit une hauteur attendue en pixels pour chaque ligne, ce qui permet au mécanisme de virtualisation d’extraire le nombre correct d’éléments correspondant à la taille d’affichage et de garantir un défilement précis.
ItemKey: définit éventuellement une valeur pour @key sur chaque ligne affichée. En règle générale, il est utilisé pour spécifier un identificateur unique, tel qu’une valeur de clé primaire, pour chaque élément de données. Cela permet à la grille de conserver l’association entre les éléments de ligne et les éléments de données en fonction de leurs identificateurs uniques, même lorsque les instances TGridItem sont remplacées par de nouvelles copies (par exemple, après une nouvelle requête sur le magasin de données sous-jacent). S’il n’est pas défini, @key est l’instance TGridItem.
Pagination: lie éventuellement cette instance TGridItem à un modèle PaginationState, faisant en sorte que la grille n’extrait et n’affiche que la page de données active. Cela est habituellement utilisé conjointement avec un composant Paginator ou une autre logique d’interface utilisateur qui affiche et met à jour l’instance PaginationState fournie.
Dans le contenu enfant QuickGrid (RenderFragment), spécifiez PropertyColumn<TGridItem,TProp>s, qui représentent des colonnes TGridItem dont les cellules affichent les valeurs :
- Property: définit la valeur à afficher dans les cellules de cette colonne.
- Format: spécifie éventuellement une chaîne de format pour la valeur. Utiliser Format nécessite que le type TProp implémente IFormattable.
- Sortable: indique si les données doivent être triables par cette colonne. La valeur par défaut peut varier en fonction du type de colonne. Par exemple, TemplateColumn<TGridItem> est trié si un paramètre SortBy est spécifié.
- InitialSortDirection: indique le sens de tri si IsDefaultSortColumn est true.
- IsDefaultSortColumn: indique si cette colonne doit être triée par défaut.
- PlaceholderTemplate: si elle est spécifiée, les grilles virtualisées utilisent ce modèle pour afficher les cellules dont les données n’ont pas été chargées.
- HeaderTemplate : un modèle facultatif pour la cellule d’en-tête de cette colonne. S’il n’est pas spécifié, le modèle d’en-tête par défaut inclut le Title, ainsi que les indicateurs de tri et les boutons d’options applicables.
- Title : texte du titre de la colonne. Le titre est affiché automatiquement si HeaderTemplate n’est pas utilisé.

Par exemple, ajoutez le composant suivant pour afficher une grille.

Pour les applications Blazor Web App, le composant QuickGrid doit adopter un mode de rendu interactif pour activer des fonctionnalités interactives, telles que la pagination et le tri.

PromotionGrid.razor :

@page "/promotion-grid"
@using Microsoft.AspNetCore.Components.QuickGrid

<PageTitle>Promotion Grid</PageTitle>

<h1>Promotion Grid Example</h1>

<QuickGrid Items="people">
    <PropertyColumn Property="@(p => p.PersonId)" Sortable="true" />
    <PropertyColumn Property="@(p => p.Name)" Sortable="true" />
    <PropertyColumn Property="@(p => p.PromotionDate)" Format="yyyy-MM-dd" Sortable="true" />
</QuickGrid>

@code {
    private record Person(int PersonId, string Name, DateOnly PromotionDate);

    private IQueryable<Person> people = new[]
    {
        new Person(10895, "Jean Martin", new DateOnly(1985, 3, 16)),
        new Person(10944, "António Langa", new DateOnly(1991, 12, 1)),
        new Person(11203, "Julie Smith", new DateOnly(1958, 10, 10)),
        new Person(11205, "Nur Sari", new DateOnly(1922, 4, 27)),
        new Person(11898, "Jose Hernandez", new DateOnly(2011, 5, 3)),
        new Person(12130, "Kenji Sato", new DateOnly(2004, 1, 9)),
    }.AsQueryable();
}

@page "/promotion-grid"
@using Microsoft.AspNetCore.Components.QuickGrid

<PageTitle>Promotion Grid</PageTitle>

<h1>Promotion Grid Example</h1>

<QuickGrid Items="people">
    <PropertyColumn Property="@(p => p.PersonId)" Sortable="true" />
    <PropertyColumn Property="@(p => p.Name)" Sortable="true" />
    <PropertyColumn Property="@(p => p.PromotionDate)" Format="yyyy-MM-dd" Sortable="true" />
</QuickGrid>

@code {
    private record Person(int PersonId, string Name, DateOnly PromotionDate);

    private IQueryable<Person> people = new[]
    {
        new Person(10895, "Jean Martin", new DateOnly(1985, 3, 16)),
        new Person(10944, "António Langa", new DateOnly(1991, 12, 1)),
        new Person(11203, "Julie Smith", new DateOnly(1958, 10, 10)),
        new Person(11205, "Nur Sari", new DateOnly(1922, 4, 27)),
        new Person(11898, "Jose Hernandez", new DateOnly(2011, 5, 3)),
        new Person(12130, "Kenji Sato", new DateOnly(2004, 1, 9)),
    }.AsQueryable();
}

Accédez au composant dans un navigateur au chemin relatif /promotion-grid.

Il n’existe actuellement pas de plans d’extension de QuickGrid avec des fonctionnalités que les grilles commerciales peuvent offrir, par exemple, des lignes hiérarchiques, des colonnes à faire glisser pour réorganiser ou des sélections de plages de type Excel. Si vous avez besoin de fonctionnalités avancées que vous ne souhaitez pas développer par vous-même, continuez à utiliser des grilles tierces.

Trier par colonne

Le composant QuickGrid peut trier les éléments par colonnes. Dans les applications Blazor Web App, le tri nécessite que le composant adopte un mode de rendu interactif.

Ajoutez Sortable="true" (Sortable) à la balise PropertyColumn<TGridItem,TProp> :

<PropertyColumn Property="..." Sortable="true" />

Dans l’application en cours d’exécution, triez la colonne QuickGrid en sélectionnant le titre de la colonne rendue.

Éléments de page avec un composant `Paginator`

Le composant QuickGrid peut paginer des données à partir de la source de données. Dans les applications Blazor Web App, la pagination nécessite que le composant adopte un mode de rendu interactif.

Ajoutez une instance PaginationState au bloc @code du composant. Définissez ItemsPerPage sur le nombre d’éléments à afficher par page. Dans l’exemple suivant, l’instance se nomme pagination, et dix éléments par page sont définis :

PaginationState pagination = new PaginationState { ItemsPerPage = 10 };

Affectez la valeur pagination à la propriété Pagination du composant QuickGrid :

<QuickGrid Items="..." Pagination="pagination">

Pour fournir une IU pour la pagination, ajoutez un composant Paginator au-dessus ou au-dessous du composant QuickGrid. Affectez la valeur pagination à Paginator.State :

<Paginator State="pagination" />

Dans l’application en cours d’exécution, parcourez les éléments à l’aide d’un composant Paginator rendu.

Attributs et styles personnalisés

QuickGrid prend également en charge la transmission de classes de style et d’attributs personnalisés (Class) à l’élément de table rendu :

<QuickGrid Items="..." custom-attribute="value" Class="custom-class">

Source de données Entity Framework Core (EF Core)

Utilisez le modèle de fabrique pour résoudre un contexte de base de données EF Core qui fournit des données à un composant QuickGrid. Pour plus d’informations sur la raison pour laquelle le modèle de fabrique est recommandé, consultez ASP.NET Core Blazor avec Entity Framework Core (EF Core).

Une fabrique de contexte de base de données (IDbContextFactory<TContext>) est injectée dans le composant avec la directive @inject. L’approche de fabrique nécessite la suppression du contexte de base de données, de sorte que le composant implémente l’interface IAsyncDisposable avec la directive @implements. Le fournisseur d’éléments pour le composant QuickGrid est un DbSet<T> obtenu à partir du contexte de base de données créé (CreateDbContext) de la fabrique de contexte de base de données injectée.

QuickGrid reconnaît les instances de IQueryable fournies par EF et sait comment résoudre les requêtes de manière asynchrone pour plus d’efficacité.

Ajoutez une référence de package pour le package NuGet Microsoft.AspNetCore.Components.QuickGrid.EntityFrameworkAdapter.

Remarque

Appelez AddQuickGridEntityFrameworkAdapter sur la collection de services dans le fichier Program pour inscrire une implémentation de IAsyncQueryExecutor prenant en charge EF :

builder.Services.AddQuickGridEntityFrameworkAdapter();

L’exemple suivant utilise un ExampleTable DbSet<TEntity> (table) d’un contexte de base de données AppDbContext (context) comme source de données pour un composant QuickGrid :

@using Microsoft.AspNetCore.Components.QuickGrid
@using Microsoft.EntityFrameworkCore
@implements IAsyncDisposable
@inject IDbContextFactory<AppDbContext> DbFactory

...

<QuickGrid ... Items="context.ExampleTable" ...>
    ...
</QuickGrid>

@code {
    private AppDbContext context = default!;

    protected override void OnInitialized()
    {
        context = DbFactory.CreateDbContext();
    }

    public async ValueTask DisposeAsync() => await context.DisposeAsync();
}

Dans le bloc de code (@code) de l’exemple précédent :

Le champ context détient le contexte de base de données, tapé sous la forme AppDbContext.
La méthode de cycle de vie OnInitialized affecte un nouveau contexte de base de données (CreateDbContext) au champ context de la fabrique injectée (DbFactory).
La méthode DisposeAsync asynchrone supprime le contexte de base de données lorsque le composant est supprimé.

Vous pouvez également utiliser n’importe quel opérateur LINQ pris en charge par EF pour filtrer les données avant de le transmettre au paramètre Items.

L’exemple suivant filtre les films par un titre de film entré dans une zone de recherche. Le contexte de base de données est BlazorWebAppMoviesContext et le modèle est Movie. La propriété Title du film est utilisée pour l’opération de filtre.

@using Microsoft.AspNetCore.Components.QuickGrid
@using Microsoft.EntityFrameworkCore
@implements IAsyncDisposable
@inject IDbContextFactory<BlazorWebAppMoviesContext> DbFactory

...

<p>
    <input type="search" @bind="titleFilter" @bind:event="oninput" />
</p>

<QuickGrid ... Items="FilteredMovies" ...>
    ...
</QuickGrid>

@code {
    private string titleFilter = string.Empty;
    private BlazorWebAppMoviesContext context = default!;

    protected override void OnInitialized()
    {
        context = DbFactory.CreateDbContext();
    }

    private IQueryable<Movie> FilteredMovies => 
        context.Movie.Where(m => m.Title!.Contains(titleFilter));

    public async ValueTask DisposeAsync() => await context.DisposeAsync();
}

Prise en charge des noms d’affichage

Un titre de colonne peut être affecté en utilisant ColumnBase<TGridItem>.Title dans la balise de PropertyColumn<TGridItem,TProp>. Dans l’exemple de film suivant, le nom « Release Date » est affecté à la colonne pour les données de date de sortie d’un film de la colonne :

<PropertyColumn Property="movie => movie.ReleaseDate" Title="Release Date" />

Cependant, la gestion des titres (noms) de colonne à partir des propriétés du modèle lié est généralement un meilleur choix pour la maintenance d’une application. Un modèle peut contrôler le nom d’affichage d’une propriété avec l’attribut [Display]. Dans l’exemple suivant, le modèle spécifie un nom d’affichage de la date de sortie d’un film « Release Date » pour sa propriété ReleaseDate :

[Display(Name = "Release Date")]
public DateTime ReleaseDate { get; set; }

Pour permettre au composant QuickGrid d’utiliser le DisplayAttribute.Name, créez une sous-classe pour PropertyColumn<TGridItem,TProp> dans le composant ou dans une classe distincte :

public class DisplayNameColumn<TGridItem, TProp> : PropertyColumn<TGridItem, TProp>
{
    protected override void OnParametersSet()
    {
        if (Title is null && Property.Body is MemberExpression memberExpression)
        {
            var memberInfo = memberExpression.Member;
            Title = 
                memberInfo.GetCustomAttribute<DisplayNameAttribute>().DisplayName ??
                memberInfo.GetCustomAttribute<DisplayAttribute>().Name ??
                memberInfo.Name;
        }

        base.OnParametersSet();
    }
}

Utilisez la sous-classe dans le composant QuickGrid. Dans l’exemple suivant, le DisplayNameColumn précédent est utilisé. Le nom « Release Date » est fourni par l’attribut [Display] dans le modèle : il n’est donc pas nécessaire de spécifier un Title :

<DisplayNameColumn Property="movie => movie.ReleaseDate" />

L’attribut [DisplayName] est également pris en charge :

[DisplayName("Release Date")]
public DateTime ReleaseDate { get; set; }

Cependant, l’attribut [Display] est recommandé, car il rend les propriétés supplémentaires disponibles. Par exemple, l’attribut [Display] offre la possibilité d’affecter un type de ressource pour la localisation.

Données distantes

Dans les applications Blazor WebAssembly, il est couramment exigé d’extraire les données à partir d’une API web sur un serveur et basée sur JSON. Pour extraire uniquement les données requises pour la page/fenêtre d’affichage actuelle de données et appliquer des règles de tri ou de filtrage sur le serveur, utilisez le paramètre ItemsProvider.

ItemsProvider peut également être utilisé dans une application Blazor côté serveur si l’application est requise pour interroger un point de terminaison externe. Il peut également être utilisé là où les exigences ne sont pas couvertes par un élément IQueryable.

Fournissez un rappel correspondant au type de délégué GridItemsProvider<TGridItem>, où TGridItem est le type de donnée affichée dans la grille. Le rappel reçoit un paramètre de type GridItemsProviderRequest<TGridItem> qui spécifie l’index de départ, le nombre maximal de lignes et l’ordre de tri des données à retourner. En plus de retourner les éléments correspondants, un nombre total d’éléments (totalItemCount) est également nécessaire pour le bon fonctionnement de la pagination et de la virtualisation.

L’exemple suivant obtient des données à partir de la base de données OpenFDA Food Enforcement publique.

L’élément GridItemsProvider<TGridItem> convertit l’élément GridItemsProviderRequest<TGridItem> en requête visant la base de données OpenFDA. Les paramètres de requête sont traduits dans le format d’URL particulier pris en charge par l’API JSON externe. Il est uniquement possible d’effectuer le tri et le filtrage par le biais des fonctionnalités de tri et de filtrage prises en charge par l’API externe. Le point de terminaison OpenFDA ne prend pas en charge le tri. Ainsi, aucune des colonnes ne sont indiquées comme triables. Toutefois, il prend en charge la fonctionnalité d’ignorer les enregistrements (paramètre skip) et de limiter le retour d’enregistrements (paramètre limit), de sorte que le composant peut activer la virtualisation et rapidement faire défiler des dizaines de milliers d’enregistrements.

FoodRecalls.razor :

@page "/food-recalls"
@inject HttpClient Http
@inject NavigationManager Navigation

<PageTitle>Food Recalls</PageTitle>

<h1>OpenFDA Food Recalls</h1>

<div class="grid" tabindex="-1">
    <QuickGrid ItemsProvider="@foodRecallProvider" Virtualize="true">
        <PropertyColumn Title="ID" Property="@(c => c.Event_Id)" />
        <PropertyColumn Property="@(c => c.State)" />
        <PropertyColumn Property="@(c => c.City)" />
        <PropertyColumn Title="Company" Property="@(c => c.Recalling_Firm)" />
        <PropertyColumn Property="@(c => c.Status)" />
    </QuickGrid>
</div>

<p>Total: <strong>@numResults results found</strong></p>

@code {
    private GridItemsProvider<FoodRecall>? foodRecallProvider;
    private int numResults;

    protected override async Task OnInitializedAsync()
    {
        foodRecallProvider = async req =>
        {
            var url = Navigation.GetUriWithQueryParameters(
                "https://api.fda.gov/food/enforcement.json", 
                new Dictionary<string, object?>
            {
                { "skip", req.StartIndex },
                { "limit", req.Count },
            });

            var response = await Http.GetFromJsonAsync<FoodRecallQueryResult>(
                url, req.CancellationToken);

            return GridItemsProviderResult.From(
                items: response!.Results,
                totalItemCount: response!.Meta.Results.Total);
        };

        numResults = (await Http.GetFromJsonAsync<FoodRecallQueryResult>(
            "https://api.fda.gov/food/enforcement.json"))!.Meta.Results.Total;
    }
}

Pour plus d’informations sur l’appel des API web, consultez Appeler une API web à partir d’une application Blazor ASP.NET Core.

`QuickGrid` générateur de modèles automatique

Le générateur de modèles automatique QuickGrid génère des modèles de composants Razor avec QuickGrid pour afficher des données à partir d’une base de données.

Le générateur de modèles automatique génère des pages CRUD (Create, Read, Update et Delete) simples basées sur un modèle de données Entity Framework Core. Vous pouvez générer des pages individuelles ou toutes les pages CRUD. Vous sélectionnez la classe de modèle et le DbContext, en créant éventuellement un nouveau DbContext si nécessaire.

Les composants Razor générés sont ajoutés au projet dans un dossier généré nommé d’après la classe de modèle. Le composant Index généré utilise un composant QuickGrid pour afficher les données. Personnalisez les composants générés en fonction des besoins, et activez l’interactivité pour tirer parti des fonctionnalités interactives, comme la pagination, le tri et le filtrage.

Les composants générés par le générateur de modèles automatique nécessitent un rendu côté serveur (SSR) : ils ne sont donc pas pris en charge lors de l’exécution sur WebAssembly.

Cliquez avec le bouton droit sur le dossier Components/Pages et sélectionnez Ajouter>Nouvel élément de modèle généré automatiquement.

Avec la boîte de dialogue Ajouter un nouvel élément généré automatiquement ouverte et affichant Installé>Commun>Blazor>RazorComposant, sélectionnez Composants Razor utilisant Entity Framework (CRUD). Cliquez sur le bouton Ajouter.

CRUD est un acronyme pour créer, lire, mettre à jour et supprimer. Le générateur de modèles produit des composants de création, de modification, de suppression, de détails et d’index pour l’application.

Renseignez la boîte de dialogue Ajouter des composants Razor utilisant Entity Framework (CRUD) :

La liste déroulante Modèle inclut d’autres modèles pour créer spécifiquement des composants de création, modification, suppression, détails et liste. Cette liste déroulante est pratique lorsque vous n’avez besoin de créer qu’un type spécifique de composant généré automatiquement dans une classe de modèle. Laissez la liste déroulante Modèle définie sur CRUD pour générer automatiquement un ensemble complet de composants.
Dans la liste déroulante Classe de modèle, sélectionnez la classe de modèle. Un dossier est créé pour les composants générés à partir du nom du modèle (si la classe de modèle se nomme Movie, le dossier est automatiquement nommé MoviePages).
Pour la classe DbContext, sélectionnez un contexte de base de données existant ou sélectionnez le bouton + (signe plus) et la boîte de dialogue modale Ajouter un contexte de données pour ajouter un nouveau contexte de base de données.
Une fois la boîte de dialogue du modèle fermée, la liste déroulante Fournisseur de base de données prend par défaut la valeur SQL Server. Vous pouvez sélectionner le fournisseur approprié pour la base de données que vous utilisez. Les options incluent SQL Server, SQLite, PostgreSQL et Azure Cosmos DB.
Sélectionnez Ajouter.

Collez toutes les commandes suivantes à l’invite (>) du Terminal (menu Terminal >Nouveau terminal) ouvert au répertoire racine du projet. Lorsque vous collez plusieurs commandes, un avertissement s’affiche pour indiquer que plusieurs commandes vont s’exécuter. Ignorez l’avertissement et continuez avec l’opération de collage.

Lorsque vous collez plusieurs commandes, toutes les commandes s’exécutent à l’exception de la dernière. La dernière commande ne s’exécute pas tant que vous n’appuyez pas sur la touche Entrée du clavier.

dotnet tool install --global dotnet-aspnet-codegenerator
dotnet tool install --global dotnet-ef
dotnet add package Microsoft.EntityFrameworkCore.SQLite
dotnet add package Microsoft.VisualStudio.Web.CodeGeneration.Design
dotnet add package Microsoft.EntityFrameworkCore.SqlServer
dotnet add package Microsoft.EntityFrameworkCore.Tools
dotnet add package Microsoft.AspNetCore.Components.QuickGrid
dotnet add package Microsoft.AspNetCore.Components.QuickGrid.EntityFrameworkAdapter

Important

Une fois les huit premières commandes exécutées, veillez à appuyer sur Entrée sur le clavier pour exécuter la dernière commande.

Les commandes précédentes ajoutent :

Outils de l’interface de ligne de commande (CLI) pour EF Core
Outil de génération automatique de modèles aspnet-codegenerator
Outils de temps de conception pour EF Core
Les fournisseurs SQLite et SQL Server avec le package EF Core en tant que dépendance
Microsoft.VisualStudio.Web.CodeGeneration.Design pour la génération automatique de modèles

Dans le Terminal, exécutez la commande suivante pour générer automatiquement un ensemble complet de composants avec le modèle CRUD :

dotnet aspnet-codegenerator blazor CRUD -dbProvider {PROVIDER} -dc {DB CONTEXT CLASS} -m {MODEL} -outDir {PATH}

Remarque

La commande précédente est une commande CLI .NET, et les commandes CLI .NET sont exécutées lorsqu’elles sont entrées une invite PowerShell, qui est l’interpréteur de commandes par défaut du Terminal VS Code.

Le tableau suivant décrit les options du générateur de code ASP.NET Core dans la commande précédente.

Option	Espace réservé	Description
`-dbProvider`	`{PROVIDER}`	Fournisseur de base de données à utiliser. Les options incluent `sqlserver` (par défaut), `sqlite`, `cosmos`, `postgres`.
`-dc`	`{DB CONTEXT CLASS}`	Classe DbContext à utiliser, y compris l’espace de noms.
`-m`	`{MODEL}`	Nom de la classe de modèle.
`-outDir`	`{PATH}`	Répertoire de sortie des composants générés. Un dossier est créé à partir du nom du modèle dans le répertoire de sortie, afin de stocker les composants (si la classe de modèle se nomme `Movie`, le dossier est automatiquement nommé `MoviePages`). Le chemin d’accès est généralement `Components/Pages` pour une application web Blazor Web App, ou `Pages` pour une application Blazor WebAssembly autonome.

Pour les options de fournisseur Blazor supplémentaires, utilisez l’option d’aide de l’interface CLI .NET (-h|--help) :

dotnet aspnet-codegenerator blazor -h

Collez toutes les commandes suivantes à l’invite (>) d’un interpréteur de commandes ouvert dans le répertoire racine du projet. Lorsque vous collez plusieurs commandes, un avertissement s’affiche pour indiquer que plusieurs commandes vont s’exécuter. Ignorez l’avertissement et continuez avec l’opération de collage.

dotnet tool install --global dotnet-aspnet-codegenerator
dotnet tool install --global dotnet-ef
dotnet add package Microsoft.EntityFrameworkCore.SQLite
dotnet add package Microsoft.VisualStudio.Web.CodeGeneration.Design
dotnet add package Microsoft.EntityFrameworkCore.SqlServer
dotnet add package Microsoft.EntityFrameworkCore.Tools
dotnet add package Microsoft.AspNetCore.Components.QuickGrid
dotnet add package Microsoft.AspNetCore.Components.QuickGrid.EntityFrameworkAdapter

Important

Une fois les huit premières commandes exécutées, veillez à appuyer sur Entrée sur le clavier pour exécuter la dernière commande.

Les commandes précédentes ajoutent :

Outils de l’interface de ligne de commande (CLI) pour EF Core
Outil de génération automatique de modèles aspnet-codegenerator
Outils de temps de conception pour EF Core
Les fournisseurs SQLite et SQL Server avec le package EF Core en tant que dépendance
Microsoft.VisualStudio.Web.CodeGeneration.Design pour la génération automatique. de modèles.

Dans un interpréteur de commandes, exécutez la commande suivante pour générer automatiquement un ensemble complet de composants avec le modèle CRUD :

dotnet aspnet-codegenerator blazor CRUD -dbProvider {PROVIDER} -dc {DB CONTEXT CLASS} -m {MODEL} -outDir {PATH}

Le tableau suivant décrit les options du générateur de code ASP.NET Core dans la commande précédente.

Option	Espace réservé	Description
`-dbProvider`	`{PROVIDER}`	Fournisseur de base de données à utiliser. Les options incluent `sqlserver` (par défaut), `sqlite`, `cosmos`, `postgres`.
`-dc`	`{DB CONTEXT CLASS}`	Classe DbContext à utiliser, y compris l’espace de noms.
`-m`	`{MODEL}`	Nom de la classe de modèle.
`-outDir`	`{PATH}`	Répertoire de sortie des composants générés. Un dossier est créé à partir du nom du modèle dans le répertoire de sortie, afin de stocker les composants (si la classe de modèle se nomme `Movie`, le dossier est automatiquement nommé `MoviePages`). Le chemin d’accès est généralement `Components/Pages` pour une application web Blazor Web App, ou `Pages` pour une application Blazor WebAssembly autonome.

Pour les options de fournisseur Blazor supplémentaires, utilisez l’option d’aide de l’interface CLI .NET (-h|--help) :

dotnet aspnet-codegenerator blazor -h

Partage via

composant ASP.NET Core Blazor `QuickGrid`

Package

Exemple d’application

Implémentation `QuickGrid`

Trier par colonne

Éléments de page avec un composant `Paginator`

Attributs et styles personnalisés

Source de données Entity Framework Core (EF Core)

Prise en charge des noms d’affichage

Données distantes

`QuickGrid` générateur de modèles automatique

Ressources supplémentaires

Partage via

composant ASP.NET Core Blazor QuickGrid

Package

Exemple d’application

Implémentation QuickGrid

Trier par colonne

Éléments de page avec un composant Paginator

Attributs et styles personnalisés

Source de données Entity Framework Core (EF Core)

Prise en charge des noms d’affichage

Données distantes

QuickGrid générateur de modèles automatique

Ressources supplémentaires

composant ASP.NET Core Blazor `QuickGrid`

Implémentation `QuickGrid`

Éléments de page avec un composant `Paginator`

`QuickGrid` générateur de modèles automatique