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.
@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.
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.
@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.
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á!
Blaze of Code 
2 comentários em “Layouts no Blazor”