Exercício – Criar um formulário de endereço com componentes Blazor

  • 4 minutos

No momento, o aplicativo Blazing Pizza está usando elementos HTML para capturar dados e botões. A estrutura Blazor aprimorou o suporte para formulários que permitem que eles usem componentes que podem ser vinculados a um modelo C#.

A equipe deseja que você substitua os elementos HTML atuais por componentes Blazor. A equipe gostaria que você só enviasse pedidos se o endereço e o nome não estivessem em branco.

Neste exercício, você substituirá os campos HTML atuais por um componente Blazor e alterará como o cliente envia pedidos. Você verá como usar o EditContext para escrever validações manuais para um formulário.

Adicionar um componente EditForm Blazor

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

  2. No bloco <div class="main">, adicione um novo componente EditForm.

    <div class="main">
    <EditForm Model=Order.DeliveryAddress OnSubmit=CheckSubmission>

  3. No elemento </button>, feche o componente EditForm.

            </button>
    </EditForm>
</div>

  4. Remova o evento @onclick em </button>.

    <button class="checkout-button btn btn-warning" disabled=@isSubmitting>

  5. No bloco @code, adicione o código para manipular o envio do formulário acima do método PlaceOrder existente.

    private async Task CheckSubmission()
{
    isSubmitting = true;
    await PlaceOrder();
    isSubmitting = false;
}

  6. Exclua a linha de código isSubmitting = true; do método PlaceOrder().

Substituir elementos HTML por componentes Blazor

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

  2. Selecione o menu Editar e Substituir.

  3. No primeiro campo, digite <input no campo substituir, insira <InputText e selecione substituir tudo.

    Captura de tela do Visual Studio Code e a caixa de diálogo de substituição de texto.

  4. Selecione o menu Editar e Substituir.

  5. No primeiro campo, digite @bind= no campo substituir, insira @bind-Value= e selecione substituir tudo.

  6. Remova o código @ref="startName" no campo Nome.

  7. Remova todo o código abaixo da declaração de parâmetro no bloco @code. O bloco agora deve ser assim.

    @code {
    [Parameter] public Address Address { get; set; }
}

    No momento, FocusAsync só tem suporte em elementos HTML.

Verificar se há campos vazios antes de enviar um formulário

Vamos adicionar uma mensagem de erro que o aplicativo pode mostrar a um cliente se ele não inserir seu nome ou endereço.

  1. No explorador de arquivos, expanda Páginas e selecione Checkout.razor.

  2. Adicione uma mensagem de erro sob o elemento h4>Deliver to...</h4>.

    <div class="checkout-delivery-address">
  <h4>Deliver to...</h4>
  @if (isError) {
    <div class="alert alert-danger">Please enter a name and address.</div>
  }
  <AddressEditor Address="Order.DeliveryAddress" />
</div>

  3. No bloco @code, adicione u ma declaração para o booliano isError.

    bool isError = false;

  4. Melhore o método CheckSubmission() para fazer um pedido apenas se os campos nome e CEP tiverem dados inseridos.

    private async Task CheckSubmission(EditContext editContext)
{
    isSubmitting = true;
    var model = editContext.Model as Address;
    isError = string.IsNullOrWhiteSpace(model?.Name)
        || string.IsNullOrWhiteSpace(model?.Line1)
        || string.IsNullOrWhiteSpace(model?.PostalCode);
    if (!isError)
    {
        await PlaceOrder();
    }
    isSubmitting = false;
}

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

    Tente pedir algumas pizzas sem inserir nenhuma informação. Você deverá ver a mensagem de erro.

    Captura de tela da mensagem de erro.

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