Découvrez comment les paramètres de routage affectent le routage de votre application Blazor

Jusqu’à présent, dans ce module Blazor, vous avez vu comment utiliser des parties de l’URI pour router les demandes vers le composant approprié. Vous pouvez également utiliser des paramètres de routage pour intercepter d’autres parties de l’URI et y accéder dans votre code.

Supposons que vous travaillez sur le site web de la société de livraison de pizzas et que vous acheminez les 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.

Paramètres de routage

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

En utilisant la @page directive, vous avez vu comment acheminer cette requête vers, par exemple, le composant FavoritePizza.razor . Vous souhaitez maintenant utiliser la valeur hawaïenne 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 transmises 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.

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.

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 existe une correspondance d’itinéraire et le composant affiche le message Votre taille de pizza préférée est : 12 pouces (30 centimètres). Un type spécifique fourni pour le paramètre de route comme celui-ci est appelé une contrainte de route. Vous pouvez utiliser ces autres types dans une contrainte :

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 essaye de spécifier deux favoris en demandant l’URI http://www.contoso.com/favoritepizza/margherita/hawaiian. La page affiche le message Votre pizza préférée est : margherita et ignore le sous-dossier hawaïen. 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 requête, la page affiche maintenant le message Vos pizzas préférées sont : margherita/hawaiian.