Principes de base de Blazor : Travailler avec les mises en page Blazor

Découvrez les mises en page dans Blazor (comment elles définissent un ensemble de composants Blazor qui sont rendus pour afficher la structure d’une application Web) et comment créer des mises en page réutilisables.

Dans cet article du Les bases du Blazor série, nous découvrirons les mises en page Blazor et comment implémenter des composants de mise en page réutilisables.

Tu peux accéder au code utilisé dans cet exemple sur GitHub.

Qu’est-ce qu’une mise en page Blazor ?

Une mise en page définit un ensemble de composants Blazor qui sont rendus pour afficher le structure d’une application web.

Jetons un coup d’œil à une application Blazor Server créée à l’aide du modèle de projet Blazor Server par défaut dans Visual Studio 2022.

Le MainLayout composant dans le Shared le dossier ressemble à ceci :

@inherits LayoutComponentBase

<PageTitle>BlazorLayouts</PageTitle>

<div class="page">
    <div class="sidebar">
        <NavMenu />
    </div>

    <main>
        <div class="top-row px-4">
            <a href="https://docs.microsoft.com/aspnet/" target="_blank">About</a>
        </div>

        <article class="content px-4">
            @Body
        </article>
    </main>
</div>

Il utilise le @inherits directive pour spécifier qu’il hérite de la LayoutComponentBase taper. C’est ce qui fait d’un composant Blazor classique un composant de mise en page.

Nous pouvons avoir dans la mise en page n’importe quel contenu dont nous avons besoin pour créer la structure de l’application Web. Dans ce cas, nous avons quelques divs qui organisent un menu d’application en faisant référence aux NavMenu composant.

Pour afficher le contenu spécifique à la page du composant qui utilise le MainLayoutnous utilisons le @Body propriété, un RenderFragmentde la LayoutComponentBase type de base.

Nous faisons référence à MainLayout composant dans le App composant.

<Router AppAssembly="@typeof(App).Assembly">
    <Found Context="routeData">
        <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
        <FocusOnNavigate RouteData="@routeData" Selector="h1" />
    </Found>
    <NotFound>
        <PageTitle>Not found</PageTitle>
        <LayoutView Layout="@typeof(MainLayout)">
            <p role="alert">Sorry, there's nothing at this address.</p>
        </LayoutView>
    </NotFound>
</Router>

Comme vous pouvez le constater, le MainLayout Le composant est utilisé comme mise en page pour le NotFound cas, ainsi que la disposition par défaut du Found cas du routeur Blazor.

L’alternative à l’utilisation de composants de mise en page consiste à dupliquer la structure du site Web pour chaque composant ou à référencer les composants, tels que le NavMenu composant sur chaque page. Cela entraînerait un nouveau rendu inutile et ne constituerait pas une excellente expérience pour les développeurs.

Les mises en page Blazor rendent la réutilisation des mises en page plus accessible. Pour la plupart des applications Web, il est logique d’avoir un MainLayout qui définit la structure de la partie principale de l’application.

Mais que se passe-t-il si nous voulons qu’une partie de l’application soit différente ? Par exemple, lorsque vous disposez d’un espace réservé aux membres sur un site Web public ?

Création d’un composant de mise en page supplémentaire

Tout d’abord, nous créons un nouveau MemberLayout composant au sein du Shared dossier de l’application Blazor et ajoutez le contenu suivant :

@inherits LayoutComponentBase

<PageTitle>Members</PageTitle>

<div style="background-color: lightcoral; min-height: 100dvh; padding: 20px;">
    <main>@Body</main>
</div>

Comme mentionné dans la section précédente de cet article, nous devons hériter du LayoutComponentBase tapez pour transformer un composant Blazor standard en un composant de mise en page.

Ensuite, nous utilisons le PageTitle composant pour définir le titre du site Web sur Membres. Nous n’avons pas besoin d’un menu ou d’un en-tête pour la partie membre de l’application Web.

Au lieu de cela, nous utilisons le composant HTML principal et utilisons le Body propriété du LayoutComponentBase tapez comme son enfant. C’est l’espace réservé qui sera remplacé par le contenu de la page Blazor spécifique utilisant cette mise en page.

Nous utilisons du CSS pour distinguer l’arrière-plan de l’arrière-plan normal. MainLayout composant.

Utilisation d’une présentation spécifique pour un seul composant

