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.

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.

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.

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.

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.


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.

Espero que esse artigo tenha sido útil. Grande Abraço e até o próximo!
Um comentário em “EventCallback no Blazor”