Exercício: associar controles aos dados em aplicativos Blazor

Concluído

O aplicativo Blazing Pizza precisa atualizar a interface quando os clientes modificarem as pizzas e adicioná-las aos pedidos. O Blazor permite que você associe controles HTML a propriedades em C# para atualizar quando os valores mudarem.

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

Neste exercício, você deixará o aplicativo Blazing Pizza numa 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 após essas alterações.

Exibir o pedido de pizza de um cliente

Você adicionará uma barra lateral que exibirá todas as pizzas adicionadas por um cliente 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 e @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 no OrderState.Order, ele as exibirá. Se não houver pedidos, os clientes receberão a solicitação para adicionar alguma.

   Você verá alguns erros, pois o componente não sabe quais são os pedidos.

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

   Order order => OrderState.Order;
   

5. Selecione F5 ou Executar. Selecione Iniciar Depuração.

   

   Experimente pedir algumas pizzas e cancelar outras. Você verá que elas são adicionadas 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

Talvez você tenha notado que não há como remover uma pizza configurada do carrinho de compras do cliente. Vamos adicionar essa funcionalidade.

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

1. No explorador de arquivos, selecione Services/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 tag adiciona um X em cada pizza na barra lateral do pedido. Quando é selecionada, ela chama o método RemoveConfiguredPizza no serviço OrderState.

5. Selecione F5 ou Executar. Selecione Iniciar Depuração.

   

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

Configurar um tamanho de uma 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 ao controle HTML input para associar seu valor ao tamanho de pizza:

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

3. Selecione F5 ou Executar. Selecione Iniciar Depuração.

   Use a caixa de diálogo atualizada para adicionar pizzas de tamanho diferente ao seu pedido. Clique na barra de controle deslizante em vez de arrastar. 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é liberar 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 Executar. Selecione Iniciar Depuração.

   

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

Por exemplo, o preço é atualizado por causa desse código:

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

O preço é atualizado à medida que o tamanho da pizza é alterado, pois o método em GetFormattedTotalPrice() da pizza usa o tamanho da pizza para calcular o preço total.

Você progrediu com o aplicativo Blazing Pizza. Se você quer continuar melhorando o aplicativo, conclua o próximo módulo neste roteiro de aprendizagem.