Criar componentes do Blazor reutilizáveis usando layouts
O Blazor inclui layouts para facilitar a codificação de elementos comuns da interface do usuário (IU) que aparecem em muitas páginas do seu aplicativo.
Suponha que você esteja trabalhando no site de uma empresa de entrega de pizza e tenha criado o conteúdo para a maioria das páginas principais como um conjunto de componentes do Blazor. Você quer garantir que essas páginas tenham a mesma identidade visual, menus de navegação e seção de rodapé. No entanto, você não quer ter que copiar e colar esse código em vários arquivos.
Aqui, você aprende a usar componentes de layout no Blazor para renderizar HTML comum em várias páginas.
Observação
Os blocos de código desta unidade são exemplos ilustrativos. Você escreverá seu próprio código na próxima unidade.
O que são layouts do Blazor?
Na maioria dos sites, a organização dos elementos da interface do usuário é compartilhada entre várias páginas. Por exemplo, pode haver uma faixa com identidade visual na parte superior da página, links de navegação do site principal no lado esquerdo e um aviso de isenção de responsabilidade legal na parte inferior. Depois que você codifica esses elementos comuns da interface do usuário em uma página, é entediante copiá-los e colá-los no código de todas as outras páginas. Pior: se houver uma alteração posterior, como uma nova seção principal do site a ser vinculada ou uma reformulação da identidade visual do site, você precisará fazer as mesmas alterações se repetirem em todos os componentes individuais. Use um componente de layout para simplificar e reutilizar elementos comuns da interface do usuário.
Um componente de layout no Blazor é aquele que compartilha sua marcação renderizada com todos os componentes que a referenciam. Você coloca elementos comuns da interface do usuário, como menus de navegação, identidade visual e rodapés no layout. Em seguida, você faz referência a esse layout em vários outros componentes. Quando a página é renderizada, os elementos exclusivos, como os detalhes da pizza solicitada, vêm do componente de referência. Mas, os elementos comuns vêm do layout. Você só precisa codificar os elementos comuns da interface do usuário uma vez no layout. Então, se você precisar mudar a identidade visual do site ou fazer alguma outra alteração, você só terá que corrigir o layout. A alteração se aplica automaticamente a todos os componentes de referência.
Codificar um layout do Blazor
Um layout do Blazor é um tipo específico de componente, ou seja, escrever um layout do Blazor é uma tarefa semelhante a escrever outros componentes para renderizar a interface do usuário no seu aplicativo. Por exemplo, você usa o bloco @code e muitas diretivas da mesma maneira. Os layouts são definidos em arquivos com uma extensão .razor. O arquivo geralmente é armazenado na pasta Compartilhados no seu aplicativo, mas você pode optar por armazená-lo em qualquer local que possa ser acessado pelos componentes que o usam.
Dois requisitos são exclusivos para os componentes de layout do Blazor:
- Você precisa herdar a classe
LayoutComponentBase. - Você deve incluir a diretiva
@Bodyno local onde quer renderizar o conteúdo dos componentes que está referenciando.
@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";
}
Observação
Os componentes de layout não incluem uma diretiva @page, pois não tratam as solicitações diretamente e não devem ter uma rota criada. Em vez disso, os componentes de referência usam a diretiva @page.
Se você criou seu aplicativo Blazor com base em um modelo de projeto Blazor, o layout padrão do aplicativo é o componente Shared/MainLayout.razor.
Usar um layout em um componente do Blazor
Para usar um layout de outro componente, adicione a diretiva @layout com o nome do layout a ser aplicado. O HTML do componente é renderizado na posição da diretiva @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; }
}
Este diagrama ilustra como um componente e um layout são combinados para renderizar o HTML final:
Caso deseje aplicar um modelo a todos os componentes do Blazor de uma pasta, use o arquivo _Imports.razor como atalho. Quando o compilador do Blazor encontra esse arquivo, ele inclui suas diretivas em todos os componentes na pasta automaticamente. Essa técnica remove a necessidade de adicionar a diretiva @layouta cada componente e se aplica a componentes na mesma pasta que o arquivo _Imports.razor e que todas as suas subpastas.
Importante
Não adicione uma diretiva @layout ao arquivo _Imports.razor na pasta raiz do projeto porque isso resulta em um loop infinito de layouts.
Se você quiser aplicar um layout padrão a cada componente em todas as pastas do aplicativo Web, poderá fazer isso no componente App.razor, no qual você configura o componente Router como aprendeu na unidade 2. Na marca <RouteView>, use o atributo 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>
Os componentes que têm um layout especificado em sua própria diretiva @layout ou em um arquivo _Imports.Razor substituem essa configuração de layout padrão.