Упражнение. Использование параметров маршрута для улучшения навигации приложений

5 мин

Параметры маршрута Blazor позволяют компонентам получить доступ к данным, передаваемым по URL-адресу. Параметры маршрута позволяют приложению получать доступ к определенным заказам.OrderId

Клиенты хотят получить дополнительные сведения о конкретных заказах. Таким образом, вы решите обновить страницу выкладки, чтобы клиенты могли напрямую перейти к размещенным заказам. Затем вы хотите обновить страницу заказов, чтобы разрешить им отслеживать любой открытый заказ.

В этом упражнении вы добавите новую страницу сведений о заказе, которая использует параметры маршрута. Затем вы увидите, как добавить ограничение в параметр, чтобы проверить правильный тип данных.

Создание страницы сведений о заказе

В Visual Studio Code в меню выберите "Файл>Новый файл".
Назовите новый файл OrderDetail.razor и сохраните его в каталоге Pages .

В новом файле создайте компонент страницы сведений о заказе с помощью этого кода:

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

Эта страница похожа на компонент MyOrders . Мы вызываем OrderController, но в этот раз запрашиваем конкретный заказ. который соответствует OrderId. Давайте добавим код, обрабатывающий этот запрос.

Сохраните изменения, нажав клавиши CTRL+S.
В проводнике выберите OrderController.cs.
В методе PlaceOrder добавьте новый метод для возврата заказов с состоянием.
```
[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);
}
```
Этот код позволил контроллеру Order ответить на HTTP-запрос с orderId в URL-адресе. Затем метод использует этот идентификатор для выполнения запроса к базе данных и, если заказ найден, возврата объекта OrderWithStatus.

Давайте использовать эту новую страницу при оформлении заказа покупателем. Необходимо обновить компонент Checkout.razor.
В Файловом менеджере разверните Страницы. Затем выберите Checkout.razor.
Измените вызов на следующий, чтобы использовать идентификатор заказа поместного заказа.
```
NavigationManager.NavigateTo($"myorders/{newOrderId}");
```
Существующий код уже фиксировал newOrderId в качестве ответа на оформление заказа. Его можно использовать для перехода непосредственно к этому заказу.

Ограничение параметров маршрута до правильного типа данных

Приложение должно отвечать только на запросы с числовыми идентификаторами порядка, такими как (http://localhost:5000/myorders/6). Ничто не мешает клиентам использовать нечисловые значения заказов. Давайте изменим это.

В Файловом менеджере разверните Страницы. Затем выберите OrderDetail.razor.
Измените параметр маршрута таким образом, чтобы компонент принимал только целые числа.
```
@page "/myorders/{orderId:int}"
```
Теперь, если кто-то пытается перейти(http://localhost:5000/myorders/non-number), маршрутизация Blazor не находит совпадение для URL-адреса и возвращает страницу, не найденную.
В Visual Studio Code выберите F5. Или в меню "Запуск " выберите "Начать отладку".

Просмотрите приложение, заказ и ознакомьтесь с ней. Вы перейдете на подробный экран заказа, и вы увидите состояние заказа.
Откройте новое окно браузера и введите (http://localhost:5000/myorders/2). Попробуйте различные идентификаторы заказа, включая нецелые числа. Если вы используете целое число, которое не является допустимым порядком, вы получите сообщение о том, что заказ не найден .

Если вы используете идентификаторы не целых чисел, вы увидите, что страница не найдена. Более важно, что приложение не имеет необработанного исключения.
Чтобы остановить приложение, нажмите клавиши SHIFT + F5.

Обновление страницы заказов

На данный момент страница "Мои заказы" содержит ссылки для просмотра дополнительных сведений, но URL-адрес неправильный.

В Файловом менеджере разверните Страницы. Затем выберите MyOrders.razor.
Замените элемент <a href="myorders/" class="btn btn-success"> следующим кодом:
```
<a href="myorders/@item.Order.OrderId" class="btn btn-success">
```

Вы можете проверить, как работает этот код, сделав последний заказ пиццы для этого упражнения. Затем выберите "Мои заказы" и перейдите по ссылке "Отслеживание > ".

Обратная связь

Была ли эта страница полезна?