Virtualisation de composants ASP.NET Core Razor

RefreshDataAsync met à jour les données d’un composant Virtualize<TItem> sans provoquer de nouvelle mise à jour. Si RefreshDataAsync est appelé à partir d’un gestionnaire d’événements Blazor ou d’une méthode de cycle de vie de composant, le déclenchement d’un rendu n’est pas obligatoire, car un rendu est automatiquement déclenché à la fin du gestionnaire d’événements ou de la méthode de cycle de vie. Si RefreshDataAsync est déclenché séparément d’une tâche ou d’un événement en arrière-plan, comme dans le délégué ForecastUpdated suivant, appelez StateHasChanged pour mettre à jour l’interface utilisateur à la fin de la tâche ou de l’événement en arrière-plan :

<Virtualize ... @ref="virtualizeComponent">
    ...
</Virtualize>

...

private Virtualize<FetchData>? virtualizeComponent;

protected override void OnInitialized()
{
    WeatherForecastSource.ForecastUpdated += async () => 
    {
        await InvokeAsync(async () =>
        {
            await virtualizeComponent?.RefreshDataAsync();
            StateHasChanged();
        });
    });
}

Dans l'exemple précédent :

• RefreshDataAsync est appelé en premier pour obtenir de nouvelles données pour le composant Virtualize<TItem>.
• StateHasChanged est appelé pour effectuer à nouveau le rendu du composant.

Contenu vide

Utilisez le paramètre EmptyContent pour fournir du contenu lorsque le composant a été chargé et que Items est vide ou ItemsProviderResult<TItem>.TotalItemCount égal à zéro.

EmptyContent.razor :

@page "/empty-content"

<PageTitle>Empty Content</PageTitle>

<h1>Empty Content Example</h1>

<Virtualize Items="stringList">
    <ItemContent>
        <p>
            @context
        </p>
    </ItemContent>
    <EmptyContent>
        <p>
            There are no strings to display.
        </p>
    </EmptyContent>
</Virtualize>

@code {
    private List<string>? stringList;

    protected override void OnInitialized() => stringList ??= new();
}

@page "/empty-content"

<PageTitle>Empty Content</PageTitle>

<h1>Empty Content Example</h1>

<Virtualize Items="stringList">
    <ItemContent>
        <p>
            @context
        </p>
    </ItemContent>
    <EmptyContent>
        <p>
            There are no strings to display.
        </p>
    </EmptyContent>
</Virtualize>

@code {
    private List<string>? stringList;

    protected override void OnInitialized() => stringList ??= new();
}

Modifiez la méthode OnInitialized lambda pour consulter les chaînes d’affichage du composant :

protected override void OnInitialized() =>
    stringList ??= new() { "Here's a string!", "Here's another string!" };

Prise en charge du défilement au clavier

Pour permettre aux utilisateurs de faire défiler du contenu virtualisé à l’aide de leur clavier, assurez-vous que les éléments virtualisés ou le conteneur de défilement lui-même peuvent faire l’objet du focus. Si vous ne parvenez pas à effectuer cette étape, le défilement au clavier ne fonctionne pas dans les navigateurs basés sur Chromium.

Par exemple, vous pouvez utiliser un attribut tabindex sur le conteneur de défilement :

<div style="height:500px; overflow-y:scroll" tabindex="-1">
    <Virtualize Items="allFlights">
        <div class="flight-info">...</div>
    </Virtualize>
</div>

Pour en savoir plus sur la signification de la valeur tabindex -1, 0 ou d’autres valeurs, consultez tabindex (documentation MDN).

Styles avancés et détection de défilement

Le composant Virtualize<TItem> est conçu uniquement pour prendre en charge des mécanismes de disposition d’éléments spécifiques. Pour comprendre les dispositions d’éléments qui fonctionnent correctement, l’article suivant explique comment Virtualize détecte les éléments qui doivent être visibles pour être affichés à l’emplacement approprié.

Si votre code source ressemble à ce qui suit :

