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

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

Continuando o artigo anterior veremos agora como invocar uma função JavaScript usando parâmetros.

Invocando funções JavaScript com parâmetros

Vamos continuar usando o mesmo projeto criado no artigo anterior.

Iniciamos criando um arquivo JavaScript chamado jsexemplo2.js na pasta wwwroot do projeto com o código mostrado abaixo:

Este código JavaScript vai abrir um prompt para o usuário digitar o seu nome

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="jsexemplo2.js"></script>

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

...
<br />
<div>
    <button type="button" class="btn btn-primary"  @onclick="SeuNome">
       Diga meu nome
    </button>
    <br />
    <p>@seuNome</p>
</div>
@code {
        string seuNome = "";
        public async void SeuNome()
        {
            var NomeJavaScript = 
                await JSRuntime.InvokeAsync<string>(
                    "exemplo2JsFunctions.mostraPrompt", 
                    "Qual o seu nome ?"
                    );
            seuNome = $"Seu nome é : {NomeJavaScript}";
            // Devemos chamar StateHasChanged() pois o Blazor 
            // não sabe atualizar a página
            // pois ela foi atualizada via JavaScript
            StateHasChanged();
        }
...

Ao final o código completo do arquivo JSInterop.razor deve ficar assim:

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:

Na outra parte do artigo veremos como código C# a partir do JavaScript.

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


Referências:


José Carlos Macoratti