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.
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)
ASP .NET Core - Iniciando com o Blazor
ASP .NET Core - CRUD usando Blazor e Entity ..
Blazor - O novo framework SPA da Microsoft
Visual Studio Code - Suporte ao desenvolvimento Blazor