<div style="height:500px; overflow-y:scroll" tabindex="-1">
    <Virtualize Items="allFlights" ItemSize="100">
        <div class="flight-info">Flight @context.Id</div>
    </Virtualize>
</div>

Au moment de l’exécution, le composant Virtualize<TItem> restitue une structure DOM similaire à ce qui suit :

<div style="height:500px; overflow-y:scroll" tabindex="-1">
    <div style="height:1100px"></div>
    <div class="flight-info">Flight 12</div>
    <div class="flight-info">Flight 13</div>
    <div class="flight-info">Flight 14</div>
    <div class="flight-info">Flight 15</div>
    <div class="flight-info">Flight 16</div>
    <div style="height:3400px"></div>
</div>

Le nombre réel de lignes rendues et la taille des interlignes varient en fonction de votre style et de la taille de la collection Items. Toutefois, notez qu’il existe des éléments d’espacement div injectés avant et après votre contenu. Ils remplissent deux fonctions :

• Fournir un décalage avant et après votre contenu, ce qui entraîne l’affichage des éléments actuellement visibles à l’emplacement approprié dans la plage de défilement et la plage de défilement elle-même pour représenter la taille totale de tout le contenu.
• Détecter quand l’utilisateur fait défiler au-delà de la plage visible actuelle, ce qui signifie que du contenu différent doit être rendu.

Les éléments d’espacement utilisent un observateur d’intersection en interne pour recevoir une notification lorsqu’ils deviennent visibles. Virtualize dépend de la réception de ces événements.

Virtualize fonctionne dans les conditions suivantes :

• Tous les éléments de contenu rendus, y compris le contenu d’espace réservé, sont de hauteur identique. Cela permet de calculer le contenu correspondant à une position de défilement donnée sans extraire au préalable chaque élément de données et rendre les données dans un élément DOM.

• Les espacements et les lignes de contenu sont affichés dans une seule pile verticale, chaque élément remplissant toute la largeur horizontale. Dans les cas d’usage classiques, Virtualize, fonctionne avec des éléments div. Si vous utilisez CSS pour créer une disposition plus avancée, gardez à l’esprit les exigences suivantes :

  • Le style de conteneur de défilement nécessite un display avec l’une des valeurs suivantes :
    • block (par défaut pour div).
    • table-row-group (par défaut pour tbody).
    • flex avec flex-direction défini sur column. Assurez-vous que les enfants immédiats du composant Virtualize<TItem> ne sont pas réduits selon des règles flexibles. Par exemple, ajoutez .mycontainer > div { flex-shrink: 0 }.
  • Le style de ligne de contenu nécessite un display avec l’une des valeurs suivantes :
    • block (par défaut pour div).
    • table-row (par défaut pour tr).
  • N’utilisez pas CSS pour interférer avec la disposition des éléments d’espacement. Les éléments d’espacement ont une valeur display de block, sauf si le parent est un groupe de lignes de tableau, auquel cas ils ont la valeur par défaut table-row. N’essayez pas d’influencer la largeur ou la hauteur des éléments d’espacement, notamment en leur faisant avoir une bordure ou des pseudo-éléments content.

Toute approche qui empêche les espacements et les éléments de contenu de s’afficher sous la forme d’une pile verticale unique, ou qui fait varier les éléments de contenu en hauteur, empêche le bon fonctionnement du composant Virtualize<TItem>.

Le composant Virtualize<TItem> prend en charge l’utilisation du document lui-même comme racine de défilement, comme alternative à l’utilisation d’un autre élément avec overflow-y: scroll. Dans l’exemple suivant, les éléments <html> ou <body> sont mis en forme dans un composant avec overflow-y: scroll :

<HeadContent>
    <style>
        html, body { overflow-y: scroll }
    </style>
</HeadContent>

Le composant Virtualize<TItem> prend en charge l’utilisation du document lui-même comme racine de défilement, comme alternative à l’utilisation d’un autre élément avec overflow-y: scroll. Lorsque vous utilisez le document comme racine de défilement, évitez de mettre en forme les éléments <html> ou <body> avec overflow-y: scroll, car cela oblige l’observateur d’intersection à traiter la hauteur de défilement complète de la page comme région visible, au lieu de la fenêtre d’affichage seule.

