Ćwiczenie — ulepszanie nawigacji aplikacji przy użyciu parametrów trasy

5 min

Parametry trasy platformy Blazor umożliwiają składnikom uzyskiwanie dostępu do danych przekazanych w adresie URL. Parametry trasy umożliwiają naszej aplikacji dostęp do określonych zamówień według ich OrderIdparametrów .

Klienci chcą zobaczyć więcej informacji o konkretnych zamówieniach. Dlatego decydujesz się zaktualizować stronę wyewidencjonowania, aby klienci mogli bezpośrednio przejść do złożonych zamówień. Następnie chcesz zaktualizować stronę zamówień, aby umożliwić im śledzenie wszystkich aktualnie otwartych zamówień.

W tym ćwiczeniu dodasz nową stronę szczegółów zamówienia, która korzysta z parametrów trasy. Następnie zobaczysz, jak można dodać ograniczenie do parametru, aby sprawdzić prawidłowy typ danych.

Tworzenie strony szczegółów zamówienia

W programie Visual Studio Code w menu wybierz pozycję Plik>nowy plik tekstowy.
Wybierz ASP.NET Razor jako język.

Utwórz składnik strony szczegółów zamówienia przy użyciu tego kodu:

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

Ta strona wygląda podobnie do składnika MyOrders . Robimy wywołanie do OrderController, ale tym razem prosimy o określone zamówienie. Chcemy, aby OrderIdbył zgodny z elementem . Dodajmy kod, który przetwarza to żądanie.

Zapisz zmiany, wybierając Ctrl+S.
W przypadku nazwy pliku użyj polecenia OrderDetail.razor. Upewnij się, że plik został zapisany w katalogu Pages .
W Eksploratorze plików wybierz pozycję OrderController.cs.

W obszarze PlaceOrder metody dodaj nową metodę, aby zwrócić zamówienia ze stanem.

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

Ten kod umożliwił kontrolerowi zamówienia odpowiadanie na żądanie HTTP za pomocą identyfikatora orderId w adresie URL. Następnie metoda używa tego identyfikatora do wykonywania zapytań względem bazy danych, a jeśli zostanie znaleziona kolejność, zwróć OrderWithStatus obiekt.

Użyjmy tej nowej strony, gdy klient wyewidencjonuje. Należy zaktualizować składnik Checkout.razor .

W Eksploratorze plików rozwiń węzeł Strony. Następnie wybierz pozycję Checkout.razor.
Zmień wywołanie na następujące, aby użyć identyfikatora zamówienia złożonego.
```
NavigationManager.NavigateTo($"myorders/{newOrderId}");
```
Istniejący kod był już przechwytywał newOrderId jako odpowiedź z złożenia zamówienia. Teraz możesz użyć go, aby przejść bezpośrednio do tej kolejności.

Ograniczanie parametru trasy do poprawnego typu danych

Aplikacja powinna odpowiadać tylko na żądania przy użyciu identyfikatorów zamówień liczbowych, takich jak (http://localhost:5000/myorders/6). Nie ma nic powstrzymać kogoś przed próbą użycia zamówień nieliczbowych. Zmieńmy to.

W Eksploratorze plików rozwiń węzeł Strony. Następnie wybierz kolejno pozycje OrderDetail.razor.
Zmień parametr trasy tak, aby składnik akceptował tylko liczby całkowite.
```
@page "/myorders/{orderId:int}"
```
Teraz, jeśli ktoś spróbuje przejść do(http://localhost:5000/myorders/non-number), routing Platformy Blazor nie znajdzie dopasowania adresu URL i zwraca nie znaleziono strony.
W programie Visual Studio Code wybierz pozycję F5. Lub w menu Uruchom wybierz pozycję Rozpocznij debugowanie.

Przejdź przez aplikację, zamów i wyewidencjonuj. Zostanie wyświetlony ekran zamówienia szczegółowego.
Spróbuj użyć różnych identyfikatorów zamówień. Jeśli używasz liczby całkowitej, która nie jest prawidłową kolejnością, otrzymasz komunikat Order not found (Nie znaleziono zamówienia).

Jeśli używasz identyfikatorów zamówień innych niż całkowita, zobaczysz, że strona nie zostanie znaleziona. Co ważniejsze, aplikacja nie ma nieobsługiwanego wyjątku.
Aby zatrzymać aplikację, wybierz pozycję Shift + F5.

Aktualizowanie strony zamówień

W tej chwili strona Moje zamówienia zawiera linki umożliwiające wyświetlenie większej liczby szczegółów, ale adres URL jest nieprawidłowy.

W Eksploratorze plików rozwiń węzeł Strony. Następnie wybierz pozycję MyOrders.razor.
Zastąp <a href="myorders/" class="btn btn-success"> element następującym kodem:
```
<a href="myorders/@item.Order.OrderId" class="btn btn-success">
```

Możesz przetestować działanie tego kodu, tworząc ostatnią kolejność pizzy na potrzeby tego ćwiczenia. Następnie wybierz pozycję Moje zamówienia i postępuj zgodnie z linkiem Śledź > .

Ćwiczenie — ulepszanie nawigacji aplikacji przy użyciu parametrów trasy

Tworzenie strony szczegółów zamówienia

Ograniczanie parametru trasy do poprawnego typu danych

Aktualizowanie strony zamówień

Opinia