Exercício - Adicione um layout Blazor para reduzir a duplicação em seu código

Concluído

Ao adicionar páginas ao aplicativo Blazing Pizza, você pode notar que estamos copiando o HTML de navegação. Blazor tem suporte embutido para criar este tipo de andaime de página em um só lugar. Eles são chamados de layouts Blazor.

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

Neste exercício, você cria um componente MainLayout . Você vê como pode usar esse layout para páginas específicas e, em seguida, 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. Certifique-se de salvar o arquivo no diretório compartilhado .

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ê-lo de lá.

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

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

6. Altere os elementos ao redor do componente Blazor app a partir 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 Blazor em um componente de página

1. No explorador de ficheiros, expanda Páginas. Em seguida, selecione Index.razor.

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

   @layout MainLayout
   

3. Vamos também excluir o elemento antigo <h1>Blazing Pizzas</h1> . Não é mais necessário porque temos uma barra superior no layout.

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

   

   A nova página inicial tem um rodapé de direitos autorais para este ano que é atualizado automaticamente. Para ver a aparência de uma página que não está usando esse layout, selecione Meus pedidos. Ou vá para uma página inválida como (http://localhost:5000/help). No momento, não marcamos nossa página 404 como não encontrada.

   

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

Atualizar todas as páginas para o novo layout

Agora você pode adicionar a @layout MainLayout diretiva a todas as páginas do seu aplicativo, mas Blazor tem uma solução melhor. Primeiro, exclua a diretiva de layout que acabou de ser adicionada ao Index.razor.

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

O componente App.razor é onde podemos alterar a forma como as páginas são roteadas, mas também dizer ao Blazor para usar um layout padrão.

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

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

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

4. App.razor agora deve se parecer 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 no menu Executar , selecione Iniciar Depuração.

   

   A vantagem de usar um layout padrão é que você pode aplicá-lo a todas as páginas e usá-lo para o modo de exibição de layout para páginas não encontradas.

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

O trabalho que você precisava fazer para o aplicativo foi concluído neste módulo. Se você quiser ver como lidar com formulários e validação, termine o próximo módulo neste caminho de aprendizagem.