Esercizio: Aggiungere un layout Blazor per ridurre la duplicazione nel codice

  • 4 minuti

Durante l'aggiunta di pagine all'app Blazing Pizza si sarà notato che il codice HTML per lo spostamento è stato copiato. Blazor include supporto predefinito per creare questo tipo di scaffolding di pagine in un'unica posizione. Si tratta dei layout Blazor.

Al momento è presente moltissimo codice HTML duplicato in diverse pagine. In seguito, verrà creato un layout per l'intera app in modo da poter aggiungere la funzionalità di spostamento e le informazioni sulla società in un'unica posizione.

In questo esercizio si creerà un componente MainLayout. Si vedrà come usare questo layout per pagine specifiche e quindi impostarlo come predefinito per l'intera app.

Aggiungere un componente MainLayout

  1. In Visual Studio Code scegliere File>Nuovo file di testo dal menu.

  2. Selezionare ASP.NET Razor come linguaggio.

  3. Creare un componente di layout e copiare il codice HTML per lo spostamento da qualsiasi pagina.

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

    Questo layout ha usato parte del markup presente in _Host.cshtml, quindi è necessario rimuoverlo da tale posizione.

  4. Premere CTRL+S per salvare le modifiche.

  5. Come nome file usare MainLayout.razor. Assicurarsi di salvare il file nella directory Shared.

  6. In Esplora file espandere Pages. Selezionare quindi _Host.cshtml.

  7. Modificare gli elementi che circondano il componente dell'app Blazor sostituendo questo codice:

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

    Con questo codice:

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

Usare un layout Blazor in un componente di pagina

  1. In Esplora file espandere Pages. Selezionare quindi Index.razor.

  2. Eliminare l'elemento div top-bar e, sotto la direttiva @page, aggiungere un riferimento al nuovo layout.

    @layout MainLayout

  3. Si eliminerà anche l'elemento precedente <h1>Blazing Pizzas</h1>, che non è più necessario perché nel layout è presente una barra superiore.

  4. In Visual Studio Code selezionare F5. In alternativa, selezionare Avvia debug nel menu Esegui.

    Screenshot che mostra la nuova home page usando un layout Blazor.

    La nuova home page includerà un piè di pagina con il copyright per quest'anno che viene aggiornato automaticamente. Per visualizzare l'aspetto di una pagina che non usa questo layout, selezionare My Orders (Ordini personali). In alternativa, passare a una pagina non valida, ad esempio (http://localhost:5000/help). Al momento, nella pagina 404 Pagina non trovata non viene usata alcuna personalizzazione.

    Screenshot della pagina che indica che il file sparse non è stato trovato.

  5. Selezionare MAIUSC + F5 per arrestare l'app.

Aggiornare tutte le pagine in modo che usino il nuovo layout

A questo punto, si potrebbe aggiungere la direttiva @layout MainLayout a tutte le pagine dell'app. Blazor offre una soluzione migliore. Prima di tutto, eliminare la direttiva di layout appena aggiunta a Index.razor.

  1. Nel componente Index.razor eliminare @layout MainLayout.
  2. In Esplora file espandere Pages. Selezionare quindi MyOrders.razor.
  3. Eliminare l'elemento div top-bar.
  4. In Esplora file espandere Pages. Selezionare quindi OrderDetail.razor.
  5. Eliminare l'elemento div top-bar.
  6. In Esplora file espandere Pages. Selezionare quindi Checkout.razor.
  7. Eliminare l'elemento div top-bar.

Il componente App.razor consente di modificare il routing delle pagine, ma anche di indicare a Blazor di usare un layout predefinito.

  1. In Esplora file selezionare App.razor.

  2. Aggiungere la dichiarazione DefaultLayout="typeof(MainLayout)" all'elemento RouteView.

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

  4. App.razor dovrebbe essere simile all'esempio seguente:

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

Testare il nuovo layout

  1. In Visual Studio Code selezionare F5. In alternativa, selezionare Avvia debug nel menu Esegui.

    Screenshot che mostra che la pagina ottimizzata non è stata trovata.

    Il vantaggio derivante dall'uso di un layout predefinito è che è possibile applicarlo a tutte le pagine e usarlo per la visualizzazione layout dei messaggi di pagina non trovata.

  2. Selezionare MAIUSC + F5 per arrestare l'app.

Le operazioni da eseguire per l'app sono terminate in questo modulo. Per informazioni su come gestire i moduli e la convalida, completare il modulo successivo in questo percorso di apprendimento.