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ý textový soubor.

  2. Jako jazyk vyberte ASP.NET Razor.

  3. 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 ho musíme odtud odebrat.

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

  5. Jako název souboru použijte MainLayout.razor. Ujistěte se, že soubor uložíte do sdíleného adresáře.

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

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

    Snímek obrazovky znázorňující novou domovskou stránku pomocí rozložení Blazor

    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.

    Snímek obrazovky se řídkou nenalezenou stránkou

  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řidat 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í.

    Snímek obrazovky s výrazně vylepšenou stránkou, která nebyla nalezena

    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.