ASP.NET Core Razor-Komponentenvirtualisierung

RefreshDataAsync aktualisiert die Daten einer Virtualize<TItem>-Komponente, ohne ein Rerendering auszulösen. Wenn RefreshDataAsync von einem Blazor-Ereignishandler oder einer Lebenszyklusmethode für Komponenten aufgerufen wird, ist das Auslösen eines Renderings nicht erforderlich, da nach dem Ausführen des Ereignishandlers oder der Lebenszyklusmethode automatisch ein Rendering ausgelöst wird. Wenn RefreshDataAsync unabhängig von einer Hintergrundaufgabe oder einem Hintergrundereignis ausgelöst wird, wie etwa im folgenden ForecastUpdated-Delegaten, rufen Sie StateHasChanged auf, sodass die Benutzeroberfläche nach dem Ausführen der Hintergrundaufgabe oder nach dem Hintergrundereignis aktualisiert wird:

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

...

private Virtualize<FetchData>? virtualizeComponent;

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

Im vorherigen Beispiel:

• RefreshDataAsync wird zuerst aufgerufen, um neue Daten für die Virtualize<TItem>-Komponente abzurufen.
• StateHasChanged wird aufgerufen, um die Komponente erneut zu rendern.

Leerer Inhalt

Verwenden Sie den Parameter EmptyContent, um Inhalte bereitzustellen, wenn die Komponente geladen wurde und entweder Items leer oder ItemsProviderResult<TItem>.TotalItemCount null ist.

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

Ändern Sie die Lambdafunktion der OnInitialized-Methode, damit die Komponente Zeichenfolgen anzeigt:

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

Unterstützung für Scrollen über die Tastatur

Damit Benutzer*innen virtualisierte Inhalte mithilfe der Tastatur scrollen können, sorgen Sie dafür, dass die virtualisierten Elemente oder der Scrollcontainer selbst fokussierbar sind. Wenn Sie diesen Schritt nicht durchführen, funktioniert das Scrollen über die Tastatur in Chromium-basierten Browsern nicht.

Beispielsweise können Sie ein tabindex-Attribut für den Scrollcontainer verwenden:

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

Weitere Informationen zur Bedeutung der tabindex-Werte -1, 0 oder anderer Werte finden Sie unter tabindex (MDN-Dokumentation).

Erweiterte Stile und Scrollerkennung

Die Virtualize<TItem>-Komponente dient lediglich der Unterstützung bestimmter Elementlayoutmechanismen. Damit Sie erkennen können, welche Elementlayouts ordnungsgemäß funktionieren, wird im Folgenden erläutert, wie Virtualize erkennt, welche Elemente für die Anzeige an der richtigen Stelle sichtbar sein müssen.

Wenn Ihr Quellcode wie folgt aussieht:

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

Die Virtualize<TItem>-Komponente rendert eine DOM-Struktur wie die folgende zur Laufzeit:

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

Die tatsächliche Anzahl der gerenderten Zeilen und die Größe der Abstandhalter sind je nach Stil und Items-Sammlungsgröße unterschiedlich. Beachten Sie jedoch, dass div-Abstandhalterelemente vor und nach dem Inhalt eingefügt werden. Diese haben zwei Aufgaben:

• Sie sollen vor und nach dem Inhalt einen Offset bereitstellen, wodurch derzeit sichtbare Elemente an der richtigen Stelle im Scrollbereich angezeigt werden und im Scrollbereich selbst die Gesamtgröße des gesamten Inhalts dargestellt wird.
• Sie sollen erkennen, wenn Benutzer*innen über den aktuell sichtbaren Bereich hinaus scrollen. Das bedeutet, dass verschiedene Inhalte gerendert werden müssen.

Die Abstandhalterelemente verwenden intern eine API vom Typ Intersection Observer, um Benachrichtigungen zu erhalten, wenn sie sichtbar werden. Virtualize ist auf den Empfang dieser Ereignisse angewiesen.

Virtualize funktioniert unter den folgenden Bedingungen:

• Alle gerenderten Inhaltselemente, einschließlich Platzhalterinhalte, weisen die gleiche Höhe auf. Dadurch kann berechnet werden, welcher Inhalt einer bestimmten Scrollposition entspricht, ohne zuerst jedes Datenelement abrufen und die Daten in ein DOM-Element rendern zu müssen.

• Sowohl die Abstandshalter als auch die Inhaltszeilen werden in einem einzigen vertikalen Stapel gerendert, wobei jedes Element die gesamte horizontale Breite ausfüllt. In typischen Anwendungsfällen funktioniert Virtualize mit div-Elementen. Wenn Sie zum Erstellen eines anspruchsvolleren Layouts CSS verwenden, sollten Sie die folgenden Anforderungen beachten:

  • Für die Formatierung von Scrollcontainern ist ein display mit einem der folgenden Werte erforderlich:
    • block (Standardwert für div).
    • table-row-group (Standardwert für tbody).
    • flex, wobei flex-direction auf column festgelegt ist. Stellen Sie sicher, dass die unmittelbar untergeordneten Elemente der Komponente Virtualize<TItem> bei flexiblen Regeln nicht verkleinert werden. Fügen Sie beispielsweise .mycontainer > div { flex-shrink: 0 } hinzu.
  • Für das Formatieren von Inhaltszeilen ist ein display mit einem der folgenden Werte erforderlich:
    • block (Standardwert für div).
    • table-row (Standardwert für tr).
  • Verwenden Sie kein CSS, um in das Layout der Abstandhalterelemente einzugreifen. Die Abstandselemente haben einen display-Wert von block, es sei denn, das übergeordnete Element ist eine Tabellenzeilengruppe; in diesem Fall haben sie den Standardwert table-row. Versuchen Sie nicht, die Breite oder Höhe des Abstandhalterelements zu beeinflussen, auch nicht, indem Sie einen Rahmen oder content-Pseudoelemente hinzufügen.

