composant ASP.NET Core BlazorQuickGrid

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.
• 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 triable par défaut 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.

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

Le composant suppose que le mode de rendu Serveur interactif (InteractiveServer) est hérité d’un composant parent ou appliqué globalement à l’application, ce qui active les fonctionnalités interactives. Dans l’exemple suivant, la seule fonctionnalité interactive est la possibilité de trier les colonnes.

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();
}

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.

Attributs et styles personnalisés

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

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

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

L’élément DbContext de EF Core fournit une propriété DbSet<TEntity> pour chaque table dans la base de données. Affectez la propriété au paramètre Items.

L’exemple suivant utilise l’élément PeopleDbSet<TEntity> (table) comme source de données :

@inject ApplicationDbContext AppDbContext

<QuickGrid Items="@AppDbContext.People">
    ...
</QuickGrid>

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

L’exemple suivant filtre les documents par ID de catégorie :

<QuickGrid Items="@AppDbContext.Documents.Where(d => d.CategoryId == categoryId)">
    ...
</QuickGrid>

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é.

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

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.

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();

Données distantes

Dans les applications Blazor WebAssembly, il est couramment exigé d’extraire des données à partir d’une API web basée sur JSON sur un serveur. 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 n’est indiquée comme triable. 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 NavManager

<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 {
    GridItemsProvider<FoodRecall>? foodRecallProvider;
    int numResults;

    protected override async Task OnInitializedAsync()
    {
        foodRecallProvider = async req =>
        {
            var url = NavManager.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 dans Visual Studio génère des modèles de composants Razor avec QuickGrid pour afficher des données à partir d’une base de données.

Pour utiliser le générateur de modèles automatique, cliquez avec le bouton droit sur le projet dans l’Explorateur de solutions, puis sélectionnez Ajouter>Nouvel élément généré automatiquement. Ouvrez Installé>Commun>Composant Razor. Sélectionnez RazorComposants utilisant Entity Framework (CRUD).

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 dossier Pages du projet, dans un dossier généré nommé d’après la classe de modèle. Le composant Index généré utilise 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 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.