Découvrez comment les paramètres de routage affectent le routage de votre application Blazor
Vous avez vu comment, dans Blazor, vous pouvez utiliser des parties de l’URI pour acheminer les demandes vers le composant approprié. Vous pouvez également intercepter d’autres parties de l’URI et y accéder dans votre code à l’aide de paramètres de routage.
Supposons que vous travaillez sur le site web de l’entreprise de livraison de pizzas et que vous avez routé des demandes de pizza vers le composant Pizzas.razor. À présent, vous souhaitez obtenir la pizza favorite de l’utilisateur à partir de l’URI et l’utiliser pour afficher des informations sur d’autres pizzas qu’ils peuvent souhaiter.
Ici, vous allez apprendre à utiliser les paramètres de routage pour spécifier des parties de l’URL à traiter dans votre code.
Notes
Les blocs de code dans cette unité sont des exemples illustratifs. Vous écrirez votre propre code dans l’unité suivante.
Paramètres d’itinéraire
Plus haut dans ce module, vous avez appris comment les parties de l’URI demandées par l’utilisateur peuvent être utilisées pour acheminer la requête vers le composant approprié. Vous souhaitez souvent utiliser d’autres parties de l’URI comme valeur dans votre page rendue. Par exemple, supposons que l’utilisateur demande :
http://www.contoso.com/favoritepizza/hawaiian
À l’aide de la directive @page, vous avez appris à acheminer cette requête vers, par exemple, le composant FavoritePizza.razor . Vous voulez maintenant utiliser la valeur hawaiian dans votre composant. Pour obtenir cette valeur, vous pouvez la déclarer en tant que paramètre de routage.
Utilisez la directive @page pour spécifier des parties de l’URI qui seront passées au composant en tant que paramètres de routage. Dans le code de votre composant, vous pouvez obtenir la valeur d’un paramètre d’itinéraire de la même façon que vous obtenez la valeur d’un paramètre de composant :
@page "/FavoritePizzas/{favorite}"
<h1>Choose a Pizza</h1>
<p>Your favorite pizza is: @Favorite</p>
@code {
[Parameter]
public string Favorite { get; set; }
}
Le code précédent utilise des accolades dans la directive @page pour spécifier le paramètre de routage et lui donner un nom.
Notes
Les paramètres de composant sont des valeurs envoyées à partir d’un composant parent à un composant enfant. Dans le parent, vous spécifiez la valeur de paramètre du composant en tant qu’attribut de la balise du composant enfant. Les paramètres de routage sont spécifiés différemment. Ils sont spécifiés dans une partie de l’URI. En arrière-plan, le routeur Blazor intercepte ces valeurs et les envoie au composant en tant que valeurs de composant, ce qui explique pourquoi vous pouvez y accéder de la même façon. Les paramètres de routage ne respectent pas la casse et sont transmis à un paramètre de composant avec le même nom.
Paramètres de routage facultatifs
Dans l’exemple précédent, le paramètre {favorite} est obligatoire. Pour rendre le paramètre de routage facultatif, utilisez un point d’interrogation :
@page "/FavoritePizzas/{favorite?}"
<h1>Choose a Pizza</h1>
<p>Your favorite pizza is: @Favorite</p>
@code {
[Parameter]
public string Favorite { get; set; }
protected override void OnInitialized()
{
Favorite ??= "Fiorentina";
}
}
Il est judicieux de définir une valeur par défaut pour le paramètre facultatif. Dans l’exemple précédent, la valeur par défaut du paramètre Favorite est définie dans la méthode OnInitialized.
Notes
La méthode OnInitialized s’exécute quand des utilisateurs demandent la page pour la première fois. Elle ne s’exécute pas s’ils demandent la même page avec un paramètre de routage différent. Par exemple, si vous prévoyez que les utilisateurs vont passez de http://www.contoso.com/favoritepizza/hawaiian à http://www.contoso.com/favoritepizza, définissez à la place la valeur par défaut dans la méthode OnParametersSet().
Contraintes d'itinéraire
Dans les exemples précédents, la conséquence de la demande de l’URI http://www.contoso.com/favoritepizza/2 va être un message qui n’a pas de sens : « Your favorite pizza is: 2 » (Votre pizza favorite est : 2). Dans d’autres cas, des non-correspondances de type comme celle-ci peuvent provoquer une exception et afficher une erreur à l’utilisateur. Envisagez de spécifier un type pour le paramètre de routage :
@page "/FavoritePizza/{preferredsize:int}"
<h1>Choose a Pizza</h1>
<p>Your favorite pizza size is: @FavoriteSize inches.</p>
@code {
[Parameter]
public int FavoriteSize { get; set; }
}
Dans cet exemple, si l’utilisateur demande http://www.contoso.com/favoritepizza/margherita, il n’existe pas de correspondance avec le composant précédent. Par conséquent, la demande est routée ailleurs. Si l’utilisateur demande http://www.contoso.com/favoritepizza/12, il y a une correspondance de route et le composant affiche le message Your favorite pizza size is: 12 inches (Votre taille de pizza favorite est : 12 pouces). Un type spécifique pour le paramètre de routage comme celui-ci est appelé contrainte de routage. Vous pouvez utiliser ces autres types dans une contrainte :
| Contrainte | Exemple | Exemples de correspondances |
|---|---|---|
| bool | {vegan:bool} | http://www.contoso.com/pizzas/true |
| DATETIME | {birthdate:datetime} | http://www.contoso.com/customers/1995-12-12 |
| decimal | {maxprice:decimal} | http://www.contoso.com/pizzas/15.00 |
| double | {weight:double} | http://www.contoso.com/pizzas/1.234 |
| float | {weight:float} | http://www.contoso.com/pizzas/1.564 |
| guid | {pizza id:guid} | http://www.contoso.com/pizzas/CD2C1638-1638-72D5-1638-DEADBEEF1638 |
| long | {totals ales:long} | http://www.contoso.com/pizzas/568192454 |
Définir un paramètre de routage catch-all
Considérez le composant suivant de la version antérieure de cette unité :
@page "/FavoritePizza/{favorite}"
<h1>Choose a Pizza</h1>
<p>Your favorite pizza is: @Favorite</p>
@code {
[Parameter]
public string Favorite { get; set; }
}
Supposons maintenant que l’utilisateur ait essayé de spécifier deux favoris en demandant l’URI http://www.contoso.com/favoritepizza/margherita/hawaiian. La page affiche le message Your favorite pizza is: margherita (Votre pizza favorite est : margherita) et ignore le sous-dossier hawaiian. Vous pouvez modifier ce comportement à l’aide d’un paramètre de routage Catch-All\, qui capture les chemins d’accès dans plusieurs limites de dossiers d’URI (barres obliques). Préfixez d’un astérisque (*) le nom du paramètre de routage pour faire du paramètre de routage un paramètre fourre-tout :
@page "/FavoritePizza/{*favorites}"
<h1>Choose a Pizza</h1>
<p>Your favorite pizzas are: @Favorites</p>
@code {
[Parameter]
public string Favorites { get; set; }
}
Avec le même URI de demande, la page affiche maintenant le message Your favorite pizzas are: margherita/hawaiian (Vos pizzas favorites sont : margherita/hawaïenne).