Взаимодействие с JavaScript

Редактировал(а) Alexandr Fokin 2023/01/01 20:14

Взаимодействие с JavaScript.

 Дополнение: со стороны c# рекомендую использовать типизированную обертку над IJSRuntime, инкапсулирующую вызов и предоставляющий публичный интерфейс с конкретными методами и параметрами. 
1)
Blazor component
->
page JS

 ASP.NET Core Blazor JavaScript interoperability (JS interop)
https://docs.microsoft.com/en-us/aspnet/core/blazor/javascript-interoperability/?view=aspnetcore-6.0

window.pageObject = {
  functions: {
    helloWorld: (name) => {
     return 'hello ' + name;
    }
}
}
[Inject]
private IJSRuntime JsProxy { set; get; }

var helloResult = await JS.InvokeAsync<string>("window.pageObject.functions.HelloWorld", nameVariable);
2) 
page JS
->
Blazor component

[Inject]
private IJSRuntime JsProxy { set; get; }

private async Task SetProxyToJs(){
 await JS.InvokeAsync<string?>(                
   "window.pageObject.Functions.init",                
    DotNetObjectReference.Create(this)                
    );
}

[JSInvokable]
private async Task<string> HelloMethodForJs(string name)
{
   return "Hello " + name;
}
window.pageObject = {
    data: {
        pageProxy: null
    },
    functions: {
        init: async (csharpProxy) => {
           window.pageObject.data.pageProxy = csharpProxy;
            await window.pageObject.data
              .pageProxy
              .invokeMethodAsync('HelloMethodForJs', 'testName');
        }
    }
}
Теги: