Cvičení – použití parametrů trasy ke zlepšení navigace v aplikacích

5 min

Parametry trasy Blazor umožňují komponentám přistupovat k datům předávaným v adrese URL. Parametry trasy umožňují naší aplikaci přistupovat ke konkrétním objednávkám podle jejich OrderId.

Zákazníci chtějí zobrazit další informace o konkrétních objednávkách. Takže se rozhodnete aktualizovat stránku pokladny tak, aby zákazníky přímo převezli na jejich objednávky. Potom chcete aktualizovat stránku objednávek, aby mohla sledovat jakoukoli aktuálně otevřenou objednávku.

V tomto cvičení přidáte novou stránku podrobností objednávky, která využívá parametry trasy. Pak uvidíte, jak můžete k parametru přidat omezení, abyste zkontrolovali správný datový typ.

Vytvoření stránky podrobností objednávky

V editoru Visual Studio Code v nabídce vyberte Soubor>nový textový soubor.
Jako jazyk vyberte ASP.NET Razor.

Vytvořte součást stránky podrobností objednávky s tímto kódem:

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

Tato stránka vypadá podobně jako součást MyOrders . Voláme Na OrderController, ale tentokrát žádáme o konkrétní objednávku. Chceme ten, který odpovídá OrderId. Pojďme přidat kód, který zpracovává tento požadavek.

Změny uložte tak, že vyberete Ctrl+S.
Pro název souboru použijte OrderDetail.razor. Ujistěte se, že soubor uložíte v adresáři Stránky .
V Průzkumníku souborů vyberte OrderController.cs.

Pod metodu PlaceOrder přidejte novou metodu pro vrácení objednávek se stavem.

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

Tento kód povolil kontroleru objednávek reagovat na požadavek HTTP s orderId v adrese URL. Metoda pak použije toto ID k dotazování databáze a pokud je nalezena objednávka, vrátí OrderWithStatus objekt.

Tuto novou stránku použijeme, když se zákazník přihlásí. Potřebujete aktualizovat komponentu Checkout.razor .

V Průzkumníku souborů rozbalte stránky. Pak vyberte Checkout.razor.
Změňte volání na následující, aby se použilo ID objednávky zadané objednávky.
```
NavigationManager.NavigateTo($"myorders/{newOrderId}");
```
Existující kód se už zachytával newOrderId jako odpověď od umístění objednávky. Teď ho můžete použít k přímému přechodu na tuto objednávku.

Omezení parametru trasy na správný datový typ

Aplikace by měla reagovat pouze na žádosti s ID číselných objednávek, například (http://localhost:5000/myorders/6). Nic nezastaví, aby se někdo pokusil použít nečíselné objednávky. Pojďme to změnit.

V Průzkumníku souborů rozbalte stránky. Pak vyberte OrderDetail.razor.
Změňte parametr trasy tak, aby komponenta přijímala pouze celá čísla.
```
@page "/myorders/{orderId:int}"
```
Pokud se teď někdo pokusí přejít,(http://localhost:5000/myorders/non-number) směrování Blazor nenajde shodu pro adresu URL a vrátí stránku, která nebyla nalezena.
V editoru Visual Studio Code vyberte F5. Nebo v nabídce Spustit vyberte Spustit ladění.

Projděte si aplikaci, objednávku a podívejte se. Přejdete na podrobnou obrazovku objednávky a zobrazí se stav objednávky.
Zkuste různá ID objednávek. Pokud použijete celé číslo, které není platnou objednávkou, zobrazí se zpráva o nenalezení objednávky.

Pokud používáte ID neintegerových objednávek, zobrazí se stránka, která nebyla nalezena. Důležitější je, že aplikace nemá neošetřenou výjimku.
Pokud chcete aplikaci zastavit, vyberte Shift + F5.

Aktualizace stránky objednávek

V tuto chvíli má stránka Moje objednávky odkazy na zobrazení dalších podrobností, ale adresa URL je špatná.

V Průzkumníku souborů rozbalte stránky. Pak vyberte MyOrders.razor.
<a href="myorders/" class="btn btn-success"> Nahraďte prvek tímto kódem:
```
<a href="myorders/@item.Order.OrderId" class="btn btn-success">
```

Můžete otestovat, jak tento kód funguje, a to tak, že pro toto cvičení uděláte poslední objednávku pizzy. Pak vyberte Moje objednávky a postupujte podle odkazu Sledování > .

Cvičení – použití parametrů trasy ke zlepšení navigace v aplikacích

Vytvoření stránky podrobností objednávky

Omezení parametru trasy na správný datový typ

Aktualizace stránky objednávek

Váš názor