Créer des composants Blazor réutilisables à l’aide de mises en page

  • 7 minutes

Blazor comprend des dispositions qui facilitent le codage des éléments d’interface utilisateur courants qui apparaîtront sur de nombreuses pages de votre application.

Supposons que vous travailliez sur le site web d’une entreprise de livraison de pizzas et que vous avez créé le contenu pour la plupart des pages principales sous la forme d’un ensemble de composants Blazor. Vous souhaitez vous assurer que ces pages ont la même personnalisation, les mêmes menus de navigation et le même pied de page. Toutefois, vous ne souhaitez pas avoir à copier et coller ce code dans plusieurs fichiers.

Ici, vous allez apprendre à utiliser les composants de mise en page dans Blazor pour afficher le code HTML commun sur plusieurs pages.

Remarque

Les blocs de code dans cette unité sont des exemples illustratifs. Vous écrirez votre propre code dans l'unité suivante.

Que sont les mises en page Blazor ?

Dans la plupart des sites Web, l’organisation des éléments d’interface utilisateur est partagée entre plusieurs pages. Par exemple, il peut y avoir une bannière personnalisée en haut de la page, la navigation du site principal en bas à gauche et les mentions légales en bas. Une fois que vous avez codé ces éléments d’interface utilisateur communs sur une page, il est fastidieux de les copier et de les coller dans le code pour toutes les autres pages. Pire encore, s’il y a un changement par la suite, par exemple une nouvelle section importante du site à associer ou une nouvelle personnalisation du site, vous devrez apporter les mêmes modifications dans l’ensemble des composants individuels. Utilisez plutôt un composant de mise en page pour simplifier et réutiliser des éléments d’interface utilisateur communs.

Un composant de mise en plage dans Blazor est un composant qui partage son balisage rendu avec tous les composants qui le référencent. Vous placez des éléments d’interface utilisateur courants tels que des menus de navigation, des personnalisations et des pieds de page sur la mise en page. Ensuite, vous référencez cette disposition à partir de plusieurs autres composants. Lorsque la page est affichée, des éléments uniques tels que les détails de la pizza demandée proviennent du composant de référencement. Cependant, les éléments communs proviennent de la disposition. Vous ne devez coder les éléments d’interface utilisateur communs qu’une seule fois, dans la mise en page. Ensuite, si vous devez changer l’image du site ou apporter une autre modification, vous devez uniquement corriger la disposition. La modification s’applique automatiquement à tous les composants qui y font référence.

Coder une mise en page Blazor

Une mise en page Blazor est un type de composant spécifique : l’écriture d’une mise en page Blazor est donc une tâche similaire à l’écriture d’autres composants pour rendre l’interface utilisateur dans votre application. Par exemple, vous utilisez un bloc @code et de nombreuses directives de la même façon. Les dispositions sont définies dans les fichiers avec une extension .razor. Le fichier est souvent stocké dans le dossier Shared de votre application, mais vous pouvez choisir de le stocker à n’importe quel emplacement accessible aux composants qui l’utilisent.

Deux exigences sont propres aux composants de mise en page Blazor :

  • Vous devez hériter de la classe LayoutComponentBase.
  • Vous devez inclure la directive @Body à l’emplacement où vous souhaitez afficher le contenu des composants que vous référencez.
@inherits LayoutComponentBase

<header>
    <h1>Blazing Pizza</h1>
</header>

<nav>
    <a href="Pizzas">Browse Pizzas</a>
    <a href="Toppings">Browse Extra Toppings</a>
    <a href="FavoritePizzas">Tell us your favorite</a>
    <a href="Orders">Track Your Order</a>
</nav>

@Body

<footer>
    @new MarkdownString(TrademarkMessage)
</footer>

@code {
    public string TrademarkMessage { get; set; } = "All content is &copy; Blazing Pizzas 2021";
}

Remarque

Les composants de mise en page n’incluent pas de directive @page, car ils ne gèrent pas les demandes directement et il n’est pas nécessaire de créer une route pour eux. Au lieu de cela, les composants qui les référencent utilisent la directive @page.

Si vous avez créé votre application Blazor à partir d’un modèle de projet Blazor, la mise en page par défaut de l’application est le composant Shared/MainLayout.razor.

Utiliser une mise en page dans un composant Blazor

Pour utiliser une disposition d’un autre composant, ajoutez la directive @layout avec le nom de la mise en page à appliquer. Le code HTML du composant sera affiché à la position de la directive @Body.

@page "/FavoritePizzas/{favorite}"
@layout BlazingPizzasMainLayout

<h1>Choose a Pizza</h1>

<p>Your favorite pizza is: @Favorite</p>

@code {
    [Parameter]
    public string Favorite { get; set; }
}

Ce diagramme illustre comment un composant et une disposition sont combinés pour afficher le code HTML final :

Diagramme montrant comment la balise d’un composant est combinée avec le balisage d’une disposition pour créer le code HTML final d’une page.

Si vous voulez appliquer un modèle à tous les composants Blazor d’un dossier, vous pouvez utiliser le fichier _Imports.razor comme raccourci. Lorsque le compilateur Blazor trouve ce fichier, il comprend automatiquement ses directives dans tous les composants du dossier. Cette technique supprime la nécessité d’ajouter la directive @layout à chaque composant et s’applique aux composants dans le même dossier que le fichier _Imports.razor et à tous ses sous-dossiers.

Important

N’ajoutez pas de directive @layout au fichier _Imports.razor dans le dossier racine de votre projet, car cela entraîne une boucle infinie de mises en page.

Si vous souhaitez appliquer une mise en page par défaut à chaque composant de tous les dossiers de votre application Web, vous pouvez le faire dans le composant App.razor, où vous configurez le composant Routeur, comme vous l’avez appris dans l’unité 2. Dans la balise <RouteView>, utilisez l’attribut DefaultLayout.

<Router AppAssembly="@typeof(Program).Assembly">
    <Found Context="routeData">
        <RouteView RouteData="@routeData" DefaultLayout="@typeof(BlazingPizzasMainLayout)" />
    </Found>
    <NotFound>
        <p>Sorry, there's nothing at this address.</p>
    </NotFound>
</Router>

Pour les composants dont la mise en page est spécifiée dans leur propre directive @layout, ou dans un fichier _Imports.razor, la directive remplace ce paramétrage de mise en page par défaut.

Vérifiez vos connaissances

1.

Quelle est la syntaxe correcte pour spécifier une mise en page appelée MyLayout sur une page Blazor ?