Exercício - Melhorar a interatividade de aplicativo com eventos de ciclo de vida

Concluído

A pizzaria decidiu que quer vender uma pizza especial tamanho família que só está disponível no tamanho 24 polegadas. O aplicativo de pizza atual tem um controle deslizante de tamanho que não dá suporte a uma pizza de tamanho único. Você será solicitado a adicionar a nova pizza tamanho família e a desabilitar a opção de tamanho dessa pizza.

Neste exercício, você altera o banco de dados de pizza para adicionar a pizza tamanho família e alterar o modelo de pizza para dar suporte à nova pizza. Para lidar com eventos de ciclo de vida do componente Blazor, faça alterações na caixa de diálogo Configurar pizza a fim de lidar com o caso de tamanho fixo.

Criar o tamanho de pizza família

Primeiro, você adiciona a nova funcionalidade FixedSize ao modelo de pizza e cria a pizza tamanho família no banco de dados de pizza.

1. No Explorer do Visual Studio Code, expanda Modelos e selecione PizzaSpecial.cs.

2. No arquivo PizzaSpecial.cs, após a propriedade ImageUrl, adicione a seguinte nova propriedade:

   public int? FixedSize { get; set; }
   

3. Abra o arquivo Pizza.cs e substitua o método GetBasePrice pelo seguinte código:

   public decimal GetBasePrice() =>
       Special is { FixedSize: not null }
           ? Special.BasePrice
           : (decimal)Size / DefaultSize * Special?.BasePrice ?? 1;
   

   O código agora considera um tamanho especial que tem um FixedSize quando retorna BasePrice.

4. Expanda Dados e selecione SeedData.cs.

5. No arquivo SeedData.cs, adicione o código a seguir da nova pizza tamanho família ao final da declaração de matriz specials no método InitializeAsync.

   new()
   {
       Id = 9,
       Name = "Margherita Family Size",
       Description = "24\" of pure tomatoes and basil",
       BasePrice = 14.99m,
       ImageUrl = "img/pizzas/margherita.jpg",
       FixedSize = 24
   }
   

6. A classe SeedData preenche previamente o banco de dados de pizza com pizzas especiais. Você precisa excluir o banco de dados existente para que outro PizzaSpecial seja criado. No Explorer, selecione e exclua os arquivos pizza.db, pizza.db-shm e pizza.db-wal.

7. No Visual Studio Code, pressione F5or ou selecione Executar>Iniciar Depuração.

8. No aplicativo, selecione a nova pizza Marguerita Tamanho Família.

   

9. No formulário do pedido, observe que você ainda pode alterar o tamanho da pizza.

10. Pressione Shift+F5 ou selecione Executar>Parar Depuração para interromper o aplicativo.

Remover o controle deslizante de tamanho

O componente ConfigurePizzaDialog usa um elemento HTML range para permitir que o cliente selecione o tamanho da pizza. Uma forma de desabilitar a entrada de usuário é omitir condicionalmente a renderização do controle de usuário.

1. No Explorer do Visual Studio Code, expanda Compartilhado e selecione ConfigurePizzaDialog.razor.

2. Na diretiva @code, nas propriedades existentes, adicione os seguintes membros:

   bool supportSizing = true;
   
   protected override void OnInitialized()
   {
       if (Pizza is { Special.FixedSize: not null })
       {
           Pizza.Size = Pizza.Special.FixedSize.Value;
           supportSizing = false;
       }
   }
   

   O campo supportSizing usa como padrão true, mas se a pizza tiver um tamanho fixo, o campo será definido como false. A substituição do método de ciclo de vida OnInitialized define o tamanho da pizza para o tamanho fixo e desativa o suporte a dimensionamento.

   Observação

   Se o código contasse com a interoperabilidade JavaScript, o uso do método OnInitialized não teria funcionado. Nesse caso, você precisaria usar o método OnAfterRenderAsync para garantir que a interoperabilidade JavaScript estivesse disponível.

3. Próximo à parte superior do arquivo no <form class="dialog-body">, substitua as linhas existentes label e input pelo seguinte código:

   @if (supportSizing)
   {
       <label>Size:</label>
       <input type="range" min="@Pizza.MinimumSize" max="@Pizza.MaximumSize"
           step="1" @bind="Pizza.Size" @bind:event="oninput" />
   }
   

4. Pressione F5 ou selecione Executar>Iniciar Depuração.

5. Adicione a pizza tamanho família e verifique se o controle deslizante de tamanho está desabilitado porque ele está omitido da renderização.

   

6. Peça uma pizza diferente e verifique se você ainda pode usar o controle deslizante de tamanho para essa pizza.

7. Pressione Shift+F5 ou selecione Executar>Parar Depuração para interromper o aplicativo.