Erstellen wiederverwendbarer Blazor-Komponenten mithilfe von Layouts

Blazor enthält Layouts, um das Codieren von allgemeinen Benutzeroberflächenelementen zu vereinfachen, die auf vielen Seiten in Ihrer App angezeigt werden.

Angenommen, Sie arbeiten an der Website eines Pizzalieferdiensts und haben die Inhalte für die meisten Hauptseiten als Blazor-Komponenten festgelegt. Sie möchten sicherstellen, dass diese Seiten dasselbe Branding, Navigationsmenü und denselben Fußzeilenabschnitt aufweisen. Sie möchten diesen Code jedoch nicht kopieren und in mehrere Dateien einfügen.

Hier erfahren Sie, wie Sie Layoutkomponenten in Blazor verwenden, um allgemeinen HTML-Code auf mehreren Seiten zu rendern.

Was sind Blazor-Layouts?

Auf den meisten Websites wird die Anordnung von Benutzeroberflächenelementen auf mehreren Seiten gemeinsam genutzt. Beispielsweise könnte es ein Markenbanner oben auf der Seite geben, die Hauptnavigationslinks auf der linken Seite und einen Haftungsausschluss unten auf der Seite. Nachdem Sie diese allgemeinen Benutzeroberflächenelemente in den Code einer Seite einfügen, ist es mühsam, sie zu kopieren und in den Code für alle anderen Seiten einzufügen. Schlimmer noch: Wenn sich später etwas ändert, z. B. ein neuer wichtiger Bereich der Website, zu dem ein Link führt, oder ein Rebranding der Website, müssen Sie dieselben Änderungen in allen einzelnen Komponenten erneut vornehmen. Verwenden Sie stattdessen eine Layoutkomponente, um allgemeine Benutzeroberflächenelemente zu optimieren und wiederzuverwenden.

Eine Layoutkomponente in Blazor ist eine Komponente, die das gerenderte Markup mit allen Komponenten gemeinsam verwendet, die darauf verweisen. Sie platzieren allgemeine Benutzeroberflächenelemente wie Navigationsmenüs, Branding und Fußzeilen im Layout. Anschließend verweisen Sie von mehreren anderen Komponenten aus auf dieses Layout. Wenn die Seite gerendert wird, stammen eindeutige Elemente, z. B. die Details der angeforderten Pizza, aus der verweisenden Komponente. Allgemeine Elemente stammen jedoch aus dem Layout. Sie müssen die allgemeinen Benutzeroberflächenelemente nur ein Mal im Layout codieren. Wenn Sie dann ein Rebranding der Website durchführen oder eine andere Änderung vornehmen müssen, müssen Sie nur das Layout korrigieren. Die Änderung gilt automatisch für alle verweisenden Komponenten.

Programmieren eines Blazor-Layouts

Ein Blazor-Layout ist eine bestimmte Komponentenart, daher ist das Schreiben eines Blazor-Layouts ähnlich wie das Schreiben anderer Komponenten zum Rendern der Benutzeroberfläche in Ihrer App. Sie verwenden beispielsweise den @code-Block und viele Anweisungen auf die gleiche Weise. Layouts werden in Dateien mit der .razor-Erweiterung definiert. Die Datei wird häufig im Ordner Shared in Ihrer App gespeichert, aber Sie können sie an einem beliebigen Speicherort speichern, auf den die Komponenten, die sie verwenden, zugreifen können.

Zwei Anforderungen gelten nur für Blazor-Layoutkomponenten:

• Sie müssen die LayoutComponentBase-Klasse erben.
• Sie müssen die @Body-Anweisung an der Stelle angeben, an der Sie den Inhalt der Komponenten rendern möchten, auf die Sie verweisen.

@inherits LayoutComponentBase

<header>
    <h1>Blazing Pizza</h1>
</header>

<nav>
    <a href="Pizzas">Browse Pizzas</a>
    <a href="Toppings">Browse Extra Toppings</a>
    <a href="FavoritePizzas">Tell us your favorite</a>
    <a href="Orders">Track Your Order</a>
</nav>

@Body

<footer>
    @new MarkdownString(TrademarkMessage)
</footer>

@code {
    public string TrademarkMessage { get; set; } = "All content is &copy; Blazing Pizzas 2021";
}

Wenn Sie Ihre Blazor-App aus einer Blazor-Projektvorlage erstellt haben, entspricht das Standardlayout der App der Komponente Shared/MainLayout.razor.

Verwenden eines Layouts in einer Blazor-Komponente

Um ein Layout aus einer anderen Komponente zu verwenden, fügen Sie die @layout-Anweisung mit dem Namen des zu übernehmenden Layouts hinzu. Der HTML-Code der Komponente wird an der Position der @Body-Anweisung gerendert.

@page "/FavoritePizzas/{favorite}"
@layout BlazingPizzasMainLayout

<h1>Choose a Pizza</h1>

<p>Your favorite pizza is: @Favorite</p>

@code {
    [Parameter]
    public string Favorite { get; set; }
}

Diese Abbildung veranschaulicht, wie eine Komponente und ein Layout kombiniert werden, um den endgültigen HTML-Code zu rendern:

Wenn Sie eine Vorlage auf alle Blazor-Komponenten in einem Ordner anwenden möchten, können Sie die Datei _Imports.razor als Abkürzung verwenden. Wenn der Blazor-Compiler diese Datei findet, bindet er ihre Anweisungen automatisch in alle Komponenten im Ordner ein. Durch diese Technik entfällt die Notwendigkeit, jeder Komponente die @layout-Anweisung hinzuzufügen. Sie gilt für Komponenten im gleichen Ordner wie die Datei _Imports.razor und alle zugehörigen Unterordner.

Wenn Sie ein Standardlayout auf jede Komponente in allen Ordnern Ihrer Web-App anwenden möchten, können Sie zu diesem Zweck die App.razor-Komponente verwenden, in der Sie die Router-Komponente konfigurieren, wie Sie in Lerneinheit 2 gelernt haben. Verwenden Sie im <RouteView>-Tag das DefaultLayout-Attribut.

<Router AppAssembly="@typeof(Program).Assembly">
    <Found Context="routeData">
        <RouteView RouteData="@routeData" DefaultLayout="@typeof(BlazingPizzasMainLayout)" />
    </Found>
    <NotFound>
        <p>Sorry, there's nothing at this address.</p>
    </NotFound>
</Router>

Komponenten, für die ein Layout in ihrer eigenen @layout-Anweisung oder in einer _Imports.razor-Datei angegeben wird, überschreiben diese Standardlayouteinstellung.