Jeder Ansatz, der das Rendern der Abstandhalter und Inhaltselemente als einzelnen vertikalen Stapel verhindert oder dazu führt, dass die Inhaltselemente in der Höhe variieren, verhindert, dass die Virtualize<TItem>-Komponente ordnungsgemäß funktioniert.

Die Virtualize<TItem>-Komponente unterstützt die Verwendung des eigentlichen Dokuments als Scrollstamm (alternativ zur Verwendung eines anderen Elements mit overflow-y: scroll). Im folgenden Beispiel werden die <html>- oder <body>-Elemente in einer Komponente mit overflow-y: scroll formatiert:

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

Die Virtualize<TItem>-Komponente unterstützt die Verwendung des eigentlichen Dokuments als Scrollstamm (alternativ zur Verwendung eines anderen Elements mit overflow-y: scroll). Wenn Sie das Dokument als Scrollstamm verwenden, vermeiden Sie es, die Elemente vom Typ <html> oder <body> mit overflow-y: scroll zu formatieren, da dies dazu führt, dass der Schnittpunktbeobachter die vollständige scrollbare Höhe der Seite als sichtbaren Bereich behandelt, anstatt nur den Viewport des Fensters.

Sie können dieses Problem reproduzieren, indem Sie eine große virtualisierte Liste (z. B. 100.000 Elemente) erstellen und versuchen, das Dokument als Scrollstamm mit html { overflow-y: scroll } in den CSS-Formatvorlagen der Seite zu verwenden. Das funktioniert zwar manchmal ordnungsgemäß, der Browser versucht jedoch mindestens einmal am Anfang des Renderings, alle 100.000 Elemente zu rendern, was dazu führen kann, dass der Browser-Tab nicht mehr reagiert.

Sehen Sie entweder davon ab, Elemente vom Typ <html>/<body> mit overflow-y: scroll zu formatieren, oder verwenden sie einen alternativen Ansatz, um dieses Problem vor dem Release von .NET 7 zu umgehen. Im folgenden Beispiel wird die Höhe des <html>-Elements auf etwas über 100 Prozent der Viewporthöhe festgelegt:

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

Die Virtualize<TItem>-Komponente unterstützt die Verwendung des eigentlichen Dokuments als Scrollstamm (alternativ zur Verwendung eines anderen Elements mit overflow-y: scroll). Wenn Sie das Dokument als Bildlaufstamm verwenden, vermeiden Sie es, die <html>- oder <body>-Elemente mit overflow-y: scroll zu formatieren, da dies dazu führt, dass die gesamte scrollbare Höhe der Seite als sichtbarer Bereich behandelt wird und nicht nur der Ansichtsbereich des Fensters.

Sie können dieses Problem reproduzieren, indem Sie eine große virtualisierte Liste (z. B. 100.000 Elemente) erstellen und versuchen, das Dokument als Scrollstamm mit html { overflow-y: scroll } in den CSS-Formatvorlagen der Seite zu verwenden. Das funktioniert zwar manchmal ordnungsgemäß, der Browser versucht jedoch mindestens einmal am Anfang des Renderings, alle 100.000 Elemente zu rendern, was dazu führen kann, dass der Browser-Tab nicht mehr reagiert.

Sehen Sie entweder davon ab, Elemente vom Typ <html>/<body> mit overflow-y: scroll zu formatieren, oder verwenden sie einen alternativen Ansatz, um dieses Problem vor dem Release von .NET 7 zu umgehen. Im folgenden Beispiel wird die Höhe des <html>-Elements auf etwas über 100 Prozent der Viewporthöhe festgelegt:

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

Steuern des Tagnamens für das Abstandhalterelement

Wenn die Virtualize<TItem>-Komponente innerhalb eines Elements platziert wird, das einen bestimmten untergeordneten Tagnamen erfordert, ermöglicht SpacerElement das Abrufen oder Festlegen des Tagnamens für den Virtualisierungsabstandhalter. Standardwert: div. Im folgenden Beispiel rendert die Virtualize<TItem>-Komponente innerhalb eines Tabellentextelements (tbody). Daher wird das entsprechende untergeordnete Element für eine Tabellenzeile (tr) als Abstandhalter festgelegt.

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

Im vorherigen Beispiel wird der Dokumentstamm als Scrollcontainer verwendet. Daher werden die html- und body-Elemente mit overflow-y: scroll formatiert. Weitere Informationen finden Sie in den folgenden Ressourcen:

• Abschnitt Virtualisierung auf Stammebene
• Steuern des Inhalts von in ASP.NET Core-Blazor-Apps