ASP .NET Core Blazor - Interoperabilidade com JavaScript

ASP .NET Core Blazor - Interoperabilidade com JavaScript - I

Neste artigo vamos abordar a interoperabilidade do ASP .NET Core Blazor com JavaScript.

O Blazor surgiu timidamente como um preview e agora já é um projeto oficial, ou seja, ele amadurece a cada dia.

Nota: Responda a enquete : Que tal aprender Blazor ?

Será o fim do JavaScript ?

Embora o Blazor possa ser considerado uma evolução para a tecnologia Web, ele precisa do JavaScript para usar recursos da Web que não podem ser alcançados pelo Blazor neste momento (ainda...). Para fazer isso, a equipe do Blazor forneceu suporte à JavaScript Interop que nos permitirá usar as funções JavaScript do C# e vice-versa.

Assim, uma aplicação Blazor pode chamar funções JavaScript a partir dos métodos C#, e também podemos invocar métodos C# a partir do JavaScript.

Invocando funções JavaScript a partir de métodos C#

Para chamar código JavaScript a partir do código C#, devemos usar a abstração IJSRuntime. Essa abstração define dois métodos:


   Task<T> InvokeAsync<T>(string identifier, params object[] args);

   void UntrackObjectRef(DotNetObjectRef dotNetObjectRef);

O método InvokeAsync<T> utiliza um identificador para a função JavaScript que você deseja chamar, juntamente com qualquer número de argumentos serializáveis em JSON. O identificador da função é relativo ao escopo global (janela).

Se você deseja chamar window.someScope.someFunction, o identificador é someScope.someFunction. Não é necessário registrar a função antes de ser chamada. O tipo de retorno T também deve ser JSON serializável.

O código de exemplo usado neste artigo foi criado conforme descrito no artigo: Criando uma aplicação ASP .NET Core Blazor (client side).

Com o projeto criado conforme mostrado no link citado, vamos iniciar criando um arquivo JavaScript chamado jsexemplo.js na pasta wwwroot do projeto com o código mostrado abaixo:

Este código JavaScript apenas abre uma janela de alerta e exibe a mensagem 'Ola, Blazor'.

Para permitir que esse JavaScript seja chamado, ele precisa ser registrado na página HTML principal do projeto.

Como nosso projeto é um projeto Client Side vamos usar o arquivo Index.html da pasta wwwroot e incluir o código que referencia nosso arquivo JS : <script src="jsexemplo.js"></script>

Agora vamos incluir um componente chamado JSInterop.razor na pasta Pages e definir o código abaixo neste arquivo:

Neste código, após definir a rota do componente, injetamos a abstração IJSRuntime para dar suporte ao JavaScript Interop, e, depois definimos um Button em cujo evento onclick estamos chamando a função JavaScript OlaMundo().

Vamos agora incluir um link no menu para exibir este componente. Para isso abra o arquivo NavMenu.razor na pasta Shared e inclua o código conforme mostrado abaixo:

Pronto ! Agora é só alegria...

Executando o projeto vamos obter o seguinte:

Na outra parte do artigo veremos como invocar JavaScript a partir do Blazor usando parâmetros.

Pegue o projeto aqui : BlazorApp2.zip (sem as referências)

"Bom é louvar ao SENHOR, e cantar louvores ao teu nome, ó Altíssimo;
Para de manhã anunciar a tua benignidade, e todas as noites a tua fidelidade;"
Salmos 92:1,2

Referências:

José Carlos Macoratti