Skapa återanvändbara Blazor-komponenter med hjälp av layouter
- 7 minuter
Blazor innehåller layouter som gör det enkelt att koda vanliga användargränssnittselement (UI) som visas på många sidor i din app.
Anta att du arbetar på pizzaleveransföretagets webbplats och att du har skapat innehållet för de flesta huvudsidorna som en uppsättning Blazor-komponenter. Du vill se till att dessa sidor har samma varumärkesanpassning, navigeringsmenyer och sidfotsavsnitt. Du vill dock inte behöva kopiera och klistra in koden i flera filer.
Här lär du dig hur du använder layoutkomponenter i Blazor för att återge vanlig HTML på flera sidor.
Note
Kodblocken i den här enheten är illustrativa exempel. Du skriver din egen kod i nästa lektion.
Vad är Blazor-layouter?
På de flesta webbplatser delas arrangemanget av gränssnittselement på flera sidor. Det kan till exempel finnas en märkesbanderoll överst på sidan, huvudwebbplatsens navigeringslänkar till vänster och en juridisk ansvarsfriskrivning längst ned. När du kodar dessa vanliga gränssnittselement på en sida är det tråkigt att kopiera och klistra in dem i koden för alla andra sidor. Värre är att om det sker en ändring senare, till exempel en ny större del av webbplatsen för att länka till eller en platsomdöme, måste du göra samma ändringar upprepas i alla enskilda komponenter. Använd i stället en layoutkomponent för att effektivisera och återanvända vanliga gränssnittselement.
En layoutkomponent i Blazor är en komponent som delar sin renderade markering med alla komponenter som refererar till den. Du placerar vanliga gränssnittselement som navigeringsmenyer, varumärkesanpassning och sidfötter i layouten. Sedan refererar du till layouten från flera andra komponenter. När sidan återges kommer unika element, till exempel information om den begärda pizzan, från referenskomponenten. Men vanliga element kommer från layouten. Du behöver bara koda de vanliga gränssnittselementen en gång i layouten. Om du sedan behöver byta namn på webbplatsen eller göra någon annan ändring behöver du bara korrigera layouten. Ändringen gäller automatiskt för alla refererande komponenter.
Koda en Blazor-layout
En Blazor-layout är en specifik typ av komponent, så att skriva en Blazor-layout är en liknande uppgift som att skriva andra komponenter för att återge användargränssnittet i din app. Du kan till exempel använda @code block och många direktiv på samma sätt. Layouter definieras i filer med ett .razor tillägg. Filen lagras ofta i den delade mappen i din app, men du kan välja att lagra den på valfri plats som är tillgänglig för de komponenter som använder den.
Två krav är unika för Blazor-layoutkomponenter:
- Du måste ärva
LayoutComponentBaseklassen. - Du måste inkludera
@Bodydirektivet på den plats där du vill återge innehållet i de komponenter som du refererar till.
@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 © Blazing Pizzas 2021";
}
Note
Layoutkomponenter innehåller inte ett @page direktiv eftersom de inte hanterar begäranden direkt och inte bör ha en väg som skapats för dem. I stället använder referenskomponenterna @page direktivet.
Om du har skapat din Blazor-app från en Blazor-projektmall är appens standardlayout komponenten Shared/MainLayout.razor .
Använda en layout i en Blazor-komponent
Om du vill använda en layout från en annan komponent lägger du till @layout direktivet med namnet på layouten som ska tillämpas. Komponentens HTML återges i direktivets @Body position.
@page "/FavoritePizzas/{favorite}"
@layout BlazingPizzasMainLayout
<h1>Choose a Pizza</h1>
<p>Your favorite pizza is: @Favorite</p>
@code {
[Parameter]
public string Favorite { get; set; }
}
Det här diagrammet visar hur en komponent och en layout kombineras för att återge den slutliga HTML-koden:
Om du vill använda en mall för alla Blazor-komponenter i en mapp kan du använda filen _Imports.razor som en genväg. När Blazor-kompilatorn hittar den här filen innehåller den sina direktiv i alla komponenter i mappen automatiskt. Den här tekniken tar bort behovet av att lägga @layout till direktivet i varje komponent och gäller för komponenter i samma mapp som filen _Imports.razor och alla dess undermappar.
Important
Lägg inte till ett @layout direktiv i filen _Imports.razor i rotmappen för projektet eftersom det resulterar i en oändlig loop med layouter.
Om du vill använda en standardlayout för varje komponent i alla mappar i webbappen kan du göra det i App.razor-komponenten , där du konfigurerar routerkomponenten , som du lärde dig i enhet 2. Använd attributet i taggen <RouteView>DefaultLayout .
<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>
Komponenter som har en layout som anges i sitt eget @layout direktiv, eller i en _Imports.razor-fil , åsidosätter den här standardlayoutinställningen.