Creare componenti Blazor riutilizzabili usando i layout
Blazor include alcuni layout per semplificare la scrittura del codice degli elementi comuni dell'interfaccia utente che vengono visualizzati in molte pagine dell'app che si intende sviluppare.
Si supponga di lavorare al sito Web della pizzeria che fa pizze da asporto e di aver creato il contenuto per la maggior parte delle pagine principali come set di componenti Blazor. Si vuole assicurarsi che queste pagine abbiano la stessa personalizzazione, menu di spostamento e sezione piè di pagina. Tuttavia, non è necessario copiare e incollare il codice in più file.
Questo articolo illustra come usare i componenti di layout in Blazor per eseguire il rendering di codice HTML comune in più pagine.
Nota
I blocchi di codice in questa unità sono esempi illustrativi. Nell’unità successiva, si scrive il codice.
Che cosa sono i layout Blazor?
Nella maggior parte dei siti Web la disposizione degli elementi dell'interfaccia utente è condivisa tra più pagine. Si potrebbe ad esempio avere un banner con il marchio dell'azienda nella parte superiore della pagina, i principali collegamenti di spostamento nel sito in basso a sinistra e una dichiarazione di non responsabilità legale nella parte inferiore. Dopo aver scritto il codice di questi elementi comuni dell'interfaccia utente in una pagina, sarebbe noioso copiarlo e incollarlo nel codice di tutte le altre pagine. Se poi occorre apportare una modifica successiva, ad esempio una nuova sezione importante del sito a cui collegarsi o un rebranding del sito, è necessario aggiungere le stesse modifiche a tutti i singoli componenti. L'uso di un componente di layout invece consente di semplificare e riutilizzare gli elementi comuni dell'interfaccia utente.
Un componente di layout in Blazor è un componente che condivide il proprio markup sottoposto a rendering con tutti i componenti che fanno riferimento ad esso. Si inseriscono elementi comuni dell'interfaccia utente, ad esempio menu di spostamento, personalizzazione e piè di pagina nel layout. Quindi si fa riferimento a tale layout dagli altri componenti. Quando viene eseguito il rendering della pagina, elementi univoci come i dettagli della pizza richiesta provengono dal componente di riferimento. Tuttavia, gli elementi comuni provengono dal layout. È sufficiente codificare gli elementi comuni dell'interfaccia utente una sola volta, nel layout. Quindi, se è necessario rinominare il sito o apportare altre modifiche, è sufficiente correggere il layout. La modifica si applicherà automaticamente a tutti i componenti che fanno riferimento al layout.
Scrivere il codice di un layout Blazor
Un layout Blazor è un tipo specifico di componente, quindi scrivere un layout Blazor è un po' come scrivere altri componenti per eseguire il rendering dell'interfaccia utente nell'app. Ad esempio, si usano il blocco @code e molte direttive nello stesso modo. I layout vengono definiti in file con estensione .razor. Il file viene spesso memorizzato nella cartella Shared all'interno dell'app, ma è possibile scegliere di memorizzarlo in qualsiasi posizione che sia accessibile ai componenti che lo usano.
Due requisiti sono univoci per i componenti di layout Blazor:
- È necessario ereditare la classe
LayoutComponentBase. - È necessario includere la direttiva
@Bodynel percorso in cui si vuole eseguire il rendering del contenuto dei componenti a cui si fa riferimento.
@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";
}
Nota
I componenti di layout non includono una direttiva @page perché non gestiscono le richieste direttamente e non hanno una route creata per loro. I componenti di riferimento invece usano la direttiva @page.
Se si è creata l'app Blazor da un modello di progetto Blazor, il layout predefinito dell'app è il componente Shared/MainLayout.razor.
Usare un layout in un componente Blazor
Per usare un layout da un altro componente, aggiungere la direttiva @layout con il nome del layout da applicare. Il rendering del codice HTML del componente viene eseguito nella posizione della direttiva @Body.
@page "/FavoritePizzas/{favorite}"
@layout BlazingPizzasMainLayout
<h1>Choose a Pizza</h1>
<p>Your favorite pizza is: @Favorite</p>
@code {
[Parameter]
public string Favorite { get; set; }
}
Questo diagramma illustra in che modo un componente e un layout vengono combinati per eseguire il rendering del codice HTML finale:
Se si vuole applicare un modello a tutti i componenti Blazor presenti in una cartella, è possibile usare il file _Imports.razor come collegamento. Quando il compilatore Blazor trova questo file, include automaticamente le relative direttive in tutti i componenti della cartella. Questa tecnica elimina la necessità di aggiungere la direttiva @layout a ogni componente e si applica ai componenti nella stessa cartella come il file _Imports.razor e tutte le relative sottocartelle.
Importante
Non aggiungere una direttiva @layout al file _Imports.razor nella cartella radice del progetto poiché produrrebbe come risultato un ciclo infinito di layout.
Se si desidera applicare un layout predefinito a ogni componente in tutte le cartelle della propria app Web, è possibile farlo nel componente App.razor, dove si configura il componente Router, come appreso nell'unità 2. Nel tag <RouteView> usare l'attributo 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>
I componenti con un layout specificato nella propria direttiva @layout o in un file _Imports.razor ignorano questa impostazione di layout predefinito.