Freigeben über

ASP.NET Core-Blazor-Abschnitte

Hinweis

Dies ist nicht die neueste Version dieses Artikels. Die aktuelle Version finden Sie in der .NET 10-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:

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 TopbarSection-Komponente in einem object-Block das statische MainLayout-Element @code hinzu:

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

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

<SectionOutlet SectionId="TopbarSection" />

Fügen Sie der SectionContent-Komponente der App eine Counter-Komponente hinzu, die eine Inkrementzählerschaltfläche rendert. Verwenden Sie das statische MainLayout-Element des TopbarSection-Abschnitts der object-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.

RenderFragment Zwischenspeichern von Regeln und Verhalten beim Rendern von Abschnitten

Wenn sich der Inhalt eines SectionContent ändert, wobei es sich um eine andere Instanz als die Komponente handelt, in der er gerendert wird, zerstört und erstellt RenderFragment den Abschnitt vollständig neu, anstatt zu versuchen, nur den Inhalt des Abschnitts zu aktualisieren. Im Gegensatz zum normalen Rendern könnte der Inhalt des Abschnitts aus verschiedenen Instanzen stammen, und es ist nicht sinnvoll, Inhalte aus zwei separaten Komponenten zu verarbeiten, was zu unerwarteten Ergebnissen führen kann. Eine ausführliche Erläuterung zu diesem Verhalten finden Sie unter "Inkonsistente Komponenteninitialisierung mit Blazor SectionOutlet/SectionContent" und "CascadingValue(dotnet/aspnetcore #58316)".

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 Razor konfigurierte -Komponente konfiguriert auch die von einer SectionContent-Komponente bereitgestellten Abschnittsinhalte, sodass sie das Streamingrendering verwenden.
  • Ein Abschnitt, der interaktive Komponenten enthält, wird statisch (nicht funktionsfähig) in einer Layoutkomponente in Blazor Web App gerendert, die das Rendern pro Seite/Komponente übernimmt. Weitere Informationen finden Sie unter ASP.NET Core Blazor-Layouts.
  • Last updated on