Exercício – Associar controles a dados em aplicativos Blazor

Concluído

O aplicativo Blazing Pizza precisa atualizar a interface quando os clientes alteram pizzas e as adicionam aos pedidos. O Blazor permite que você associe controles HTML às propriedades C# para atualizar quando seus valores forem alterados.

Os clientes devem ver quais pizzas estão pedindo e como o tamanho escolhido afeta o preço.

Neste exercício, você obtém o aplicativo Blazing Pizza em uma posição em que os pedidos podem ser atualizados e editados. Você verá como associar controles às propriedades de uma pizza e recalcular os preços dessas alterações.

Exibir o pedido de pizza de um cliente

Você vai adicionar uma barra lateral que exibe todas as pizzas que um cliente adiciona ao pedido.

1. Interrompa o aplicativo se ele ainda estiver em execução.

2. No Visual Studio Code, no explorador de arquivos, expanda Páginas e selecione Index.razor.

3. Entre os blocos @if e @code, adicione este código:

   <div class="sidebar">
       @if (order.Pizzas.Any())
       {
           <div class="order-contents">
               <h2>Your order</h2>
   
               @foreach (var configuredPizza in order.Pizzas)
               {
                 <div class="cart-item">
                     <div class="title">@(configuredPizza.Size)" @configuredPizza.Special.Name</div>
                     <div class="item-price">
                         @configuredPizza.GetFormattedTotalPrice()
                     </div>
                 </div>
               }
           </div>
       }
       else
       {
           <div class="empty-cart">Choose a pizza<br>to get started</div>
       }
   
       <div class="order-total @(order.Pizzas.Any() ? "" : "hidden")">
           Total:
           <span class="total-price">@order.GetFormattedTotalPrice()</span>
           <a href="checkout" class="@(OrderState.Order.Pizzas.Count == 0 ? "btn btn-warning disabled" : "btn btn-warning")">
               Order >
           </a>
       </div>
   </div>
   

   Este HTML adiciona uma barra lateral à página. Se houver pizzas em OrderState.Order, elas serão exibidas. Se não houver pedidos, os clientes serão solicitados a adicionar alguns.

   Há alguns erros porque o componente não sabe quais são os pedidos.

4. No bloco @codeabaixoList<PizzaSpecial> specials = new();, adicione este código:

   Order order => OrderState.Order;
   

5. Selecione F5 ou selecione Executar. Em seguida, selecione Iniciar Depuração.

   

   Tente pedir algumas pizzas e cancelar algumas. Observe que eles são adicionados ao carrinho e o total do pedido é atualizado.

6. Selecione Shift+F5 ou selecione Parar Depuração.

Remover uma pizza do pedido de um cliente

Você pode notar que não há como remover uma pizza configurada da cesta de compras do cliente. Vamos adicionar essa funcionalidade.

A primeira etapa é atualizar o OrderState serviço para que ele possa fornecer um método para remover pizzas de um pedido.

1. No explorador de arquivos, selecione Serviços/OrderState.cs.

2. Na parte inferior da classe, adicione este método:

   public void RemoveConfiguredPizza(Pizza pizza)
   {
       Order.Pizzas.Remove(pizza);
   }
   

3. No explorador de arquivos, expanda Páginas e selecione Index.razor.

4. Em <div class="cart-item">, adicione uma marca <a> antes do fechamento </div> para criar um botão de remoção:

   <a @onclick="@(() => OrderState.RemoveConfiguredPizza(configuredPizza))" class="delete-item">x</a>
   

   Essa etiqueta adiciona um X a cada pizza na barra lateral do pedido. Quando você o seleciona, chama o método RemoveConfiguredPizza no serviço OrderState.

5. Selecione F5 ou selecione Executar. Em seguida, selecione Iniciar Depuração.

   

6. Selecione Shift+F5 ou selecione Parar Depuração.

Configurar um tamanho de pizza dinamicamente

A caixa de diálogo de configuração de pizza não é atualizada quando o controle deslizante de tamanho é alterado. O componente precisa de uma maneira de atualizar a pizza e o tamanho e recalcular o preço.

1. No explorador de arquivos, expanda Compartilhado e selecione ConfigurePizzaDialog.razor.

2. Adicione código para associar o valor do input controle HTML ao tamanho da pizza:

   <input type="range" min="@Pizza.MinimumSize" max="@Pizza.MaximumSize" step="1" @bind="Pizza.Size"/>
   

3. Selecione F5 ou selecione Executar. Em seguida, selecione Iniciar Depuração.

   Use a caixa de diálogo atualizada para adicionar algumas pizzas de tamanho diferente ao seu pedido. Selecione um ponto na barra deslizante em vez de arrastá-lo. Observe que o tamanho da pizza é atualizado no evento mouse-up do controle.

   Se você arrastar o controle deslizante, o tamanho não será alterado até que você libere o mouse. Vamos corrigir isso.

4. Selecione Shift+F5 ou selecione Parar Depuração.

5. Adicione o evento ao qual o controle deve ser associado:

   <input type="range" min="@Pizza.MinimumSize" max="@Pizza.MaximumSize" step="1" @bind="Pizza.Size" @bind:event="oninput" />
   

6. Selecione F5 ou selecione Executar. Em seguida, selecione Iniciar Depuração.

   

Como a adição do @bind="Pizza.Size" código forneceu tanta funcionalidade? Se você examinar todo o código ConfigurePizzaDialog.razor , verá que sua equipe já conectou os outros elementos às propriedades da pizza.

Por exemplo, o preço é atualizado devido a este código:

Price: <span class="price">@(Pizza.GetFormattedTotalPrice())</span>

O preço é atualizado conforme o tamanho da pizza muda porque o método na pizza GetFormattedTotalPrice() usa o tamanho da pizza para calcular o preço total.

Você fez progressos no aplicativo Blazing Pizza. Se você quiser continuar a melhorá-lo, conclua o próximo módulo neste roteiro de aprendizagem.