Övning – Använda routningsparametrar för att förbättra appnavigering

5 minuter

Med Blazor-vägparametrar kan komponenter komma åt data som skickas i URL:en. Med routningsparametrar kan vår app komma åt specifika beställningar via deras OrderId.

Kunder vill kunna se mer information om specifika beställningar. Så du bestämmer dig för att uppdatera utcheckningssidan för att ta kunder direkt till sina beställningar. Sedan vill du uppdatera ordersidan så att de kan spåra alla öppna beställningar.

I den här övningen lägger du till en ny orderinformationssida som använder routningsparametrar. Sedan ser du hur du kan lägga till en begränsning i parametern för att kontrollera rätt datatyp.

Skapa en orderinformationssida

I Visual Studio Code går du till menyn och väljer Arkiv>Ny fil.
Ge den nya filen namnet OrderDetail.razor och spara den i katalogen Pages .

I den nya filen skapar du en orderinformationssida med den här koden:

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

Den här sidan liknar Komponenten MyOrders . Vi gör ett anrop till OrderController, men den här gången begär vi en specifik order. Vi vill ha den som matchar OrderId. Nu ska vi lägga till koden som bearbetar den här begäran.

Spara ändringarna genom att välja Ctrl+S.
I utforskaren väljer du OrderController.cs.

PlaceOrder Under metoden lägger du till en ny metod för att returnera beställningar med status.

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

Den här koden gjorde det möjligt för orderkontrollanten att svara på en HTTP-begäran med orderId i URL:en. Metoden använder sedan det här ID:t för att köra frågor mot databasen och returnera ett OrderWithStatus objekt om en beställning hittas.

Nu ska vi använda den här nya sidan när en kund checkar ut. Du måste uppdatera komponenten Checkout.razor .

I Utforskaren, expandera Sidor. Välj sedan Checkout.razor.
Ändra anropet till följande om du vill använda beställnings-ID:t för beställningen.
```
NavigationManager.NavigateTo($"myorders/{newOrderId}");
```
Den befintliga koden hämtades newOrderId redan som svar från beställningen. Du kan använda den nu för att gå direkt till den ordningen.

Begränsa routningsparametern till rätt datatyp

Appen bör endast svara på begäranden med numeriska order-ID:n, till exempel (http://localhost:5000/myorders/6). Det finns inget som hindrar någon från att försöka använda icke-numeriska beställningar. Vi ändrar på det.

I Utforskaren, expandera Sidor. Välj sedan OrderDetail.razor.
Ändra routningsparametern så att komponenten endast accepterar heltal.
```
@page "/myorders/{orderId:int}"
```
Om någon försöker gå till(http://localhost:5000/myorders/non-number) hittar Inte Blazor-routning någon matchning för URL:en och returnerar att sidan inte hittades.
I Visual Studio Code väljer du F5. Eller på menyn Kör väljer du Starta felsökning.

Gå igenom appen, beställ och checka ut. Du tas till den detaljerade orderskärmen och du ser status för ordern.
Öppna ett nytt webbläsarfönster och ange (http://localhost:5000/myorders/2). Prova olika order-ID:er, inklusive icke-inintegers. Om du använder ett heltal som inte är en giltig beställning får du ett meddelande om att Order inte hittades .

Om du använder order-ID:t som inte är indelade ser du att sidan inte hittades. Ännu viktigare är att appen inte har ett ohanterat undantag.
Om du vill stoppa appen väljer du Skift + F5.

Uppdatera ordersidan

För närvarande har sidan Mina beställningar länkar för att visa mer information, men URL:en är felaktig.

I Utforskaren, expandera Sidor. Välj sedan MyOrders.razor.
Ersätt elementet <a href="myorders/" class="btn btn-success"> med den här koden:
```
<a href="myorders/@item.Order.OrderId" class="btn btn-success">
```

Du kan testa hur den här koden fungerar genom att göra din sista pizzabeställning för den här övningen. Välj sedan Mina beställningar och följ länken Spåra > .

Feedback

Var den här sidan till hjälp?