EventCallback no Blazor

Nós já abordamos como funciona o sistema de eventos no Blazor, nesse artigo aqui. Agora vamos complementar esse tema, falando sobre o EventCallback.

O que é

O EventCallback é uma forma de definirmos eventos nos nossos componentes, para serem consumidos por quem vai usar o componente.

Um cenário muito comum é quando temos dois componentes aninhados, e precisamos executar algum código do componente pai, quando um evento ocorre no componente filho.

Para exemplificar isso, vamos criar um componente chamado TestEventCallback.razor, onde iremos expor um EventCallback como um parâmetro, que será disparado quando o usuário clicar no botão.

Veja a Figura 1.

Figura 1: Componente TesteEventCallback

Veja que nesse exemplo o evento onclick do button está apontando para o EventCallback chamado OnClick. O EventCallback precisa ser declarado como um Parameter para que possamos utilizá-lo no componente pai.

Usando um EventCallback

Vamos utilizar o componente Index.razor como Componente Pai deste exemplo. Como você pode ver na Figura 2, basta apontar o evento OnClick do componente Filho à um método qualquer do componente Pai.

Figura 2: Usando Evento de Componente Filho num Componente Pai

Veja que no Index temos a propriedade Mensagem, que inicialmente apresenta no título da página a mensagem “Olá Mundo”.

Se o usuário clicar no botão do componente filho, o EventCallback será executado, disparando o método ExibirMensagem que foi configurado no componente Pai.

Execute o exemplo e faça um teste. Veja que a mensagem do título da página é alterada, como mostra a Figura 3.

Figura 3: Testando o EventCallback

Lambda

Podemos utilizar um EventCallback como um evento qualquer. É possível, por exemplo, trabalhar com métodos assíncronos, ou mesmo utilizar expressões lambda como delegate para o EventCallback.

Veja na Figura 4, como podemos simplificar o uso do EventCallback no Index, com uma expressão lambda.

Figura 4: Usando uma expressão lambda no EventCallback

InvokeAsync

Um EventCallback pode ser disparado programaticamente via C#, através do método InvokeAsync. Isso é útil quando temos, por exemplo, que executar uma tarefa de longa duração, e ao final precisamos disparar um evento para avisar o componente pai.

Imagine então, que lá no TestEventCallback.razor, em vez do evento onclick do botão apontar diretamente para o EventCallback, esse evento aponte para um método do próprio componente Filho, chamado Calcular. Veja nas Figuras 5 e 6.

Figura 5: HTML do Componente alterado para Tarefa de longa duração
Figura 6: Simulando Tarefa de Longa duração com Evento disparado no Final

Veja que o método Calcular está simulando uma tarefa de longa duração através do Task.Delay(500), que será executado 5 vezes dentro de um for.

A cada iteração do for, estamos atualizando a string Indicador, para o usuário acompanhar o progresso.

Atenção! Até a versão atual do Blazor (preview 5), para que o Indicador seja atualizado a cada iteração do for, foi necessário chamar o método StateHasChanged do componente, para forçar uma atualização da interface.

Quando o for é finalizado, estamos disparando o EventCallback OnClick, através do método InvokeAsync. Isso fará com que o método lá do componente Pai (Index) seja executado.

Execute o seu exemplo e veja o resultado na Figura 7.

Figura 7: Testando Tarefa de Longa Duração

Espero que esse artigo tenha sido útil. Grande Abraço e até o próximo!

Um comentário em “EventCallback no Blazor

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair /  Alterar )

Foto do Google

Você está comentando utilizando sua conta Google. Sair /  Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair /  Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair /  Alterar )

Conectando a %s