Utiliser le composant de routeur Blazor pour contrôler la navigation de votre application

• 5 minutes

Le système de routage Blazor offre des options flexibles que vous pouvez utiliser pour vous assurer que les demandes de l’utilisateur atteignent un composant capable de les gérer et de retourner des informations que l’utilisateur souhaite.

Supposons que vous travailliez sur le site Web de la société de commande de pizzas. Vous voulez configurer le site afin que les demandes d’informations détaillées sur les pizzas et leurs possibilités de personnalisation soient gérées par le même composant. Vous avez terminé cette phase, mais vos tests montrent que les demandes de personnalisation reçoivent un message d’erreur. Vous devez résoudre ce problème.

Ici, vous apprendrez à configurer des itinéraires dans Blazor à l’aide de la directive @page.

Utilisation de modèles de routage

Lorsque l’utilisateur effectue une requête pour une page à partir de votre application Web, il peut spécifier ce qu’il souhaite voir avec les informations contenues dans l’URI. Par exemple :

http://www.contoso.com/pizzas/margherita?extratopping=pineapple

Après le protocole et l’adresse du site Web, cet URI indique que l’utilisateur veut en savoir plus sur les pizzas Margherita. En outre, la chaîne de requête suivant le point d’interrogation montre que le client est intéressé par l’ajout d’ananas en garniture. Dans Blazor, vous utilisez le routage pour vous assurer que chaque demande est envoyée au meilleur composant et que le composant dispose de toutes les informations dont il a besoin pour afficher ce que l’utilisateur souhaite. Dans ce cas, vous pouvez souhaiter que la demande soit envoyée au composant Pizzas et que ce composant affiche une pizza Margherita avec des informations sur l’ajout d’ananas.

Blazor achemine les demandes avec un composant spécialisé appelé routeur. Il est configuré dans App.razor comme ceci :

<Router AppAssembly="@typeof(Program).Assembly">
	<Found Context="routeData">
		<RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
	</Found>
	<NotFound>
		<p>Sorry, we haven't found any pizzas here.</p>
	</NotFound>
</Router>

Lorsque l’application démarre, Blazor vérifie l'attribut AppAssembly pour identifier l’assembly qu’il doit analyser. Il analyse cet assembly pour rechercher les composants pour lesquels RouteAttribute est présent. À l’aide de ces valeurs, Blazor compile un objet RouteData qui spécifie la manière dont les demandes sont acheminées vers les composants. Lorsque vous codez l’application, vous utilisez la directive @page dans chaque composant pour corriger le RouteAttribute.

Dans le code ci-dessus, la balise <Found> spécifie le composant qui gère le routage au moment de l’exécution : le composant RouteView. Ce composant reçoit l’objet RouteData et tous les paramètres de l’URI ou de la chaîne de requête. Il affiche ensuite le composant spécifié et sa disposition. Vous pouvez utiliser la balise <Found> pour spécifier une disposition par défaut, qui sera utilisée lorsque le composant sélectionné ne spécifie pas de disposition avec la directive @layout. Vous en apprendrez davantage sur les dispositions plus loin dans ce module.

Dans le composant <Router>, vous pouvez également spécifier ce qui est retourné à l’utilisateur lorsqu’il n’existe pas d’itinéraire correspondant, à l’aide de la balise <NotFound>. L’exemple précédent retourne un seul paragraphe <p>, mais vous pouvez rendre du HTML plus complexe. Par exemple, il peut inclure un lien vers la page d’accueil ou une page de contact pour les administrateurs du site.

Utilisation de la directive @page

Dans un composant Blazor, la directive @page spécifie que le composant doit gérer les demandes directement. Vous pouvez spécifier un RouteAttribute dans la directive @page en le transmettant en tant que chaîne. Par exemple, cet attribut spécifie que la page gère les demandes vers la route /Pizzas :

@page "/Pizzas"

Si vous souhaitez spécifier plusieurs routes pour le composant, utilisez deux directives @page ou plus comme dans cet exemple :

@page "/Pizzas"
@page "/CustomPizzas"

Obtention d’informations d’emplacement et navigation avec NavigationManager

Supposons que vous écrivez un composant pour gérer les URI demandés par l’utilisateur, par exemple http://www.contoso.com/pizzas/margherita/?extratopping=pineapple.

Quand vous écrivez un composant, vous pouvez avoir besoin d’accéder à des informations de navigation comme celles-ci :

• L’URI complet actuel, comme http://www.contoso.com/pizzas/margherita?extratopping=pineapple.
• L’URI de base, comme http://www.contoso.com/.
• Le chemin relatif de base, comme pizzas/margherita.
• La chaîne de requête, comme ?extratopping=pineapple.