La manière la plus simple mais la plus spécifique d’attribuer une mise en page à un composant de page consiste à utiliser l’option @layout directif.

Nous créons un nouveau dossier, /Membersau sein du /Pages dossier de l’application Web Blazor et créez un MembersPage composant à l’intérieur de ce dossier.

Le composant utilise le code suivant :

@layout MemberLayout
@page "/members"

<h3>Members Overview</h3>
<p>This page is exclusively for members of this service.</p>

<a href="https://www.telerik.com/">&larr; Back</a>

Comme indiqué ci-dessus, nous utilisons le @layout directive pour préciser le MemberLayout pour cette page. Nous utilisons également le @page directive pour transformer le composant en page en l’enregistrant auprès du routeur Blazor et en fournissant une URL.

Le reste du code définit le contenu de la page. Dans ce cas, nous utilisons un titre de page utilisant un h3 balise et du texte en utilisant le paragraph élément. Ensuite, nous ajoutons un anchor qui permet à l’utilisateur de revenir au Index page.

Pour faire le MembersPage accessible à l’utilisateur, nous ajoutons un lien vers la section membres au NavMenu composant référencé dans le MainLayout composant comme celui-ci :

<div class="nav-item px-3">
    <NavLink class="nav-link" href="members">
        <span class="oi oi-list-rich" aria-hidden="true"></span> Members
    </NavLink>
</div>

Lorsque nous démarrons l’application et naviguons vers la page du membre, nous voyons une présentation complètement différente.

Utilisation d’une présentation spécifique pour plusieurs composants

Nous avons appris que nous pouvons définir une mise en page par défaut qui est utilisée au cas où aucune autre mise en page pour le composant de page n’est définie.

Nous avons également appris que nous pouvons utiliser le @layout directive sur une page pour créer cette page spécifique en utilisant une autre mise en page.

Mais que se passe-t-il si nous avons plusieurs pages dans la section membres de l’application Web ? Devons-nous avoir le @layout directive sur chaque page ?

Heureusement, Blazor propose une option plus conviviale pour les développeurs.

Nous extrayons le @layout MemberLayout définition de la MembersPage composant dans un _Imports.razor fichier dans le même dossier.

Désormais, chaque composant de page à l’intérieur du /Members le dossier utilisera les définitions de l’intérieur du _Imports.razor déposer. Par conséquent, la MemberLaoyut sera appliqué à tous les composants de la page à l’intérieur du /Members dossier.

Composants de mise en page imbriqués

Nous pouvons également définir des composants de mise en page imbriqués. Par exemple, nous pouvons définir le MemberLayout hériter de LayoutComponentBase tapez mais utilisez également le MainLayout comme composant de base en utilisant le @layout directif.

Un exemple de définition pour une telle mise en œuvre du MemberLayout Le composant de mise en page ressemblerait à ceci :

@inherits LayoutComponentBase
@layout MainLayout

<h1>Admin</h1>
@Body

Chaque fois que nous utilisons le MemberLayout composant, il restituera le contenu de la page à l’intérieur du MemberLayout composant (où nous mettons le @Body définition). Le code entier sera alors placé là où le @Body la définition est à l’intérieur du MainLayout composant.

Les composants imbriqués nous permettent de créer une arborescence de disposition similaire aux composants Blazor classiques. L’image suivante visualise l’exemple ci-dessus.

Un cas d’utilisation idéal pour les composants de mise en page imbriqués pourrait être la section de nos membres. Par exemple, nous souhaitons ajouter un menu secondaire visible uniquement aux membres connectés.

Conclusion

Les composants de mise en page sont une partie importante des applications Web Blazor. Ils nous offrent la possibilité de réutiliser les mises en page sur différentes pages.

Ils veillent également à ce que, par exemple, les composants de pied de page ne soient pas affichés à chaque navigation de page.

Nous pouvons attribuer un composant de mise en page à un composant de page spécifique en utilisant le @layout directive, ou un dossier entier contenant plusieurs pages à l’aide d’un _Import.razor fichier contenant le @layout directif.

Tu peux accéder au code utilisé dans cet exemple sur GitHub.

Si vous souhaitez en savoir plus sur le développement de Blazor, vous pouvez regarder mon cours intensif Blazor gratuit sur YouTube. Et restez à l’écoute du blog Telerik pour en savoir plus Les bases du Blazor.