Cvičení – přidání rozložení Blazor pro omezení duplicit v kódu

Dokončeno

Při přidání stránek do aplikace Blazing Pizza si můžete všimnout, že kopírujeme navigační KÓD HTML. Blazor má integrovanou podporu pro vytvoření tohoto typu generování stránek na jednom místě. Nazývají se rozložení Blazor.

Teď máme na několika stránkách velké množství duplicitních html. Dále vytvoříte rozložení pro celou aplikaci, abyste mohli na jednom místě přidat navigační informace a informace o společnosti.

V tomto cvičení vytvoříte komponentu MainLayout . Uvidíte, jak můžete toto rozložení použít pro konkrétní stránky a pak ho nastavit jako výchozí rozložení pro celou aplikaci.

Přidání komponenty MainLayout

1. V editoru Visual Studio Code v nabídce vyberte Soubor>nový soubor.

2. Pojmenujte soubor MainLayout.razor. Ujistěte se, že soubor uložíte do sdíleného adresáře.

3. V novém souboru vytvořte komponentu rozložení a zkopírujte navigační kód HTML z libovolné stránky.

   @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>
   

   Toto rozložení používá některé značky v souboru _Host.cshtml, takže je musíme odstranit.

4. Změny uložte tak, že vyberete Ctrl+S.

5. V Průzkumníku souborů rozbalte stránky. Pak vyberte _Host.cshtml.

6. Změňte prvky obklopící komponentu aplikace Blazor z tohoto kódu:

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

   Do tohoto kódu:

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

Použití rozložení Blazor na komponentě stránky

1. V Průzkumníku souborů rozbalte stránky. Pak vyberte Index.razor.

2. top-bar Odstraňte element div a v rámci direktivy @page přidejte odkaz na nové rozložení.

   @layout MainLayout
   

3. Pojďme také odstranit starý <h1>Blazing Pizzas</h1> prvek. Už není potřeba, protože máme v rozložení horní panel.

4. V editoru Visual Studio Code vyberte F5. Nebo v nabídce Spustit vyberte Spustit ladění.

   

   Nová domovská stránka má pro tento rok zápatí autorských práv, která se automaticky aktualizuje. Pokud chcete zjistit, jak stránka vypadá, že toto rozložení nepoužívá, vyberte Moje objednávky. Nebo přejděte na neplatnou stránku, například (http://localhost:5000/help). V tuto chvíli jsme naši stránku 404 nenalezli.

   

5. Pokud chcete aplikaci zastavit, vyberte Shift + F5.

Aktualizace všech stránek na nové rozložení

Teď můžete direktivu @layout MainLayout přidat na všechny stránky aplikace, ale Blazor má lepší řešení. Nejprve odstraňte direktivu rozložení, která byla právě přidána do Index.razor.

1. Ve komponentě Index.razor odstraňte @layout MainLayout.
2. V Průzkumníku souborů rozbalte stránky. Pak vyberte MyOrders.razor.
3. top-bar Odstraňte element div.
4. V Průzkumníku souborů rozbalte stránky. Pak vyberte OrderDetail.razor.
5. top-bar Odstraňte element div.
6. V Průzkumníku souborů rozbalte stránky. Pak vyberte Checkout.razor.
7. top-bar Odstraňte element div.

Komponenta App.razor je místo, kde můžeme změnit způsob směrování stránek, ale také říct Blazoru, aby používal výchozí rozložení.

1. V Průzkumníku souborů vyberte App.razor.

2. DefaultLayout="typeof(MainLayout)" Přidejte deklaraci do elementu RouteView.

3. Přidejte Layout="typeof(MainLayout)" do LayoutView.

4. App.razor by teď měl vypadat jako v tomto příkladu:

   <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>
   

Otestování nového rozložení

1. V editoru Visual Studio Code vyberte F5. Nebo v nabídce Spustit vyberte Spustit ladění.

   

   Výhodou použití výchozího rozložení je, že ho můžete použít na všechny stránky a použít ho pro zobrazení rozložení pro nenalezlé stránky.

2. Pokud chcete aplikaci zastavit, vyberte Shift + F5.

Práce, kterou jste potřebovali udělat pro aplikaci, je dokončena v tomto modulu. Pokud chcete zjistit, jak zpracovávat formuláře a ověřování, dokončete další modul v tomto studijním programu.