Exercício - Utilize parâmetros de rota para melhorar a navegação nas suas aplicações

  • 5 minutos

Os parâmetros de rota Blazor permitem que os componentes acessem os dados passados na URL. Os parâmetros de rota permitem que nosso aplicativo acesse pedidos específicos por seus OrderId.

Os clientes querem poder ver mais informações sobre pedidos específicos. Assim, você decide atualizar a página de checkout para levar os clientes diretamente aos seus pedidos feitos. Em seguida, você deseja atualizar a página de pedidos para permitir que eles rastreiem qualquer pedido aberto no momento.

Neste exercício, você adiciona uma nova página de detalhes do pedido que usa parâmetros de rota. Em seguida, você vê como pode adicionar uma restrição ao parâmetro para verificar o tipo de dados correto.

Criar uma página de detalhes do pedido

  1. No Visual Studio Code, no menu, selecione Arquivo>Novo Arquivo.

  2. Nomeie o novo arquivo OrderDetail.razor e salve-o no diretório Pages .

  3. No novo arquivo, crie um componente de página de detalhes do pedido com este código:

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

    Esta página é semelhante ao componente MyOrders . Estamos fazendo uma chamada para o OrderController, mas desta vez estamos pedindo um pedido específico. Queremos aquele que corresponde OrderId. Vamos adicionar o código que processa essa solicitação.

  4. Salve as alterações selecionando Ctrl+S.

  5. No explorador de ficheiros, selecione OrderController.cs.

  6. Sob o PlaceOrder método, adicione um novo método para retornar pedidos com um 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);
}

    Esse código permitiu que o controlador Order respondesse a uma solicitação HTTP com orderId na URL. Em seguida, o método usa essa ID para consultar o banco de dados e, se uma ordem for encontrada, retornar um OrderWithStatus objeto.

    Vamos usar esta nova página quando um cliente finalizar a compra. Precisas atualizar o componente Checkout.razor.

  7. No explorador de ficheiros, expanda Páginas. Em seguida, selecione Checkout.razor.

  8. Altere a chamada para o seguinte para usar o ID do pedido feito.

    NavigationManager.NavigateTo($"myorders/{newOrderId}");

    O código existente já estava capturando newOrderId como a resposta de fazer o pedido. Você pode usá-lo agora para ir diretamente para essa ordem.

Restringir o parâmetro route ao tipo de dados correto

O aplicativo só deve responder a solicitações com IDs de ordem numérica, como (http://localhost:5000/myorders/6). Não há nada que impeça alguém de tentar usar ordens não numéricas. Vamos encriptá-los.

  1. No explorador de ficheiros, expanda Páginas. Em seguida, selecione OrderDetail.razor.

  2. Altere o parâmetro route para que o componente aceite apenas números inteiros.

    @page "/myorders/{orderId:int}"

  3. Agora, se alguém tentar ir para(http://localhost:5000/myorders/non-number), o roteamento Blazor não encontrará uma correspondência para o URL e retornará a página não encontrada.

    Captura de ecrã da mensagem de página não encontrada.

  4. No Visual Studio Code, selecione F5. Ou no menu Executar , selecione Iniciar Depuração.

    Captura de tela mostrando a página de ordem detalhada para um único pedido.

    Acesse o aplicativo, encomende e faça check-out. Você é levado para a tela de pedido detalhado e vê o status do pedido.

  5. Abra uma nova janela do navegador e digite (http://localhost:5000/myorders/2). Experimente diferentes códigos de pedido, incluindo números não inteiros. Se utilizar um número inteiro que não seja uma encomenda válida, receberá uma mensagem Encomenda não encontrada .

    Captura de ecrã mostrando a mensagem Encomenda não encontrada.

    Se você usar IDs de ordem não inteiros, verá a página não encontrada. Mais importante, o aplicativo não tem uma exceção sem tratamento.

  6. Para parar o aplicativo, selecione Shift + F5.

Atualizar a página de encomendas

No momento, a página Meus pedidos tem links para ver mais detalhes, mas o URL está errado.

  1. No explorador de ficheiros, expanda Páginas. Em seguida, selecione MyOrders.razor.

  2. Substitua o <a href="myorders/" class="btn btn-success"> elemento por este código:

    <a href="myorders/@item.Order.OrderId" class="btn btn-success">

Você pode testar como esse código funciona fazendo seu último pedido de pizza para este exercício. Em seguida, selecione Meus pedidos e siga o link Acompanhar >.