Layouts no Blazor

Neste artigo iremos explorar o recurso de Layouts que temos no Blazor. Os exemplos exibidos nesse artigo são baseados na aplicação de exemplo criada nesse artigo aqui com o Visual Studio, e nesse outro aqui com o VSCode.

Objetivo

Toda aplicação contém algumas partes como Menus, Cabeçalhos e Rodapés, que usualmente estão presentes em todas as páginas.

Copiar esses elementos em todos os componentes não é muito eficiente, e traria uma enorme dificuldade de manutenção. Os Layouts servem para resolver esse problema.

Tecnicamente um Layout é um simples componente, escrito como um Componente Blazor, usando HTML e C#. No Layout podemos usar DataBinding, Injeção de Dependência entre outras funcionalidades que temos em qualquer componente.

LayoutComponentBase

Para transformar um Componente em um Layout, precisamos basicamente herdar o componente da classe LayoutComponentBase.

Na aplicação de exemplo criada com o template do Blazor, temos um Layout já criado na pasta Shared. O nome dele é MainLayout.razor, e se você abri-lo poderá ver que ele herda do LayoutComponentBase. Confira na Figura 1.

Figura 1: Definindo Layout herdando do LayoutComponentBase.

@Body

Outra característica de um Layout é a utilização da tag @Body. O @Body define o local onde os componentes da aplicação serão renderizados, dentro da estrutura HTML definida no Layout. Veja a Figura 2.

Figura 2: MainLayout.razor

Nesse exemplo veja que o @Body é colocado dentro de uma estrutura HTML, que define um menu lateral usando o componente NavMenu, e um barra superior com o botão About.

Se você executar a aplicação e navegar pelas opções do Menu, poderá ver que o conteúdo dos componentes é renderizado justamente no local onde a tag @Body foi definida.

Dê uma olhada na Figura 3 para ver o componente Counter.razor renderizado dentro do MainLayout.razor.

Figura 3: Componente Counter.razor renderizado no @Body do MainLayout.razor

@layout

Para utilizar um determinado Layout em um Componente, devemos declarar a diretiva @layout no componente em questão. Veja um exemplo na Figura 4.

Figura 4: Definindo Layout com diretiva @layout

Porém, se você abrir qualquer componente da aplicação de exemplo, verá que nenhum deles possuí a diretiva @layout. Isso porque essa diretiva está sendo “herdada” pelos componentes, da diretiva declarada no arquivo _Imports.razor, que está na pasta Pages.

O arquivo _Imports.razor serve para incluir automaticamente algumas diretivas em todos os componentes de uma pasta ou subpasta.

Vamos explorar mais a fundo o funcionamento dos arquivos _Imports.razor no próximo artigo.

Grande Abraço e até lá!

2 comentários em “Layouts no Blazor

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair /  Alterar )

Foto do Google

Você está comentando utilizando sua conta Google. Sair /  Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair /  Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair /  Alterar )

Conectando a %s