ASP .NET Core Blazor - Interoperabilidade c/JavaScript - III

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

Continuando o artigo anterior veremos agora como invocar código C# a partir do JavaScript no Blazor.

Invocando código C# a partir do JavaScript

Para chamar métodos C# a partir do JavaScript, o Blazor fornece o objeto window.DotNet no lado do cliente, que contém métodos para chamar funções C#.

Um exemplo de chamada de código C# é o uso de Promises no JavaScript. Uma Promise pode ser resolvida algum tempo após a chamada inicial  e você precisa saber o resultado.

Nota: Uma Promise é um objeto que representa a eventual conclusão ou falha de uma operação assincrona.

Existem duas opções para chamar o código C# :

  1. Invocar métodos estáticos;
  2. Invocar métodos de instância;

Invocando métodos C# estáticos

O método a ser chamado a partir do JavaScript deve atender os seguintes requisitos:

  1. O método deve ser estático;
  2. O método deve ser decorado com o atributo JsInvokable e fornecer um identificador para ser usado no lado do JavaScript;

Com base nisso o método C# apropriado que poderá ser chamado do lado do JavaScript deve possuir a seguinte assinatura:

@Code{
          [JSInvokable]
          public static void invokeFromJs(string input)
          {
               //Seu código aqui
          }
}

Ao chamar métodos estáticos, podemos usar DotNet.invokeMethod ou DotNet.invokeMethodAsync.

Assim como antes, você sempre deve usar a versão assíncrona sempre que possível, pois isso tornará o código compatível com os cenários de cliente e servidor.

Vamos usar o mesmo projeto criado no artigo anterior chamado BlazorApp2.

Vamos começar criando uma classe C# na raiz do projeto chamada Mensagem.cs com o código a seguir:

using Microsoft.JSInterop;
using System.Threading.Tasks;
namespace BlazorApp2
{
    public static class Mensagem
    {
        [JSInvokable]
        public static Task GetMensagemBoasVindas()
        {
            var mensagem = "O programa C# diz: 'Bem-Vindo Blazor'";
            return Task.FromResult(mensagem);
        }
    }

 

Vamos invocar o método GetMensagemBoasVindas da classe Mensagem. Para chamar métodos estáticos eles devem ser públicos e precisam estar decorados com o atributo [JSInvoke].

Agora vamos criar o arquivo JavaScript jsexemplo3.js na pasta wwwroot do projeto:

(function () {
    window.EscreveMensagemNoConsole = () => {
        DotNet.invokeMethodAsync('BlazorApp2', 'GetMensagemBoasVindas')
            .then(mensagem => {
                console.log(mensagem);
            });
    };
})();

Neste código JavaScript estamos usando a função  DotNet.invokeMethodAsync fornecida pelo Blazor com dois argumentos:

  1. O primeiro argumento é o nome do Assembly que contém o método que queremos chamar;
  2. O segundo argumento é o nome do método que vamos chamar;

Como a chamada é assíncrona, ela retorna uma promessa, quando a promessa é resolvida, pegamos a mensagem, que vem do nosso código C#, e a registramos no console.

Não podemos esquecer de registrar o arquivo JavaScript 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="jsexemplo3.js"></script>

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>BlazorApp2</title>
    <base href="/" />
    <link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" />
    <link href="css/site.css" rel="stylesheet" />
</head>
<body>
    <app>Loading...</app>
    <script src="_framework/blazor.webassembly.js"></script>
    <!--<script src="jsexemplo.js"></script>
    <script src="jsexemplo2.js"></script>-->
    <script src="jsexemplo3.js"></script>
</body>
</html>

Agora vamos usar o mesmo componente JSInterop.razor, criado no artigo anterior, na pasta Pages e incluir  o código abaixo neste arquivo:

...
<br />
<button @onclick="EscreverNoConsole">Invocando Código C#</button>
@code {
         private async Task EscreverNoConsole()
         {
            await JSRuntime.InvokeAsync<object>("EscreveMensagemNoConsole");
         }
...

Neste código, definimos um Button em cujo evento onclick estamos chamando a função JavaScript EscreverNoConsole() que vai invocar a função JavaScript EscreveMensagemNoConsole que vai chamar o método C# GetMensagemBoasVindas().

Como estamos usando o mesmo componente o link já esta preparado no arquivo NavMenu.razor.

Pronto ! Agora é só alegria...

Executando o projeto vamos obter o seguinte:

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


Referências:

José Carlos Macoratti