O Blazor nos oferece um componente para trabalhar com Formulários. Como esse é um assunto bem extenso, vamos explorá-lo em partes, através de uma série de artigos. Neste artigo vamos fazer uma introdução aos Forms do Blazor.
Model
Os Forms do Blazor nos permitem criar um formulário para input de dados, com um Submit. E no Form utilizamos o recurso de DataBinding, para exibição e captura dos dados em inputs HTML.
Sendo assim, vamos começar criando um modelo para testar o Form. Nesse teste vamos criar uma classe chamada Cliente, como você pode ver na Figura 1.
Para iniciar o exemplo, vamos criar um componente chamado ClienteForm.razor. Em seguida vamos definir uma rota para o componente, e criar um atributo do tipo Cliente para representar o modelo do formulário. Veja a Figura 2.
Veja que para podermos criar uma instância da classe Cliente, precisamos importar o namespace MyBlazorApp.Model, onde a classe foi criada.
EditForm
O Componente de Form do Blazor se chama EditForm. Veja na Figura 3 como podemos implementar um Form com o EditForm, para a classe Cliente.
Veja que precisamos passar dois parâmetros iniciais para o EditForm. O Model, que deve apontar para o atributo _cliente, criado anteriormente. E o evento OnValidSubmit, que deve apontar para um método. Veremos esse método mais adiante.
No conteúdo do EditForm temos que montar o nosso formulário. Veja que ao invés de usarmos a tag <input /> para os campos do formulário, estamos utilizando um componente chamado InputText do Blazor. Isso é necessário para que os inputs possam conversar com o Form.
Note também que através do atributo bind-Value, definimos os binds de cada InputText com a propriedade correspondente da classe Cliente.
Para finalizar o Form, colocamos um button do tipo Submit. Esse button dispara o método configurado lá em cima no evento OnValidSubmit.
OnValidSubmit
Uma das grandes vantagens de se utilizar um EditForm, está nas suas capacidades de validação. Quando clicamos no botão Submit do Form, o EditForm vai primeiramente validar se todos os dados imputados estão validos. E somente se eles estiverem validos, é que o Evento OnValidSubmit será realmente disparado.
Nós não vamos explorar as capacidades de validação do EditForm aqui nesse artigo, isso ficará para o próximo. Mas tenha em mente que a importância de se utilizar um Form está justamente no processo de validação.
Para fechar o nosso exemplo, vamos implementar o método Submit que foi configurado para ser executado no evento OnValidSubmit. Veja a sua implementação na Figura 4.
Veja que não estamos fazendo nada de especial aqui. Estamos apenas jogando no Console, algumas informações do Cliente que foram imputadas no Form. Com isso poderemos comprovar que o EditForm funcionou corretamente.
Concluindo
Para testar execute a sua aplicação de exemplo e aponte a URL para a rota /cliente. Como você pode ver na Figura 5, o Submit do nosso formulário está funcionando corretamente.
Você deve ter observado que não tem nada de muito especial na forma de criar um Form no Blazor. Essa estrutura base que criamos aqui é muito simples. Agora, nos próximos artigos veremos como podemos melhorar os nossos Forms com alguns recursos bem interessantes do Blazor.
Grande Abraço e até o próximo!
Blaze of Code 
3 comentários em “Introdução aos Forms do Blazor”