Fermer

octobre 19, 2023

Principes fondamentaux de routage et de navigation Blazor


Le routage est une fonctionnalité clé de toute application monopage. Il permet au développeur d’organiser le site Web et à l’utilisateur de naviguer sur différentes pages.

Transformer les composants Blazor en pages routables

Chaque fois que nous utilisons le @page directive sur un composant Blazor, le compilateur ajoutera le RouteAttribute lors de la compilation, le rendant disponible sous forme d’itinéraire.

C’est ce qui différencie les composants standards référencés dans d’autres composants Blazor des composants routables, généralement référencés sous le nom de pages Blazor.

Le routeur dans Blazor

Lors de la création d’un projet Blazor à l’aide de Visual Studio 2022, vous obtiendrez le code suivant dans le fichier App.razor déposer:

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

Le composant Routeur provient du Microsoft.AspNetCore.Components.Routing espace de noms et nécessite une référence à l’assembly d’application.

Au démarrage, le routeur lit l’assembly d’application référencé et recherche RouteAttribute appliqué aux classes de composants Blazor compilées.

Un itinéraire peut être trouvé ou introuvable. Au cas où il serait trouvé, nous utilisons le RouteView composant pour restituer la vue connectée aux informations de routage.

Nous spécifions également un composant de mise en page par défaut. La mise en page par défaut est utilisée pour tous les composants de page qui ne spécifient pas explicitement une mise en page à l’aide de l’attribut @layout directif.

Si l’itinéraire demandé ne peut pas être trouvé, nous affichons une simple erreur à l’aide d’un extrait HTML trivial. Nous pourrions personnaliser et améliorer le message d’erreur si une page n’est pas trouvée ici, mais cela dépasse le cadre des principes fondamentaux de routage et de navigation.

Le FocusOnNavigate Le composant permet de se concentrer sur un élément HTML une fois la navigation terminée. On peut utiliser n’importe quel sélecteur CSS pour définir sur quel élément se concentrer dans la navigation. Le modèle par défaut utilise le h1 sélecteur, qui est une bonne valeur par défaut qui aide les lecteurs d’écran à comprendre que la page a été parcourue.

Important: Le routage dans Blazor nécessite que nous définissions le base balise dans la section d’en-tête du code HTML. Cependant, en utilisant le modèle par défaut, il est correctement défini dans le _Host.cshtml déposer. Assurez-vous d’ajuster cette valeur en fonction de l’endroit et de la manière dont vous hébergez votre application en production.

<!DOCTYPE html>
<html lang="en">
<head>
    
    <base href="~/" />
    
    </head>

Indice: Le routeur agit de la même manière pour Blazor Server, ainsi que pour les applications Blazor WebAssembly.

Passage des paramètres d’itinéraire

Les routes statiques constituent la base, mais les routes dynamiques sont ce dont nous avons besoin dans une application réelle. Les itinéraires dynamiques contiennent des paramètres pour transmettre des données pendant la navigation dans les pages.

Prenons un exemple où vous avez ce qui suit Library composant de page :

@page "/library"
<h3>Library</h3>

<ul>
    <li><a href="/book/1">My first book</a></li>
    <li><a href="/book/2">My second book</a></li>
    <li><a href="/book/3">My third book</a></li>
</ul>

Nous définissons une liste de trois livres. Chaque livre est un lien vers une page. Nous fournissons le identifiant du livre comme le paramètre d’itinéraire.

Jetons maintenant un coup d’œil à Book composant de page.

@page "/book/{id}"
<h3>Book @Id</h3>

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

Dans un premier temps, nous utilisons le @page directive pour définir l’itinéraire. Nous utilisons /book comme partie statique de l’itinéraire et utilisez des accolades pour définir le identifiant paramètre comme espace réservé.

Dans la section code, nous définissons une propriété de type string et nommez-le de la même manière que l’espace réservé dans l’itinéraire. Les itinéraires sont insensible à la casse.

