ASP.NET Core-Blazor-Abschnitte

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.