Exercício: adicionar um layout do Blazor para reduzir a duplicação no código

Concluído

Ao adicionar páginas ao aplicativo Blazing Pizza, você pode notar que estamos copiando o HTML de navegação. O Blazor tem suporte interno à criação desse tipo de scaffolding de página em um só lugar. Eles são chamados de layouts do Blazor.

Agora temos vários HTML duplicados em várias páginas. Em seguida, você criará um layout para todo o aplicativo para que possa adicionar navegação e informações da empresa em um único lugar.

Neste exercício, você criará um componente MainLayout. Você verá como pode usar este layout para páginas específicas e depois torná-lo o layout padrão para todo o aplicativo.

Adicionar um componente MainLayout

1. No Visual Studio Code, no menu, selecione Arquivo>Novo Arquivo.

2. Nomeie o arquivo MainLayout.razor. Salve o arquivo no diretório Compartilhados.

3. No novo arquivo, crie um componente de layout e copie o HTML de navegação de qualquer página.

   @inherits LayoutComponentBase
   
   <div id="app">
   
     <header class="top-bar">
       <a class="logo" href="">
         <img src="img/logo.svg" />
       </a>
   
       <NavLink href="" class="nav-tab" Match="NavLinkMatch.All">
         <img src="img/pizza-slice.svg" />
         <div>Get Pizza</div>
       </NavLink>
   
       <NavLink href="myorders" class="nav-tab">
         <img src="img/bike.svg" />
         <div>My Orders</div>
       </NavLink>
     </header>
   
     <div class="content">
       @Body
     </div>
   
     <footer>
       &copy; Blazing Pizza @DateTime.UtcNow.Year
     </footer>
   
   </div>
   

   Esse layout usa parte da marcação em _Host.cshtml, então precisamos removê-la de lá.

4. Salve suas alterações selecionando Ctrl+S.

5. No explorador de arquivos, expanda Páginas. Em seguida, selecione _Host.cshtml.

6. Altere os elementos em torno do componente de aplicativo Blazor deste código:

   <div id="app">
       <div class="content">
           <component type="typeof(App)" render-mode="ServerPrerendered" />
       </div>
   </div>
   

   Para este código:

   <component type="typeof(App)" render-mode="ServerPrerendered" />
   

Usar um layout do Blazor em um componente de página

1. No explorador de arquivos, expanda Páginas. Depois, selecione Index.razor.

2. Exclua o elemento div top-bar e, sob a diretiva @page, adicione uma referência ao novo layout.

   @layout MainLayout
   

3. Também vamos excluir o elemento <h1>Blazing Pizzas</h1> antigo. Ele não é mais necessário porque temos uma barra superior no layout.

4. No Visual Studio Code, selecione F5. Ou, então, no menu Executar, selecione Iniciar Depuração.

   

   A nova página inicial tem um rodapé de direitos autorais para esse ano que é atualizado automaticamente. Para ver a aparência de uma página sem usar esse layout, selecione Meus Pedidos. Ou, então, acesse uma página inválida como (http://localhost:5000/help). No momento, ainda não personalizamos nossa Página 404 não encontrada.

   

5. Para parar o aplicativo, selecione Shift + F5.

Atualize todas as páginas para o novo layout

Agora você poderia adicionar a diretiva @layout MainLayout a todas as páginas do seu aplicativo, mas o Blazor tem uma solução melhor. Primeiro, exclua a diretiva de layout recém-adicionada a Index.razor.

1. No componente Index.razor, exclua @layout MainLayout.
2. No explorador de arquivos, expanda Páginas. Em seguida, selecione MyOrders.razor.
3. Exclua o elemento div top-bar.
4. No explorador de arquivos, expanda Páginas. Em seguida, selecione OrderDetail.razor.
5. Exclua o elemento div top-bar.
6. No explorador de arquivos, expanda Páginas. Em seguida, selecione Checkout.razor.
7. Exclua o elemento div top-bar.

O componente App.razor é o local em que podemos alterar o modo como as páginas são roteadas e instruir o Blazor a usar um layout padrão.

1. No explorador de arquivos, selecione App.razor.

2. Adicione a declaração DefaultLayout="typeof(MainLayout)" ao elemento RouteView.

3. Adicione Layout="typeof(MainLayout)" a LayoutView.

4. O App.razor ficará parecido com este exemplo:

   <Router AppAssembly="typeof(Program).Assembly" Context="routeData">
       <Found>
           <RouteView RouteData="routeData" DefaultLayout="typeof(MainLayout)" />
       </Found>
       <NotFound>
           <LayoutView Layout="typeof(MainLayout)">
               <div class="main">Sorry, there's nothing at this address.</div>
           </LayoutView>
       </NotFound>
   </Router>
   

Testar o novo layout

1. No Visual Studio Code, selecione F5. Ou, então, no menu Executar, selecione Iniciar Depuração.

   

   O benefício de usar um layout padrão é que você pode aplicá-lo a todas as páginas e usá-lo para a exibição de layout em páginas não encontradas.

2. Para parar o aplicativo, selecione Shift + F5.

O trabalho que você precisava fazer em relação ao aplicativo foi concluído neste módulo. Caso deseje ver como tratar os formulários e a validação, conclua o próximo módulo deste roteiro de aprendizagem.