Exercício – Criar um manipulador de eventos Blazor para eventos onclick

Concluído

O Blazor dá a você o poder de conectar o código C# a eventos DOM HTML. Você usará essa capacidade para melhorar um aplicativo existente.

Como parte de uma equipe de desenvolvimento que trabalha para aprimorar um aplicativo Blazing Pizza, você foi solicitado a concluir o processo de finalização de compra para coletar os endereços do cliente. Você adicionará alguns campos de texto e melhorará o processo de check-out.

Neste exercício, você clonará um aplicativo existente e criará um novo componente de endereço para capturar detalhes do endereço. Com os campos em local, você definirá o foco para o primeiro campo no formulário.

Clonar o aplicativo existente de sua equipe

Observação

Este módulo usa a CLI (interface de linha de comando) do .NET e o Visual Studio Code para desenvolvimento local. Depois de concluir este módulo, você pode aplicar os conceitos usando o Visual Studio (Windows), o Visual Studio para Mac (macOS) ou o desenvolvimento contínuo usando o Visual Studio Code (Windows, Linux, & macOS).

Este módulo usa o SDK do .NET 6.0. Verifique se tem o .NET 6.0 instalado, executando o seguinte comando em seu terminal preferido:

dotnet --list-sdks

Saída semelhante à seguinte exibida:

3.1.100 [C:\program files\dotnet\sdk]
5.0.100 [C:\program files\dotnet\sdk]
6.0.100 [C:\program files\dotnet\sdk]

Verifique se uma versão que começa com 6 está listada. Se nenhum estiver listado ou o comando não for encontrado, instale o SDK do .NET 6.0 mais recente.

Se você ainda não criou um aplicativo Blazor, siga as instruções de instalação do Blazor para instalar a versão correta do .NET e verificar se o computador está configurado corretamente. Pare na etapa Criar seu aplicativo.

1. Abra o Visual Studio Code.

2. Abra o terminal integrado de Visual Studio Code selecionando Exibir e selecione Terminal no menu principal.

3. No terminal, navegue até o local em que você deseja que o projeto seja criado.

4. Clone o aplicativo do GitHub.

   git clone https://github.com/MicrosoftDocs/mslearn-use-forms-in-blazor-web-apps.git BlazingPizza
   

5. Selecione ArquivoAbrir pasta....

6. Na caixa de diálogo abrir, navegue até a pasta BlazingPizza e selecione Selecionar pasta.

   O Visual Studio Code pode solicitar as dependências não resolvidas. Selecione Restaurar.

7. Execute o aplicativo para verificar se tudo está funcionando corretamente.

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

   

   Tente configurar algumas pizzas e adicioná-las ao seu pedido. Selecione Pedido > na parte inferior da página. Você verá a página de check-out atual.

9. Pressione Shift + F5 para interromper a execução do aplicativo.

Refatorar a página de check-out

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

   No momento, a página de check-out mostra apenas a lista de pizzas que foram configuradas. Você foi solicitado a refatorar a página para incluir uma seção de endereço.

2. Substitua o bloco HTML <div class="main"> existente para ter duas colunas para dados.

   <div class="main">
       <div class="checkout-cols">
           <div class="checkout-order-details">
               <h4>Review order</h4>
               <OrderReview Order="Order" />
           </div>
   
           <div class="checkout-delivery-address">
               <h4>Deliver to...</h4>
               <AddressEditor Address="Order.DeliveryAddress" />
           </div>
       </div>
   
       <button class="checkout-button btn btn-warning" @onclick="PlaceOrder" disabled=@isSubmitting>
           Place order
       </button>
   </div>
   

   O código anterior conecta o evento HTML onclick do elemento button ao método Blazor PlaceOrder no bloco @code.

   A refatoração faz referência a dois novos controles Blazor OrderReview e AddressEditor. Você move o código de check-in antigo que listou as pizzas para o componente OrderReview.

3. No explorador de arquivos, clique com o botão direito do mouse em Compartilhado e selecione Novo Arquivo.

4. Insira OrderReview.razor como o nome do arquivo.

5. Adicione um loop foreach para exibir as pizzas em um pedido.

   @foreach (var pizza in Order.Pizzas)
   {
       <p>
           <strong>
               @(pizza.Size)"
               @pizza.Special.Name
               (£@pizza.GetFormattedTotalPrice())
           </strong>
       </p>
   }
   
   <p>
       <strong>
           Total price:
           £@Order.GetFormattedTotalPrice()
       </strong>
   </p>
   
   @code {
       [Parameter] public Order Order { get; set; }
   }
   

6. No explorador de arquivos, clique com o botão direito do mouse em Compartilhado e selecione Novo Arquivo.

7. Insira AddressEditor.razor como o nome do arquivo.

8. Adicione o código que usa um elemento input para cada campo em um endereço. A classe Address na pasta Modelo mostra todos os campos.

   <div class="form-field">
       <label>Name:</label>
       <div>
           <input @bind="Address.Name" />
       </div>
   </div>
   
   <div class="form-field">
       <label>Line 1:</label>
       <div>
           <input @bind="Address.Line1" />
       </div>
   </div>
   
   <div class="form-field">
       <label>Line 2:</label>
       <div>
           <input @bind="Address.Line2" />
       </div>
   </div>
   
   <div class="form-field">
       <label>City:</label>
       <div>
           <input @bind="Address.City" />
       </div>
   </div>
   
   <div class="form-field">
       <label>Region:</label>
       <div>
           <input @bind="Address.Region" />
       </div>
   </div>
   
   <div class="form-field">
       <label>Postal code:</label>
       <div>
           <input @bind="Address.PostalCode" />
       </div>
   </div>
   
   @code {
       [Parameter] public Address Address { get; set; }
   }
   

Testar a nova página de check-out

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

   

   Adicione algumas pizzas e selecione Pedido > para ver o novo fluxo de check-out.

2. Pressione Shift + F5 para interromper o aplicativo em execução.

Melhorar a usabilidade do formulário

Quando o cliente é levado para a página de check-out, a primeira coisa que ele faz é inserir o nome. O Blazor permite definir o foco em elementos HTML em uma página. Vamos melhorar nosso aplicativo adicionando isso.

1. Em AddressEditor.razor, altere o HTML do elemento de nomeinput para adicionar @ref="startName".

   <input @ref="startName" @bind="Address.Name" />
   

   A diretiva Blazor @ref="startName" permite que o bloco de código crie uma ElementReference para referenciar o elemento de entrada. Você pode usar essa referência de elemento para chamar FocusAsync depois que uma página tiver sido renderizada.

2. Adicione o código para chamar FocusAsync depois que uma página tiver sido carregada sob a declaração [Parameter] public Address Address { get; set; }.

   private ElementReference startName;
   
   protected override async Task OnAfterRenderAsync(bool firstRender)
   {
       if (firstRender) {
           await startName.FocusAsync();
       }
   }    
   

   Esse código cria a ElementReference e, depois que uma página é renderizada, define o foco para o campo Name.

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

   

   Adicione algumas pizzas e selecione Pedido >> para ver que, na página de check-out, o campo de formulário Nome tem o foco.

4. Pressione Shift + F5 para interromper a execução do aplicativo.