Исходный код вики Взаимодействие с JavaScript
Редактировал(а) Alexandr Fokin 2023/01/01 20:14
Последние авторы
| author | version | line-number | content |
|---|---|---|---|
| 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 | ))) |