Vous pouvez utiliser un objet NavigationManager pour obtenir toutes ces valeurs. Vous devez injecter l’objet dans le composant, puis vous pouvez accéder à ses propriétés. Ce code utilise l’objet NavigationManager pour obtenir l’URI de base du site web, puis l’utilise pour définir un lien vers la page d’accueil :

@page "/pizzas"
@inject NavigationManager NavManager

<h1>Buy a Pizza</h1>

<p>I want to order a: @PizzaName</p>

<a href=@HomePageURI>Home Page</a>

@code {
	[Parameter]
	public string PizzaName { get; set; }
	
	public string HomePageURI { get; set; }
	
	protected override void OnInitialized()
	{
		HomePageURI = NavManager.BaseUri;
	}
}

Pour accéder à la chaîne de requête, vous devez analyser l’URI complet. Utilisez la classe QueryHelpers de l'assembly Microsoft.AspNetCore.WebUtilities pour exécuter cette analyse :

@page "/pizzas"
@using Microsoft.AspNetCore.WebUtilities
@inject NavigationManager NavManager

<h1>Buy a Pizza</h1>

<p>I want to order a: @PizzaName</p>

<p>I want to add this topping: @ToppingName</p>

@code {
	[Parameter]
	public string PizzaName { get; set; }
	
	private string ToppingName { get; set; }
	
	protected override void OnInitialized()
	{
		var uri = NavManager.ToAbsoluteUri(NavManager.Uri);
		if (QueryHelpers.ParseQuery(uri.Query).TryGetValue("extratopping", out var extraTopping))
		{
			ToppingName = System.Convert.ToString(extraTopping);
		}
	}
}

Avec le composant ci-dessus déployé, si un utilisateur a demandé l’URI http://www.contoso.com/pizzas?extratopping=Pineapple, il voit le message « I want to add this topping: Pineapple » (Je veux ajouter cette garniture : ananas) dans la page rendue.

Vous pouvez également utiliser l'objet NavigationManager pour envoyer vos utilisateurs à un autre composant du code en appelant la méthode NavigationManager.NavigateTo() :

@page "/pizzas/{pizzaname}"
@inject NavigationManager NavManager

<h1>Buy a Pizza</h1>

<p>I want to order a: @PizzaName</p>

<button class="btn" @onclick="NavigateToPaymentPage">
	Buy this pizza!
</button>

@code {
	[Parameter]
	public string PizzaName { get; set; }
	
	private void NavigateToPaymentPage()
	{
		NavManager.NavigateTo("buypizza");
	}
}

Utiliser des composants NavLink

Dans un des exemples précédents, du code a été utilisé pour obtenir la valeur de NavigationManager.BaseUri et pour définir l’attribut href d’une balise <a> sur la page d’accueil. Dans Blazor, utilisez le composant NavLink pour rendre les balises <a>, car il bascule vers une classe CSS active quand l’attribut href du lien correspond à l’URL actuelle. En apportant un style à la classe active, vous pouvez préciser à l’utilisateur quel lien de navigation est destiné à la page actuelle.

Quand vous utilisez NavLink, l’exemple de lien de la page d’accueil ressemble au code suivant :

@page "/pizzas"
@inject NavigationManager NavManager

<h1>Buy a Pizza</h1>

<p>I want to order a: @PizzaName</p>

<NavLink href=@HomePageURI Match="NavLinkMatch.All">Home Page</NavLink>

@code {
	[Parameter]
	public string PizzaName { get; set; }
	
	public string HomePageURI { get; set; }
	
	protected override void OnInitialized()
	{
		HomePageURI = NavManager.BaseUri;
	}
}

L'attribut Match dans le composant NavLink est utilisé pour gérer le moment auquel le lien est mis en surbrillance. Nous avons deux options :

• NavLinkMatch.All : quand vous utilisez cette valeur, le lien est mis en surbrillance comme lien actif seulement quand son href correspond à l’URL actuelle entière.
• NavLinkMatch.Prefix : quand vous utilisez cette valeur, le lien est mis en surbrillance comme lien actif quand son href correspond à la première partie de l’URL actuelle. Supposons par exemple que vous aviez le lien <NavLink href="pizzas" Match="NavLinkMatch.Prefix">. Ce lien est mis en surbrillance comme actif lorsque l’URL actuelle était http://www.contoso.com/pizzas et pour n’importe quel emplacement au sein de cette URL, par exemple http://www.contoso.com/pizzas/formaggio. Ce comportement peut aider l’utilisateur à comprendre la section du site web qu’il voit actuellement.

Vérifiez vos connaissances

1.

Quel composant devez-vous utiliser pour obtenir des informations sur l’emplacement des URI à l’intérieur d’un composant Blazor ?

RouteManager

NavigationManager

ServiceLocator

2.

Quelle est la classe CSS par défaut ajoutée à une balise d’ancre par le composant NavLink quand NavLink fait référence à l’URL active ?

current

live

active

Vous devez répondre à toutes les questions avant de vérifier votre travail.