Itinéraires enfants et paramètres d’itinéraire facultatifs

Découvrez comment implémenter des routes enfants et utiliser des paramètres de route facultatifs dans Blazor pour des besoins de routage plus avancés.

Dans cet article, nous explorons itinéraires enfants et paramètres d’itinéraire facultatifs à Blazor.

Dans un article précédent de ce Les bases du Blazor série, nous avons appris le Principes fondamentaux de routage et de navigation Blazor. Cet article serait un bon point de départ si vous ne l’avez pas encore lu avant d’aborder les options de routage plus avancées de cet article.

Introduction

Le routage et la navigation sont des problèmes fondamentaux résolus par les frameworks d’applications Web modernes à page unique.

Les itinéraires statiques et le simple passage de paramètres sont souvent triviaux et peuvent être exprimés avec quelques lignes de code. Cependant, cela devient intéressant, plus complexe et souvent plus gourmand en code à résoudre. notions avancéescomme la définition et l’utilisation itinéraires enfants et paramètres d’itinéraire facultatifs.

Dans cet article, vous apprendrez comment nous pouvons implémenter des concepts de routage avancés à l’aide de Blazor.

Itinéraires enfants

Un itinéraire enfant est un itinéraire au sein d’un autre itinéraire. Parfois, on parle également d’itinéraire imbriqué.

Blazor n’a pas de routes enfants, comme vous les connaissez peut-être grâce à React ou Angular, où les implémentations de routeurs offrent une structure arborescente. Cependant, nous n’avons pas besoin réel les routes enfants dans la plupart des cas d’utilisation. Au lieu de cela, nous pouvons utiliser la manière habituelle de Blazor pour définir des itinéraires en utilisant le @page directif.

Le code suivant dans un Order Le composant affiche une définition de route enfant :

@page "/orders/{OrderId:int}/product/{ProductId:int}"

Nous avons une route parent ordres qui accepte un int paramètre OrderId. La route enfant du produit a un ProductId de type int comme paramètre.

Au lieu d’imbriquer les définitions d’itinéraire, nous devons étendre la définition d’itinéraire pour chaque niveau que nous souhaitons imbriquer plus profondément.

Jetez maintenant un œil à ce qui suit Order composant d’un scénario réel représentant une commande unique dans un système de commerce électronique :

@page "/orders/{OrderId:int}"

<h3>Order</h3>
<p>OrderId: @OrderId</p>

<h4>Products</h4>
<ul>
    <li><a href="/orders/@OrderId/product/42">Product 42</a></li>
</ul>

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

Nous fournissons le OrderId comme paramètre d’itinéraire. Nous imaginons qu’il existe un Orders page, qui contient toutes les commandes, et ceci Order Le composant affiche une seule commande.

Nous voyons également une liste de produits répertoriés dans la commande. Nous construisons un lien vers une autre page en utilisant une route enfant en étendant la route définie en haut de celle-ci. Order composant de page.

Voyons maintenant comment le ProductOrder Le composant est implémenté :

@page "/orders/{OrderId:int}/product/{ProductId:int}"

<h3>Product Details</h3>

<p>OrderId: @OrderId</p>
<p>ProductId: @ProductId</p>

<p>Go to <a href="/orders/@OrderId">Order @OrderId</a></p>

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

    [Parameter]
    public int ProductId { get; set; }
}

Nous avons la définition de l’itinéraire, qui a le ProductId à la fin, correspondant à l’URL que nous avons construite sur la page précédente pour accéder à cette page.

Dans la section code, nous devons implémenter deux propriétés. Chaque propriété contient les informations de l’un des paramètres d’itinéraire.

Au début, cela pourrait ressembler à réinventer la roue et à taper encore et encore le même code pour le parcours de chaque enfant. Même si cela est vrai, cela reste une solution élégante et simple pour exprimer ce dont nous avons besoin dans la plupart des situations.

Il se pourrait que nous ayons de véritables itinéraires pour enfants dans Blazor à l’avenir. Cependant, il y a eu une discussion qui dure depuis des annéeset la conception et la mise en œuvre de cette fonctionnalité ont été reportées à plusieurs reprises.

Supposons que vous soyez un développeur React ou Angular en transition vers Blazor et que vous souhaitiez utiliser de véritables routes imbriquées telles qu’elles sont disponibles dans ces frameworks. Dans ce cas, il existe un Implémentation de Blazor Router tiers open source par un membre de la communauté.

