Blazor - Interoperabilidade com Javascript

Bruno Brito -

De acordo com a especificação do WebAssembly não é possível manipular o DOM. No entanto é possível fazer interoperabilidade entre o wasm e o JS. Desta forma você consegue controlar o DOM.

Neste tutorial será construído uma aplicação que demonstra como fazer essa comunicação entre o Blazor e o javascript.

O projeto

A interoperabilidade do Blazor com Javascript será demonstrado através de um projeto com cotações de moedas virtuais. Com uma função javascript para gerar PDF com o JSPdf.

Se você ainda não sabe nada sobre o Blazor, veja este post: Blazor - Primeiros passos

Veja o resultado final ao fim deste tutorial.

Pré-Requisitos


  • Visual Studio 2017 v15.7 ou mais atual - Download
  • .Net Framework 2.1 Preview 2 - Download
  • Extensão do Visual Studio - Download

Após todos instalados é possível seguir com o tutorial!

Pegue seu bloco de notas, não esqueça a caneta e SHOW ME THE CODE!

Crie um projeto Blazor (File > New > Project > .NET Core > ASP.NET Core Web Application > Blazor (ASP.NET Core Hosted)).

Três projetos serão criados:

  • Client
    • Este é a parte Web, que será renderizado no Browser.
  • Server
    • Será o Server Side, aqui ficará o domínio da aplicação.
  • Shared
    • Todo código que estiver aqui será acessível tanto do Server quanto do Web. Um bom lugar para colocar ViewModels e DTO's. Para manter a complexidade baixa, neste exemplo será neste projeto que será colocado as Models.

Projeto Shared

Crie um arquivo chamado MoedasViewModel.cs e cole o conteúdo nele

Estas classes são utilizadas para efetuar o mapeamento da chamada Rest da api de cotação. A classe MoedaViewModel será utilizado pela aplicação Razor

Projeto Server

Adicione a referência do NewtonSoft.Json ao projeto Server. Pressione o botão direito no projeto e em seguida vá até a opção Manage Nuget Packages. Procure por NewtonSoft.Json e instale.

Neste projeto adicione uma Controller chamada CotacaoController e cole o código

O único método é responsável por chamar uma api Rest com cotações de moedas virtuais.

Projeto Client

Abra o arquivo wwwroot/index.html e cole o conteúdo:

Na página foi adicionado referências ao JQuery, JSPdf e uma biblioteca JS que será criada nos passos seguintes.

A biblioteca de interop deve estar obrigatoriamente abaixo do

<script type="blazor-boot"></script>

Senão ocorrerá um erro de javascript.

Como esse arquivo ainda não existe, crie uma pasta chamada js dentro de wwwroot e adicione um arquivo chamado interop.js (wwwroot > Botao Direito > Add > New Item).

A estrutura de pastas ficará igual a imagem:

Agora adicione uma nova Razor Page chamado Moedas.cshtml. (Solution Explorer > Pages > Botão direito > Add > New Item).

Dois arquivos são criados. Moedas.cshtml é o arquivo que contém o HTML da página. Moedas.cshtml.cs contém o código c# para as regras de negócio, equivalente ao js da página.

Abra o aquivo Moedas.cshtml e cole esse conteúdo.

Ele contém toda estrutura necessária para este exemplo.

Executando um método JS através do C#

Para executar um método Javascript através do BlazorComponent abra o arquivo Moedas.cshtml.cs e cole o conteúdo

Assim que a pagina for iniciada, será efetuado uma chamada a api de cotação, populando o modelo inicial. O método CallJSMethod executa uma função javascript. Essa função será definido a seguir.

Agora será necessário criar o método GerarPDF. Abra o arquivo wwwroot/js/interop.js e cole este conteúdo:

Observações importantes

Devido a fase beta ainda do Blazor, não é possível abrir uma tag <script>...</script> dentro do arquivo .cshtml, o compilador vai acusar um erro, por este mótivo o conteúdo está num arquivo separado.

Executando um método C# a partir do JS

Para fazer o caminho contrário, estas premissas devem ser respeitadas:

  • O método deve ser static.
  • Não pode ser método genérico.
  • O método não pode ter overloads.
  • Precisa de tipos concretos e serializáveis.

Abra o arquivo Moedas.cshtml.cs e cole este conteúdo:

Dois novos métodos foram adicionados ExecutarRotinaCSharp e OnAfterRender.

Como a pilha de execução do Blazor difere do DOM, não é possível identificar o quando o conteúdo está carregado ainda. Por isso o método OnAfterRender vai informar o Javascript quando isso ocorreu e assim dar bootstrap na app. (Inclusive criei uma Issue no GitHub sobre isso).

Abra novamente o arquivo wwwroot/js/interop.js e cole este conteúdo:

O método faz alguns controles para saber se o DOM está ready e então mapea o click do botão para fazer uma chamada ao C# a partir do JS.

Por fim altere o NavMenu.cshtml com o conteúdo abaixo

Resultado final

Download

O código do projeto está disponivel no meu GitHub

Referências