Oefening: routeparameters gebruiken om de navigatie van uw apps te verbeteren

5 minuten

Met blazor-routeparameters kunnen onderdelen toegang krijgen tot gegevens die zijn doorgegeven in de URL. Met routeparameters kan onze app toegang krijgen tot specifieke orders op basis van hun OrderId.

Klanten willen meer informatie over specifieke orders kunnen zien. U besluit dus de betaalpagina bij te werken om klanten rechtstreeks naar hun geplaatste bestellingen te brengen. Vervolgens wilt u de pagina orders bijwerken zodat ze elke geopende bestelling kunnen bijhouden.

In deze oefening voegt u een nieuwe orderdetailpagina toe die gebruikmaakt van routeparameters. Vervolgens ziet u hoe u een beperking aan de parameter kunt toevoegen om het juiste gegevenstype te controleren.

Een orderdetailpagina maken

Selecteer in Visual Studio Code in het menu Bestand>nieuw bestand.
Geef het nieuwe bestand OrderDetail.razor een naam en sla het op in de map Pagina's .

Maak in het nieuwe bestand een paginaonderdeel orderdetail met deze 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);
      }
    }
}

Deze pagina lijkt op het onderdeel MyOrders . We bellen naar de OrderController, maar deze keer vragen we om een specifieke bestelling. We willen degene die overeenkomt OrderId. Laten we de code toevoegen die deze aanvraag verwerkt.

Sla uw wijzigingen op door Ctrl+S te selecteren.
Selecteer OrderController.cs in de Bestandsverkenner.

Voeg onder de PlaceOrder methode een nieuwe methode toe om orders met een status te retourneren.

[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);
}

Met deze code kon de ordercontroller reageren op een HTTP-aanvraag met orderId in de URL. De methode gebruikt vervolgens deze id om een query uit te voeren op de database en, als er een order wordt gevonden, een OrderWithStatus object te retourneren.

We gaan deze nieuwe pagina gebruiken wanneer een klant uitcheckt. U moet het checkout.razor-onderdeel bijwerken .

Vouw Pagina's uit in de Verkenner. Selecteer vervolgens Checkout.razor.
Wijzig de aanroep in het volgende om de order-id van de geplaatste bestelling te gebruiken.
```
NavigationManager.NavigateTo($"myorders/{newOrderId}");
```
De bestaande code werd al vastgelegd newOrderId als het antwoord van het plaatsen van de bestelling. U kunt deze nu gebruiken om rechtstreeks naar die bestelling te gaan.

De routeparameter beperken tot het juiste gegevenstype

De app mag alleen reageren op aanvragen met numerieke order-id's, zoals (http://localhost:5000/myorders/6). Er is niets waardoor iemand niet-numerieke orders probeert te gebruiken. Laten we die waarde wijzigen.

Vouw Pagina's uit in de Verkenner. Selecteer vervolgens OrderDetail.razor.
Wijzig de routeparameter zodat het onderdeel alleen gehele getallen accepteert.
```
@page "/myorders/{orderId:int}"
```
Als iemand naartoe probeert te(http://localhost:5000/myorders/non-number) gaan, vindt Blazor-routering geen overeenkomst voor de URL en wordt de pagina niet gevonden.
Selecteer F5 in Visual Studio Code. Of selecteer in het menu Uitvoeren de foutopsporing starten.

Ga door de app, bestel en check uit. U gaat naar het gedetailleerde orderscherm en u ziet de status van de bestelling.
Open een nieuw browservenster en voer dit in (http://localhost:5000/myorders/2). Probeer verschillende order-id's, inclusief non-integers. Als u een geheel getal gebruikt dat geen geldige volgorde is, krijgt u het bericht Order niet gevonden .

Als u niet-integer order-id's gebruikt, ziet u dat de pagina niet is gevonden. Belangrijker is dat de app geen onverwerkte uitzondering heeft.
Als u de app wilt stoppen, selecteert u Shift + F5.

De pagina Orders bijwerken

Op dit moment bevat de pagina Mijn orders koppelingen om meer details weer te geven, maar de URL is onjuist.

Vouw Pagina's uit in de Verkenner. Selecteer vervolgens MyOrders.razor.
Vervang het <a href="myorders/" class="btn btn-success"> element door deze code:
```
<a href="myorders/@item.Order.OrderId" class="btn btn-success">
```

U kunt testen hoe deze code werkt door uw laatste pizzabestelling voor deze oefening te maken. Selecteer vervolgens Mijn bestellingen en volg de koppeling bijhouden >.

Feedback

Is deze pagina nuttig?