Eventos no Blazor

Nesse artigo vamos falar um pouco sobre os Eventos no Blazor. Se você ainda não conhece o Blazor, dê uma olhada nos outros artigos desse Blog, começando por este aqui.

onclick e onchange

No HTML dos componentes Blazor, os eventos são declarados como atributos, e sempre devem começar com o prefixo on, exemplo: on[nome-do-evento].

Os exemplos mais comuns e utilizados são o onclick do button e o onchange dos inputs. Veja um exemplo bem simples na Figura 1.

Figura 1: Exemplos dos eventos onclick e onchange

Como você pode ver, os eventos onclick e onchange apontam para métodos C# declarados no bloco @functions do componente.

Neste exemplo, se você executar esse componente, ao modificar o CheckBox e clicar no Botão, poderá ver as respectivas mensagens no Console do Browser.

Argumentos

Alguns eventos permitem o uso de alguns tipos de argumentos. Como por exemplo, no evento onclick do button, podemos receber no método o argumento UIMouseEventArgs. Veja um exemplo na Figura 2.

Figura2: Exemplo de Argumentos de Evento

Nesse exemplo estamos imprimindo no console as coordenadas XY em pixels, do exato ponto onde o mouse foi clicado no botão. Faça um teste e veja o resultado como mostra a Figura 3.

Figura 3: Testando UIMouseEventArgs

Veja a lista dos argumentos suportados em eventos no Blazor:

• UIEventArgs
• UIChangeEventArgs
• UIKeyboardEventArgs
• UIMouseEventArgs

Expressões Lambda

Em vez de apontar o evento para um método, podemos usar expressões lambda que podem ser úteis em casos mais simples. Veja um exemplo na Figura 4.

Figura 4: Usando lambda no evento onclick

As expressões lambda podem ser úteis para passagem adicionais de parâmetros para os métodos. Um exemplo clássico é quando temos o botão dentro de uma lista, e precisamos passar por parâmetro algo que indique qual dos itens foi clicado.

Veja um exemplo na Figura 5.

Figura 5: Passagem de parâmetros adicionais nos eventos

Neste exemplo estamos criando 5 botões dinamicamente através de um comando for.

No evento onclick de cada botão, estamos chamando o método Clicou. Nesse método estamos recebendo como parâmetro, além do UIMouseEventArgs, o número que representa o botão dentro do for. Faça um teste e execute o exemplo. Você pode ver o resultado aqui na Figura 6.

Figura 6: Testando passagem de parâmetros adicionais nos eventos

Concluindo

Esses são os conceitos básicos que precisamos saber sobre os eventos no Blazor. Podemos trabalhar com eventos de forma mais avançada, criando nossos próprios eventos nos componentes. Vamos explorar esse tema em um outro artigo.

Grande Abraço e até o próximo!

Publicidade