Exercice - utiliser des paramètres de routage pour améliorer la navigation dans vos applications

5 minutes

Les paramètres de routage Blazor permettent aux composants d’accéder aux données transmises dans l’URL. Les paramètres d’itinéraire permettent à notre application d’accéder à des commandes spécifiques par leur OrderId.

Les clients veulent pouvoir afficher plus d’informations sur des commandes spécifiques. Vous décidez donc de mettre à jour la page de validation pour amener les clients directement sur les commandes qu’ils ont passées. Puis, vous souhaitez mettre à jour la page des commandes pour leur permettre de suivre les commandes en cours.

Dans cet exercice, vous ajoutez une nouvelle page des détails de la commande qui utilise des paramètres d’itinéraire. Ensuite, vous voyez comment ajouter une contrainte au paramètre pour vérifier le type de données correct.

Créer une page de détails de commande

Dans Visual Studio Code, dans le menu, sélectionnez Fichier>Nouveau fichier texte.
Sélectionnez ASP.NET Razor comme langage.

Créez un composant de page de détails de commande avec ce code :

@page "/myorders/{orderId}"
@inject NavigationManager NavigationManager
@inject HttpClient HttpClient

<div class="top-bar">
    <a class="logo" href="">
        <img src="img/logo.svg" />
    </a>

    <NavLink href="" class="nav-tab" Match="NavLinkMatch.All">
        <img src="img/pizza-slice.svg" />
        <div>Get Pizza</div>
    </NavLink>

    <NavLink href="myorders" class="nav-tab">
        <img src="img/bike.svg" />
        <div>My Orders</div>
    </NavLink>

</div>

<div class="main">
    @if (invalidOrder)
    {
        <h2>Order not found</h2>
        <p>We're sorry but this order no longer exists.</p>
    }
    else if (orderWithStatus == null)
    {
        <div class="track-order">
            <div class="track-order-title">
                <h2>
                  <text>Loading...</text>
                </h2>
                <p class="ml-auto mb-0">
                    ...
                </p>
            </div>
        </div>
    }
    else
    {
        <div class="track-order">
            <div class="track-order-title">
                <h2>
                    Order placed @orderWithStatus.Order.CreatedTime.ToLongDateString()
                </h2>
                <p class="ml-auto mb-0">
                    Status: <strong>@orderWithStatus.StatusText</strong>
                </p>
            </div>
            <div class="track-order-body">
                <div class="track-order-details">
                  @foreach (var pizza in orderWithStatus.Order.Pizzas)
                  {
                      <p>
                          <strong>
                              @(pizza.Size)"
                              @pizza.Special.Name
                              (£@pizza.GetFormattedTotalPrice())
                          </strong>
                      </p>
                  }
                </div>
            </div>
        </div>
    }
</div>

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

    OrderWithStatus orderWithStatus;
    bool invalidOrder = false;

    protected override async Task OnParametersSetAsync()
    {
      try
      {
          orderWithStatus = await HttpClient.GetFromJsonAsync<OrderWithStatus>(
              $"{NavigationManager.BaseUri}orders/{OrderId}");
      }
      catch (Exception ex)
      {
          invalidOrder = true;
          Console.Error.WriteLine(ex);
      }
    }
}

Cette page ressemble au composant myOrders. Nous effectuons un appel à OrderController mais cette fois, nous demandons une commande spécifique. Nous voulons celle qui correspond à OrderId. Ajoutons le code qui traite cette requête.

Enregistrez vos modifications en sélectionnant Ctrl+S.
Pour le nom de fichier, utilisez OrderDetail.razor. Veillez à enregistrer le fichier dans le répertoire Pages.
Dans l’Explorateur de fichiers, sélectionnez OrderController.cs.

Sous la méthode PlaceOrder, ajoutez une nouvelle méthode pour retourner les commandes avec un état.

[HttpGet("{orderId}")]
public async Task<ActionResult<OrderWithStatus>> GetOrderWithStatus(int orderId)
{
    var order = await _db.Orders
        .Where(o => o.OrderId == orderId)
        .Include(o => o.Pizzas).ThenInclude(p => p.Special)
        .Include(o => o.Pizzas).ThenInclude(p => p.Toppings).ThenInclude(t => t.Topping)
        .SingleOrDefaultAsync();

    if (order == null)
    {
        return NotFound();
    }

    return OrderWithStatus.FromOrder(order);
}

Ce code permettait au contrôleur Order de répondre à une requête HTTP avec un orderId dans l’URL. La méthode utilise ensuite cet ID pour interroger la base de données et, si une commande est trouvée, retourner un objet OrderWithStatus.

Utilisons cette nouvelle page lorsqu’un client effectue une vérification. Vous devez mettre à jour le composant Checkout.razor.

Dans l’Explorateur de fichiers, développez Pages. Sélectionnez ensuite Checkout.razor.
Modifiez l’appel comme suit, de façon à utiliser l’ID de commande de la commande passée.
```
NavigationManager.NavigateTo($"myorders/{newOrderId}");
```
Le code existant capturait déjà newOrderId comme réponse au passage de la commande. Vous pouvez l’utiliser maintenant pour accéder directement à cette commande.

Limiter le paramètre de routage au type de données correct

L’application doit répondre seulement aux demandes avec des ID numériques pour les commandes, comme (http://localhost:5000/myorders/6). Rien n’empêche une personne d’essayer d’utiliser des commandes non numériques. Nous allons changer leur mise en forme.

Dans l’Explorateur de fichiers, développez Pages. Sélectionnez ensuite OrderDetail.razor.
Modifiez le paramètre d’itinéraire pour que le composant n’accepte que des entiers.
```
@page "/myorders/{orderId:int}"
```
Maintenant, si une personne tente d’accéder à (http://localhost:5000/myorders/non-number), l’itinéraire Blazor ne trouve pas de correspondance pour l’URL et retourne Page non trouvée.
Dans Visual Studio Code, sélectionnez F5. Vous pouvez aussi sélectionner Démarrer le débogage dans le menu Exécuter.

Accédez à l’application, commandez et réglez. Vous êtes dirigé vers l’écran de la commande détaillée et vous voyez l’état de la commande.
Essayez différents ID de commande. Si vous utilisez un entier qui n’est pas une commande valide, vous obtenez un message Commande non trouvée.

Si vous utilisez des ID de commande qui ne sont pas des entiers, vous voyez Page non trouvée. Plus important, l’application n’a pas d’exception non prise en charge.
Pour arrêter l’application, sélectionnez Maj + F5.

Mettre à jour la page des commandes

Pour le moment, la page Mes commandes contient des liens pour afficher plus de détails, mais l’URL est incorrecte.

Dans l’Explorateur de fichiers, développez Pages. Sélectionnez ensuite MyOrders.razor.
Remplacez l’élément <a href="myorders/" class="btn btn-success"> par ce code :
```
<a href="myorders/@item.Order.OrderId" class="btn btn-success">
```

Vous pouvez tester le fonctionnement de ce code en passant votre dernière commande de pizza pour cet exercice. Sélectionnez ensuite Mes commandeset suivez le lien Suivi >.

Exercice - utiliser des paramètres de routage pour améliorer la navigation dans vos applications

Créer une page de détails de commande

Limiter le paramètre de routage au type de données correct

Mettre à jour la page des commandes

Commentaires