Criar componentes do Blazor reutilizáveis usando layouts
- 7 minutos
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. Em vez disso, 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 Compartilhada em seu aplicativo, mas você pode optar por armazená-lo em qualquer local acessível aos 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 a partir de um modelo de projeto Blazor, o layout padrão do aplicativo será 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:
Se você quiser aplicar um modelo a todos os componentes blazor em uma pasta, poderá usar o arquivo _Imports.razor como um 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 @layout diretiva a cada componente e se aplica a componentes na mesma pasta que o arquivo _Imports.razor e todas as suas subpastas.
Importante
Não adicione uma diretiva @layout ao arquivo _Imports.razor na pasta raiz do seu projeto, pois isso resulta em um loop infinito de layouts.
Se você quiser aplicar um layout padrão a cada componente em todas as pastas do seu aplicativo Web, poderá fazê-lo no componente App.razor , no qual você configura o componente Roteador , conforme 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 @layout diretiva ou em um arquivo _Imports.razor substituem essa configuração de layout padrão.