Nous pouvons utiliser le Id propriété dans le modèle HTML ou le code C# comme toutes les autres propriétés. Il sera renseigné lors de la navigation. Dans cet exemple, nous rendons le identifiant en tant que membre de h3 étiqueter.

Application de contraintes d’itinéraire

Dans l’exemple précédent, nous avons défini le identifiant paramètre d’itinéraire de type string. C’est la valeur par défaut car chaque fois que nous définissons une URL, c’est un string et peut contenir tout type de paramètre de route.

Dans notre exemple, nous utilisons le identifiant du livre comme paramètre d’itinéraire. Il serait probablement préférable d’utiliser int au lieu de string comme type pour le Id propriété.

Si nous modifions uniquement le type du paramètre, nous obtiendrons une erreur lors de la navigation car le routeur n’a pas pu transmettre un string argument à un int propriété.

Cependant, nous pouvons spécifier le type d’un paramètre de route avec la syntaxe suivante :

@page "/book/{id:int}"

Nous utilisons deux points suivis du type que nous voulons utiliser pour le paramètre route.

La totalité Book Le composant ressemble maintenant à ceci :

@page "/book/{id:int}"
<h3>Book @Id</h3>

@code {
    [Parameter]
    public int Id { get; set; }
}

Je suggère d’utiliser le bon type pour les paramètres d’itinéraire. Cela permet un code plus propre dans l’implémentation de la page. Par exemple, nous n’avons pas besoin d’analyser manuellement le identifiant de string dans notre exemple. Cela enregistre quelques lignes de code supplémentaires.

Moins nous écrivons de code, moins nous avons de risques d’introduire des bogues.

Le gestionnaire de navigation

Jusqu’à présent, nous avons utilisé des liens pour naviguer entre les pages. Le NavigationManager nous permet de naviguer d’une page à une autre au sein du code d’interaction C#.

Changeons rapidement l’exemple précédent pour naviguer en cliquant sur un li élément au lieu d’utiliser la balise d’ancrage.

@page "/library"
@inject NavigationManager Navigation

<h3>Library</h3>

<ul>
    <li @onclick="() => NavigateToBook(1)">My first book</li>
    <li @onclick="() => NavigateToBook(2)">My second book</li>
    <li @onclick="() => NavigateToBook(3)">My third book</li>
</ul>

@code {
    public void NavigateToBook(int id)
    {
        Navigation.NavigateTo($"book/{id}");
    }
}

Nous avons supprimé le a étiquette depuis l’intérieur du li élément de la liste de livres. Au lieu de cela, nous avons ajouté le @onclick événement à la li étiqueter. On appelle alors le NavigateToBook événement et fournir le identifiant du livre comme argument.

Le NavigateToBook La méthode définie dans la section de code du composant utilise le Navigation propriété injectée à l’aide du @inject directive au-dessus du composant.

Lors de la navigation à l’aide du NavigationManagernous pouvons fournir différents NavigationOptions. Par exemple, nous pouvons contourner le routage côté client et forcer le navigateur à charger la nouvelle page depuis le serveur en utilisant le ForceLoad propriété. De plus, nous pouvons remplacer l’entrée de l’historique en utilisant le ReplaceHistoryEntry propriété.

Indice: En plus de lancer la navigation, nous pouvons également écouter le LocationChanged événement pour les changements d’itinéraire et exécuter du code personnalisé lors de la navigation sur une page spécifique.

Travailler avec des chaînes de requête

En plus de travailler avec les paramètres d’URL à l’aide de l’attribut Parameter, Blazor propose également une API simple pour lire les chaînes de requête.

Une chaîne de requête est une URL qui ressemble à ceci :

/search?firstname=Claudio&lastname=Bernasconi

Pour permettre à un composant de page de lire un paramètre à partir d’une chaîne de requête, nous devons utiliser le SupplyParameterFromQuery attribut et le Parameter attribut.

