ASP.NET Core-Blazor-Abschnitte

Hinweis

Dies ist nicht die neueste Version dieses Artikels. Die aktuelle Version finden Sie in der .NET 9-Version dieses Artikels.

Wichtig

Diese Informationen beziehen sich auf ein Vorabversionsprodukt, das vor der kommerziellen Freigabe möglicherweise noch wesentlichen Änderungen unterliegt. Microsoft gibt keine Garantie, weder ausdrücklich noch impliziert, hinsichtlich der hier bereitgestellten Informationen.

Die aktuelle Version finden Sie in der .NET 9-Version dieses Artikels.

In diesem Artikel wird erläutert, wie der Inhalt einer Razor-Komponente über eine untergeordnete Razor-Komponente gesteuert werden kann.

Blazor-Abschnitte

Um den Inhalt einer Razor-Komponente über eine untergeordnete Razor-Komponente zu steuern, unterstützt BlazorAbschnitte mit den folgenden integrierten Komponenten:

• SectionOutlet: Hiermit werden Inhalte gerendert, die von SectionContent-Komponenten mit übereinstimmenden SectionName- oder SectionId-Argumenten bereitgestellt werden. Zwei oder mehr SectionOutlet-Komponenten können nicht das gleiche SectionName- oder SectionId-Element aufweisen.

• SectionContent: Hiermit werden Inhalte als RenderFragment für SectionOutlet-Komponenten mit übereinstimmendem SectionName- oder SectionId-Element bereitgestellt. Wenn mehrere SectionContent-Komponenten das gleiche SectionName- oder SectionId-Element aufweisen, rendert die übereinstimmende SectionOutlet-Komponente den Inhalt des zuletzt gerenderten SectionContent-Elements.

Abschnitte können sowohl in Layouts als auch in über- bzw. untergeordneten geschachtelten Komponenten verwendet werden.

Obwohl das an SectionName übergebene Argument eine beliebige Schreibweise verwenden kann, wird in der Dokumentation der Kebab-Case-Ansatz verwendet (z. B. top-bar), der bei HTML-Element-IDs gängig ist. SectionId empfängt ein statisches object-Feld, und für C#-Feldnamen wird immer der Pascal-Case-Ansatz empfohlen (z. B. TopbarSection).

Im folgenden Beispiel implementiert die Hauptlayoutkomponente der App eine Inkrementzählerschaltfläche für die Counter-Komponente der App .

Wenn sich der Namespace für Abschnitte nicht in der Datei _Imports.razor befindet, fügen Sie ihn hinzu:

@using Microsoft.AspNetCore.Components.Sections

Platzieren Sie in der MainLayout-Komponente (MainLayout.razor) eine SectionOutlet-Komponente, und übergeben Sie eine Zeichenfolge an den SectionName-Parameter, um den Namen des Abschnitts anzugeben. Im folgenden Beispiel wird der Abschnittsname top-bar verwendet:

<SectionOutlet SectionName="top-bar" />

Erstellen Sie in der Counter-Komponente (Counter.razor) eine SectionContent-Komponente, und übergeben Sie die entsprechende Zeichenfolge (top-bar) an den SectionName-Parameter:

<SectionContent SectionName="top-bar">
    <button class="btn btn-primary" @onclick="IncrementCount">Click me</button>
</SectionContent>

Wenn über /counter auf die Counter-Komponente zugegriffen wird, rendert die MainLayout-Komponente die Inkrementzählerschaltfläche der Counter-Komponente, in der sich die SectionOutlet-Komponente befindet. Wenn auf eine andere Komponente zugegriffen wird, wird die Inkrementzählerschaltfläche nicht gerendert.

Anstatt einen benannten Abschnitt zu verwenden, können Sie ein statisches object-Element mit dem SectionId-Parameter übergeben, um den Abschnitt zu identifizieren. Im folgenden Beispiel wird auch eine Inkrementzählerschaltfläche für die Counter-Komponente der App im App-Hauptlayout implementiert.

Wenn Sie nicht möchten, dass andere SectionContent-Komponenten versehentlich mit dem Namen eines SectionOutlet-Elements übereinstimmen, übergeben Sie einen SectionId-Objektparameter, um den Abschnitt zu identifizieren. Dies kann beim Entwerfen einer Razor-Klassenbibliothek (RCL) sein. Wenn ein SectionOutlet-Element in der RCL einen Objektverweis mit SectionId verwendet und der Consumer eine SectionContent-Komponente mit einem übereinstimmenden SectionId-Objekt platziert, ist eine versehentliche Namensübereinstimmung nicht möglich, wenn Consumer der RCL andere SectionContent-Komponenten implementieren.

Im folgenden Beispiel wird auch eine Inkrementzählerschaltfläche für die Counter-Komponente der App im App-Hauptlayout implementiert, wobei anstelle eines Abschnittsnamens ein Objektverweis verwendet wird.

Fügen Sie der MainLayout-Komponente in einem @code-Block das statische object-Element TopbarSection hinzu:

@code {
    internal static object TopbarSection = new();
}

Platzieren Sie im Razor-Markup der MainLayout-Komponente eine SectionOutlet-Komponente, und übergeben Sie TopbarSection an den SectionId-Parameter, um den Abschnitt anzugeben:

<SectionOutlet SectionId="TopbarSection" />

Fügen Sie der Counter-Komponente der App eine SectionContent-Komponente hinzu, die eine Inkrementzählerschaltfläche rendert. Verwenden Sie das statische object-Element des TopbarSection-Abschnitts der MainLayout-Komponente als SectionId (MainLayout.TopbarSection).

In Counter.razor:

<SectionContent SectionId="MainLayout.TopbarSection">
    <button class="btn btn-primary" @onclick="IncrementCount">Click me</button>
</SectionContent>

Wenn auf die Counter-Komponente zugegriffen wird, rendert die MainLayout-Komponente die Inkrementzählerschaltfläche, in der sich die SectionOutlet-Komponente befindet.

Hinweis

SectionOutlet- und SectionContent-Komponenten können nur SectionId oder SectionName festlegen, nicht beide Elemente.

Abschnittsinteraktion mit anderen Blazor-Features

Ein Abschnitt interagiert auf folgende Weise mit anderen Blazor-Features:

• Kaskadierende Werte fließen in den Abschnittsinhalt ein, dessen Inhalt durch die SectionContent-Komponente definiert wird.
• Nicht behandelte Ausnahmen werden durch Fehlergrenzen behandelt, die um eine SectionContent-Komponente herum definiert sind.
• Eine für das Streamingrendering konfigurierte Razor-Komponente konfiguriert auch die von einer SectionContent-Komponente bereitgestellten Abschnittsinhalte, sodass sie das Streamingrendering verwenden.