Manipulando o DOM com WebAssembly e Blazor? Infelizmente, não.

Começando o dia com uma notícia: WebAssembly não pode mexer no DOM sozinho. Mas com uma ajudinha do JavaScript, rola sim uma integração. Vamos criar uma aplicação que mostra essa parceria entre Blazor e JavaScript.

O projeto

moedasVirtual

Interação entre Blazor e JavaScript? É útil principalmente em projetos que lidam com preços de criptomoedas e usam um script JavaScript para gerar PDF com o JSPdf. Se você não conhece o Blazor, dá uma olhada aqui: Blazor - Primeiros passos.

Pré-Requisitos

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

Projeto Shared

Crie o arquivo MoedasViewModel.cs para mapear chamadas REST para a API de cotações.

Projeto Server

Adicione o NewtonSoft.Json ao projeto Server. Depois, crie a CotacaoController para chamar a API Rest de cotações de criptomoedas.

Projeto Client

Atualize o arquivo wwwroot/index.html para incluir referências ao JQuery e ao JSPdf. Coloque a biblioteca de interop depois do

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

Crie uma pasta js dentro de wwwroot e adicione o arquivo interop.js. Crie uma página Razor chamada Moedas.cshtml.

Executar um método JS com C#

Adicione o necessário em Moedas.cshtml.cs para a página pedir cotações e o método CallJSMethod rodar uma função JavaScript.

Adicione um método para gerar PDF no wwwroot/js/interop.js.

Executar um método C# com JS

Certifique-se de que os métodos C# chamados pelo JS são estáticos e sem sobrecarga. Atualize Moedas.cshtml.cs e inclua os métodos ExecutarRotinaCSharp e OnAfterRender.

No wwwroot/js/interop.js, adicione o código para saber quando o DOM está pronto e mapeie um clique de botão para chamar o C#.

Mude o NavMenu.cshtml se precisar.

Resultado final

Download

clippy_octocat

O código está disponível no GitHub.

Referências