La principale raison du retard est que le routeur actuel est simple et flexible, et qu’il répond à 99 % des besoins des développeurs.

Contraintes de type pour les définitions d’itinéraire

Ce qui suit contraintes de type sont disponibles dans Blazor pour les définitions d’itinéraire :

• bouffon {isActive:bool}
• int {âge:int}
• dateheure {date de début :dateheure}
• décimal {prix : décimal}
• double {longitude:double}
• flotter {valeur : float}
• long {largeValue : long}
• guide {monId:guid}
• chaîne {titre}

Je recommande fortement utiliser des contraintes de type pour toutes les définitions d’itinéraire. Si nous ne spécifions pas de contrainte de type, Blazor traite le paramètre comme un chaîne.

Paramètres d’itinéraire facultatifs

Maintenant que nous comprenons le routage dans Blazor et avons appris à implémenter des routes enfants, nous sommes prêts à explorer les paramètres de route facultatifs.

Semblable aux routes enfants, Blazor n’offre pas explicitement de fonctionnalité permettant d’implémenter des paramètres de route facultatifs. Mais là encore, on peut réutiliser un mécanisme existant pour ce faire.

Considérer ce qui suit OptionalParameters composant.

@page "/optional"
@page "/optional/{id:int}"
@page "/optional/{title}"

Nous définissons trois itinéraires différents en utilisant le @page directif. Oui, nous pouvons utiliser le @page directive plusieurs fois sur la même page. Nous enregistrons la page pour différents itinéraires.

Nous accédons aux valeurs des paramètres au fur et à mesure que nous y accédons lors de la définition d’un itinéraire paramétré à l’aide des propriétés de la section de code.

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

    [Parameter]
    public string Title {get;set;}
}

Le code du modèle ressemble à ceci :

 class="prism  language-html"><p>Id: @Id<br />
Title: "@Title"</p>

<ul>
    <li><a href="/optional">Optional</a></li>
    <li><a href="/optional/11">Optional/11</a></li>
    <li><a href="/optional/my-title">Optional/my-title</a></li>
</ul>

À des fins de démonstration, nous implémentons la page avec un Id et un Title propriété, qui sont toutes deux rendues à l’écran.

Nous utilisons trois liens pour accéder aux différents itinéraires.

Les paramètres d’itinéraire facultatifs vous permettent de mettre en œuvre des scénarios dynamiques dans lesquels vous souhaitez pouvoir naviguer vers une page sous différents angles avec différents paramètres.

En plus d’avoir un ou plusieurs paramètres de route facultatifs, nous pouvons également définir le type de données pour chaque paramètre à l’aide de contraintes de type.

Paramètres d’itinéraire facultatifs avec valeurs par défaut

Lorsque vous travaillez avec des paramètres de route facultatifs, la propriété contient la valeur C# par défaut du type. Dans le cas d’un string, la propriété contiendra une chaîne vide si aucune valeur n’est fournie. Dans le cas d’un intla valeur sera 0.

Cependant, nous pouvons spécifier la valeur par défaut des paramètres de route facultatifs dans le code du composant.

Tout d’abord, nous devons définir la propriété comme un type nullable. Dans cet exemple, nous modifions la définition du Id propriété à un nullable int.

[Parameter]
public int? Id {get;set;}

Ensuite, nous remplaçons le OnInitialized méthode de cycle de vie et définissez la valeur par défaut si la variable est null.

protected override void OnInitialized()
{
    Id = Id ?? 16;
}

Cette mise en œuvre garantit que le Id La propriété contient soit une valeur fournie par le paramètre route, soit la valeur par défaut définie dans l’instruction dans le OnInitialized méthode.

Conclusion

Blazor ne fournit pas de syntaxe spécifique à définir itinéraires enfants. Cependant, nous pouvons réutiliser le @page directive pour définir une route imbriquée.

Paramètres d’itinéraire facultatifs nous permettent d’enregistrer une page avec des arguments facultatifs et pour plusieurs types de paramètres différents.

Blazor prend en charge neuf différents contraintes de type pour les paramètres d’itinéraire. Blazor traitera le paramètre comme un string si nous ne précisons pas le type.

Nous pouvons spécifier des valeurs par défaut lors de l’utilisation de paramètres de route facultatifs en remplaçant le OnInitialized méthode du cycle de vie. Dans ce cas, nous devons nous assurer que nous utilisons des propriétés nullables.

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.