Exercice : ajouter une mise en page Blazor pour réduire la duplication dans votre code

4 minutes

À mesure que vous avez ajouté des pages à l’application de pizzas Blazor, vous avez remarqué que nous avons copié le code HTML de navigation. Blazor offre une prise en charge intégrée pour créer ce type de génération de modèles automatique de page à un seul endroit. Ce sont les mises en page Blazor.

Nous disposons désormais d’un grand nombre de codes HTML dupliqués sur plusieurs pages. Ensuite, vous allez créer une mise en page pour l’application entière afin de pouvoir ajouter des informations de navigation et d’entreprise dans un seul emplacement.

Dans cet exercice, vous allez créer un composant MainLayout. Vous verrez comment vous pouvez utiliser cette mise en page pour des pages spécifiques, puis en faire la mise en page par défaut pour l’application entière.

Ajouter un composant MainLayout

Dans Visual Studio Code, dans le menu, sélectionnez Fichier>Nouveau fichier texte.
Sélectionnez ASP.NET Razor comme langue.

Créez un composant de mise en page et copiez le code HTML de navigation depuis n’importe quelle page.

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

Cette mise en page a utilisé une partie du balisage dans _Host.cshtml : nous devons donc la supprimer de là.

Sélectionnez Ctrl+S pour enregistrer vos modifications.
Pour le nom de fichier, utilisez MainLayout.razor. Veillez à enregistrer le fichier dans le répertoire Partagé.
Dans l’Explorateur de fichiers, développez Pages. Sélectionnez ensuite _Host.cshtml.

Modifiez le code des éléments qui entourent le composant d’application Blazor :

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

Remplacez-le par ce code :

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

Utiliser une mise en page Blazor sur un composant de page

Dans l’Explorateur de fichiers, développez Pages. Sélectionnez ensuite Index.razor.
Supprimez l'élément div top-bar et, sous la directive @page, ajoutez une référence à la nouvelle mise en page.
```
@layout MainLayout
```
Nous allons également supprimer l’ancien élément <h1>Blazing Pizzas</h1>. Elle n’est plus nécessaire, car nous avons une barre supérieure dans la mise en page.
Dans Visual Studio Code, sélectionnez F5. Vous pouvez aussi sélectionner Démarrer le débogage dans le menu Exécuter.

La nouvelle page d’accueil aura un pied de page de copyright pour cette année qui est automatiquement mis à jour. Pour voir à quoi ressemble une page qui n’utilise pas cette mise en page, sélectionnez My Orders. Vous pouvez aussi accéder à une page non valide, par exemple (http://localhost:5000/help). Pour le moment, notre message 404 - Introuvable n’utilise aucune de nos personnalisations.
Sélectionnez Maj + F5 pour arrêter l’application.

Mettre à jour toutes les pages pour utiliser la nouvelle mise en page

Vous pouvez maintenant ajouter la directive @layout MainLayout à toutes les pages de l’application. Blazor offre une meilleure solution. Tout d’abord, supprimez la directive layout qui vient d’être ajoutée à Index.razor.

Dans le composant Index.razor, supprimez @layout MainLayout.
Dans l’Explorateur de fichiers, développez Pages. Sélectionnez ensuite MyOrders.razor.
Supprimez l'élément div top-bar.
Dans l’Explorateur de fichiers, développez Pages. Sélectionnez ensuite OrderDetail.razor.
Supprimez l'élément div top-bar.
Dans l’Explorateur de fichiers, développez Pages. Sélectionnez ensuite Checkout.razor.
Supprimez l'élément div top-bar.

Le composant App.razor est l’endroit où nous pouvons modifier la façon dont les pages sont routées, mais aussi où indiquer à Blazor d’utiliser une mise en page par défaut.

Dans l’Explorateur de fichiers, sélectionnez App.razor.
Ajoutez la déclaration DefaultLayout="typeof(MainLayout)" à l’élément RouteView.
Ajoutez Layout="typeof(MainLayout)" à LayoutView.

App.razor devrait maintenant se présenter comme ceci :

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

Tester la nouvelle mise en page

Dans Visual Studio Code, sélectionnez F5. Vous pouvez aussi sélectionner Démarrer le débogage dans le menu Exécuter.

L’avantage de l’utilisation d’une mise en page par défaut est que vous pouvez l’appliquer à toutes les pages et l’utiliser pour la vue de mise en page des pages affichées en cas de page introuvable.
Sélectionnez Maj + F5 pour arrêter l’application.

Le travail que vous deviez effectuer pour l’application est terminé dans ce module. Si vous voulez voir comment gérer les formulaires et la validation, effectuez le module suivant de ce parcours d’apprentissage.

Continuer

Ajouter un composant MainLayout

Utiliser une mise en page Blazor sur un composant de page

Mettre à jour toutes les pages pour utiliser la nouvelle mise en page

Tester la nouvelle mise en page

Commentaires