Vous pouvez reproduire ce problème en créant une grande liste virtualisée (par exemple, 100 000 éléments) et tenter d’utiliser le document comme racine de défilement avec html { overflow-y: scroll } dans les styles CSS de la page. Bien que cela puisse fonctionner correctement parfois, le navigateur tente de restituer les 100 000 éléments au moins une fois au début du rendu, ce qui peut entraîner un verrouillage de l’onglet du navigateur.

Pour contourner ce problème avant la publication de .NET 7, évitez les éléments de style <html>/<body> avec overflow-y: scroll, ou adoptez une autre approche. Dans l’exemple suivant, la hauteur de l’élément <html> est définie sur un peu plus de 100 % de la hauteur de la fenêtre d’affichage :

<HeadContent>
    <style>
        html { min-height: calc(100vh + 0.3px) }
    </style>
</HeadContent>

Le composant Virtualize<TItem> prend en charge l’utilisation du document lui-même comme racine de défilement, comme alternative à l’utilisation d’un autre élément avec overflow-y: scroll. Lorsque vous utilisez le document comme racine de défilement, évitez de mettre en forme les éléments <html> ou <body> avec overflow-y: scroll, car dans ce cas, la hauteur de défilement complète de la page est traitée comme la zone visible, au lieu de la fenêtre d’affichage.

Vous pouvez reproduire ce problème en créant une grande liste virtualisée (par exemple, 100 000 éléments) et tenter d’utiliser le document comme racine de défilement avec html { overflow-y: scroll } dans les styles CSS de la page. Bien que cela puisse fonctionner correctement parfois, le navigateur tente de restituer les 100 000 éléments au moins une fois au début du rendu, ce qui peut entraîner un verrouillage de l’onglet du navigateur.

Pour contourner ce problème avant la publication de .NET 7, évitez les éléments de style <html>/<body> avec overflow-y: scroll, ou adoptez une autre approche. Dans l’exemple suivant, la hauteur de l’élément <html> est définie sur un peu plus de 100 % de la hauteur de la fenêtre d’affichage :

<style>
    html { min-height: calc(100vh + 0.3px) }
</style>

Contrôle du nom de balise de l’élément d’espacement

Si le composant Virtualize<TItem> est placé à l’intérieur d’un élément qui nécessite un nom de balise enfant spécifique, SpacerElement vous permet d’obtenir ou de définir le nom de la balise d’espaceur de virtualisation. La valeur par défaut est div. Pour l’exemple suivant, le composant Virtualize<TItem> s’affiche à l’intérieur d’un élément de corps de table (tbody), de sorte que l’élément enfant approprié pour une ligne de table (tr) est défini comme espaceur.

VirtualizedTable.razor :

@page "/virtualized-table"

<PageTitle>Virtualized Table</PageTitle>

<HeadContent>
    <style>
        html, body {
            overflow-y: scroll
        }
    </style>
</HeadContent>

<h1>Virtualized Table Example</h1>

<table id="virtualized-table">
    <thead style="position: sticky; top: 0; background-color: silver">
        <tr>
            <th>Item</th>
            <th>Another column</th>
        </tr>
    </thead>
    <tbody>
        <Virtualize Items="fixedItems" ItemSize="30" SpacerElement="tr">
            <tr @key="context" style="height: 30px;" id="row-@context">
                <td>Item @context</td>
                <td>Another value</td>
            </tr>
        </Virtualize>
    </tbody>
</table>

@code {
    private List<int> fixedItems = Enumerable.Range(0, 1000).ToList();
}

Dans l’exemple précédent, la racine du document est utilisée comme conteneur de défilement, de sorte que les éléments html et body sont mis en forme avec overflow-y: scroll. Pour plus d'informations, reportez-vous aux ressources suivantes :

• Section Virtualisation au niveau racine
• Contrôler le contenu head dans les applications ASP.NET Core Blazor