Исходный код вики Взаимодействие с JavaScript

Редактировал(а) Alexandr Fokin 2023/01/01 20:14
Последние авторы
1 ==== Взаимодействие с [[JavaScript>>doc:Разработка.Frontend.JavaScript.WebHome]]. ====
2
3
4 (% border="1" %)
5 |(% style="width:99px" %) |(% style="width:1394px" %)Дополнение: со стороны c# рекомендую использовать типизированную обертку над IJSRuntime, инкапсулирующую вызов и предоставляющий публичный интерфейс с конкретными методами и параметрами.
6 |(% style="width:99px" %)1)
7 Blazor component
8 ->
9 page JS|(% style="width:1394px" %)(((
10 ASP.NET Core Blazor JavaScript interoperability (JS interop)
11 [[https:~~/~~/docs.microsoft.com/en-us/aspnet/core/blazor/javascript-interoperability/?view=aspnetcore-6.0>>url:https://docs.microsoft.com/en-us/aspnet/core/blazor/javascript-interoperability/?view=aspnetcore-6.0]]
12
13
14 {{code language="js"}}
15 window.pageObject = {
16 functions: {
17 helloWorld: (name) => {
18 return 'hello ' + name;
19 }
20 }
21 }
22 {{/code}}
23
24 {{code language="c#"}}
25 [Inject]
26 private IJSRuntime JsProxy { set; get; }
27
28 var helloResult = await JS.InvokeAsync<string>("window.pageObject.functions.HelloWorld", nameVariable);
29 {{/code}}
30 )))
31 |(% style="width:99px" %)2) 
32 page JS
33 ->
34 Blazor component|(% style="width:1394px" %)(((
35 (% id="cke_bm_925S" style="display:none" %)
36
37 {{code language="c#"}}
38 [Inject]
39 private IJSRuntime JsProxy { set; get; }
40
41 private async Task SetProxyToJs(){
42 await JS.InvokeAsync<string?>(
43 "window.pageObject.Functions.init",
44 DotNetObjectReference.Create(this)
45 );
46 }
47
48 [JSInvokable]
49 private async Task<string> HelloMethodForJs(string name)
50 {
51 return "Hello " + name;
52 }
53 {{/code}}
54
55 {{code language="js"}}
56 window.pageObject = {
57 data: {
58 pageProxy: null
59 },
60 functions: {
61 init: async (csharpProxy) => {
62 window.pageObject.data.pageProxy = csharpProxy;
63 await window.pageObject.data
64 .pageProxy
65 .invokeMethodAsync('HelloMethodForJs', 'testName');
66 }
67 }
68 }
69 {{/code}}
70 )))