Considérer ce qui suit Search code du composant de la page :

@page "https://www.telerik.com/search"
<h3>Search</h3>
<p>Search intent: First name: @FirstName Last name: @LastName</p>

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

    [Parameter]
    [SupplyParameterFromQuery]
    public string LastName { get; set; }
}

On définit deux propriétés de type string et appliquer à la fois le Parameter et le SupplyParameterFromQuery les attributs.

Dans le code du modèle, nous restituons simplement le contenu des deux propriétés à l’écran.

Quand nous appelons l’URL /search?firstname=Claudio&lastname=Bernasconi, Blazor fournit aux deux propriétés leur partie respective de la chaîne de requête. C’est une solution simple et très puissante.

Si vous souhaitez donner à la propriété un nom différent de celui indiqué dans l’URL, vous pouvez utiliser le Name propriété du SupplyParameterFromQuery attribut pour définir le nom dans l’URL.

Indication de chargement entre les transitions de page

Parfois, le chargement d’une page peut prendre beaucoup de temps. Nous pouvons utiliser le Navigating composant au sein du Router composant pour afficher un balisage personnalisé pendant la transition de page.

<Router AppAssembly="@typeof(App).Assembly">
    <Found Context="routeData">
        <!-- Code omitted -->
    </Found>
    <NotFound>
        <!-- Code omitted -->
    </NotFound>
    <Navigating>
        <p>Page is loading...</p>
    </Navigating>
</Router>

Je garde généralement les navigations de pages aussi courtes que possible. Par exemple, je charge les données de manière asynchrone, ce qui rend le chargement de la page beaucoup plus rapide (initialement sans données).

Le NavLink Le composant peut être utilisé à la place d’une simple balise d’ancrage HTML. Il applique automatiquement un « actif » Classe CSS selon que son URL correspond à l’URL actuelle.

Le NavMenu Le composant généré par les modèles de projet Visual Studio 2022 contient un exemple d’utilisation du NavLink composant:

<nav class="flex-column">
    <div class="nav-item px-3">
        <NavLink class="nav-link" href="" Match="NavLinkMatch.All">
            <span class="oi oi-home" aria-hidden="true"></span> Home
        </NavLink>
    </div>
    <div class="nav-item px-3">
        <NavLink class="nav-link" href="counter">
            <span class="oi oi-plus" aria-hidden="true"></span> Counter
        </NavLink>
    </div>
    <div class="nav-item px-3">
        <NavLink class="nav-link" href="fetchdata">
            <span class="oi oi-list-rich" aria-hidden="true"></span> Fetch data
        </NavLink>
    </div>
</nav>

Il utilise le NavLink composant et fournissez la classe CSS par défaut appliquée à tous les liens. Dans ce cas, c’est « lien de navigation ». Le lien est fourni vers le href propriété.

En plus de spécifier le comportement de correspondance à l’aide du NavLinkMatch énumération, nous pouvons également fournir une classe CSS personnalisée pour l’actif NavLink en utilisant le ActiveClass propriété. La valeur par défaut est « actif ».

Conclusion

Routage et navigation sont des principes fondamentaux lorsque l’on travaille avec des applications d’une seule page. Blazor fournit un implémentation simple mais puissante des deux hors de la boîte.

Nous n’avons pas besoin de sélectionner l’une des multiples options de routage ; c’est tout inclus dans Blazor. Néanmoins, il offre beaucoup de place pour du code personnalisé et est très flexible et extensible. Il gère non seulement des cas d’utilisation simples, mais fournit également des API pour des scénarios avancés.

Il contribue à Blazor, permettant le développement rapide d’applications Web modernes d’une seule page.

Si vous souhaitez en savoir plus sur le développement de Blazor, pensez à lire d’autres articles du Série Blazor Basicsou regardez le Cours accéléré Blazor GRATUIT sur Youtube.

Le meilleur outil 2023 pour ta croissance Instagram !



Source link

octobre 19, 2023