Exercício - Vincular 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 seus pedidos. Blazor permite que você vincule controles HTML a propriedades C# para atualizar quando seus valores mudam.

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

Neste exercício, você obtém o aplicativo Blazing Pizza em uma posição onde os pedidos podem ser atualizados e editados. Você vê como vincular controles às propriedades de uma pizza e recalcular os preços nessas 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 seu pedido.

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

2. No Visual Studio Code, no explorador de arquivos, expanda Pages 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. Caso existam pizzas em OrderState.Order, estas são exibidas. Se não houver pedidos, os clientes serão solicitados a adicionar alguns.

   Existem alguns erros porque o componente não sabe quais são as ordens.

4. No bloco @code em List<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 Stop Debugging.

Remover uma pizza da encomenda de um cliente

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

O primeiro passo é atualizar o serviço de OrderState para que ele possa fornecer um método para remover pizzas de um pedido.

1. No explorador de ficheiros, 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 ficheiros, expanda Páginas e, em seguida, selecione Index.razor.

4. No <div class="cart-item">, adicione uma tag <a> antes do </div> de fechamento para criar um botão remover:

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

   Essa tag adiciona um X a cada pizza na barra lateral do pedido. Quando o seleciona, ele 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 Stop Debugging.

Configurar um tamanho de pizza dinamicamente

A janela de configuração da pizza não atualiza quando o slider de tamanho é alterado. O componente precisa de uma maneira de atualizar a pizza e o tamanho e, em seguida, recalcular o preço.

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

2. Adicione código para vincular o input valor do 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 tamanhos diferentes ao seu pedido. Selecione um ponto na barra deslizante em vez de arrastá-lo. Observe que o tamanho da pizza é atualizado no evento de soltar o botão do rato no controlo.

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

4. Selecione Shift+F5 ou selecione Stop Debugging.

5. Adicione o evento ao qual o controle deve estar vinculado:

   <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 código @bind="Pizza.Size" 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, as atualizações de preço devido a este código:

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

O preço é atualizado à medida que 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 caminho de aprendizagem.