Nesse artigo vamos explorar os recursos de JavaScript Interop que existem no Blazor, para que nossa aplicação possa, eventualmente, interagir com código JavaScript.
Para isso vamos utilizar uma aplicação de exemplo que pode ser criada pelo Visual Studio 2019 como mostra esse artigo, ou pelo VSCode como mostra esse outro artigo aqui.
Ainda precisamos de JavaScript no Blazor?
Espero um dia não precisar mais de código JavaScript. Mas, enquanto o Blazor ainda está evoluindo, certamente vão existir algumas funcionalidades que não vamos conseguir realizar apenas com C# no WebAssembly.
Sendo assim, para não ficarmos engessados, o Blazor nos oferece uma forma bem simples de interagir com código JavaScript. Vamos criar um exemplo de como fazer nossa aplicação Blazor conversar com funções JavaScript.
Preparando o Ambiente
Vamos criar um arquivo chamado funcoes.js e colocá-lo dentro da pasta wwwroot/js do nosso projeto. Como mostra a Figura 1, nesse arquivo criamos uma função chamada alerta, que está dentro de um objeto chamado myJsFunctions declarado na window.
Como você pode ver, essa função recebe uma string chamada mensagem, e exibe um simples alerta no browser contendo a mensagem.
Para que nossa aplicação possa conversar com essa função, basta adicionar uma referência a esse script, no arquivo index.html, como mostra a Figura 2.
IJSRuntime
Para conseguirmos fazer chamadas a funções JavaScript, precisamos usar o serviço IJSRuntime. Esse serviço é registrado automaticamente no Container de Injeção de Dependência do Blazor.
Para saber mais, leia esse artigo, onde eu explico como funciona a Injeção de Dependência no Blazor.
Vamos criar um novo componente em nossa aplicação de exemplo e injetar o serviço IJSRuntime, em uma propriedade chamada JSRuntime. Veja a Figura 3.
InvokeAsync<T>
Como a própria Figura 3 está mostrando, estamos usando o método InvokeAsync<T> para chamar a função alerta que declaramos no objeto myJsFunctions, lá no arquivo funcoes.js.
Veja que passamos como parâmetro para esse método o nome completo da função, e a string contendo a mensagem informada no input HTML.
O método InvokeAsync<T> pode receber quantos argumentos você quiser enviar, desde que todos sejam serializáveis em JSON. O tipo de retorno desse método é definido no tipo genérico T, que também precisa ser serializável em JSON.
Testando
Execute a sua aplicação e navegue ao componente que acabamos de criar: /interop. Como você pode ver na Figura 4, ao clicar no botão Exibir, um alerta do browser irá ser exibido com a mensagem informada no input.
Esse é um exemplo bem simples de como podemos fazer nossa aplicação Blazor se comunicar com código JavaScript.
Espero que cada vez menos isso seja necessário, e que num futuro próximo possamos criar uma aplicação sem precisar de uma única linha de código JavaScript. Mas, enquanto ainda for necessário, essa é a forma correta de fazer.
Grande Abraço e até o próximo!
Blaze of Code 
3 comentários em “JavaScript Interop no Blazor”