JavaScript Interop no Blazor

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.

Figura 1: Função alerta para exibir mensagem de notificação

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.

Figura 2: Adicionando referência ao arquivo funcoes.js no index.html

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.

Figura 3: Injetando usando o IJSRuntime

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.

Figura 4: Disparando Alerta através do JavaScript Interop do Blazor

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!

3 comentários em “JavaScript Interop 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