那个网站ppt做的比较好,微信网站入口,网站建设 八羊,两学一做专栏网站BlazorServer中C#与JavaScript的相互调用
前言#xff1a;
虽然BlazorServer中推荐使用C#在razor页面中的替代JavaScript来完成逻辑的编写#xff0c;但当需要使用第三方的javascript文件/组件里的内容时#xff0c;则难免要在C#中调用其方法或对象。反之当你的(用到第…BlazorServer中C#与JavaScript的相互调用
前言
虽然BlazorServer中推荐使用C#在razor页面中的替代JavaScript来完成逻辑的编写但当需要使用第三方的javascript文件/组件里的内容时则难免要在C#中调用其方法或对象。反之当你的(用到第三方组件的)Javascript代码想要和后台交互时则需要调用C#的代码。好在BlazorServer中这两种通信都是支持的。下面将介绍其具体的实现方式。
一.C#调用JavaScript方法 Blazor提供了IJSRuntime组件来提供与JavaScript的交互。 BlazorServer启动时就已经创建了IJSRuntime的实例,所以你可以直接使用构造方法注入
public class CustomService
{private readonly IJSRuntime _runtime;public CustomService(IJSRuntime runtime){_runtime runtime;}
}在razor页面组件中也是直接获取即可
page /mytest!--直接使用inject标签获取即可--
inject IJSRuntime runtime h3MyTest/h3
1.调取公用函数
page /mytest!--直接使用inject标签获取即可--
inject IJSRuntime runtime h3MyTest/h3button typebutton onclickDoNothing点击/buttoncode {public void DoNothing(){await runtime.InvokeVoidAsync(alert,new object[1] { FUCKYOU }); //无返回值//runtime.InvokeAsync(); 有返回值}
}测试结果 2.调取外部JavaScript函数
上面的只单独调用公共函数的时候不多大多数时候需要从别的地方获取。调用方法如下
现有一自定义js文件如下TestScript.js
function WhatTheHell() {alert(WTF);
}function WhatTheHell_2() {alert(这次有返回值);return 123
}function WhatTheHell_3(param) {alert(有返回值及参数);console.log(JSON.stringify(param));return 10086
}先将其放到BlazorServer的js文件指定目录下wwwroot/js/ 再在_Host.cshtml中引入该js文件 在razor页面中使用
page /mytestinject IJSRuntime runtime h3MyTest/h3button typebutton onclickMethodOne方法一(无返回值和参数)/button br/
button typebutton onclickMethodTwo方法二(无返回值)/button br/
button typebutton onclickMethodThree方法三(返回值和参数)/button br/code {public async void MethodOne(){await runtime.InvokeVoidAsync(WhatTheHell,null);}public async void MethodTwo(){var num await runtime.InvokeAsyncint(WhatTheHell_2,null);Console.WriteLine(获取js的返回值为 num);}public async void MethodThree(){var num await runtime.InvokeAsyncint(WhatTheHell_3, new object[1] { 尼哥 });Console.WriteLine(获取js的返回值为 num);}}测试结果为 当JS的返回值为复杂对象时则推荐使用IJSObjectReference来获取,具体可以参考
IJSObjectReference 接口 (Microsoft.JSInterop) | Microsoft Learn 二.JavaScript调用C#方法
在JavaScript中调用C#的方法则比较复杂需要考虑到静态/动态区分的问题
1.静态方法的调用
DotNet.invokeMethodAsync(AssemblyName, Namespace.ClassName, MethodName, arg1, arg2);这将调用指定程序集AssemblyName、命名空间Namespace[可以省略]和类名ClassName中的静态方法MethodName并传递arg1和arg2作为参数。 例
page /jstestinject IJSRuntime runtimeh3Jsusecsharp/h3span stylefont-size:36px到达世界最高城 Title/spanbutton typebutton onclickChange前往朝圣/buttoncode {public static string Title 沈阳; public async void Change(){await runtime.InvokeVoidAsync(use_csharp,null);}[JSInvokable]public static void ChangeTheTitle(){Title 理塘;}
}js文件
async function use_csharp() {await DotNet.invokeMethodAsync(BlazorApp2,ChangeTheTitle, null);
}测试结果 ✈️ 2…动态方法的调用
下面是微软文档的内容
若要从 JavaScript (JS) 调用实例 .NET 方法请执行以下操作 通过将实例包装在 DotNetObjectReference 中并对其调用 Create将 .NET 实例通过引用传递给 JS。 使用传递的 DotNetObjectReference 中的 invokeMethodAsync推荐或 invokeMethod仅限 Blazor WebAssembly从 JS 调用 .NET 实例方法。 传入实例 .NET 方法的标识符以及任意自变量。 在从 JS 调用其他 .NET 方法时也可以将 .NET 实例作为参数传递。 如下示例中 dotNetHelper 为 DotNetObjectReference。{.NET METHOD ID} 占位符是 .NET 方法标识符。{ARGUMENTS} 占位符是要传递给该方法的以逗号分隔的可选参数其中每个参数都必须是可执行 JSON 序列化的。
⛵️ 总结:
动态方法的调用需要传递实例使用DotNetObjectReference对象需要在方法中设置实例参数再由实例进行invoke操作。
例
page /jstest
using BlazorApp2.Utilsinject IJSRuntime runtimeh3Jsusecsharp/h3span stylefont-size:36px到达世界最高城 Title/spanbutton typebutton onclickChange前往朝圣/buttoncode {public static string Title 沈阳;//用于传递给JS的实例private DotNetObjectReferenceJsusecsharp objref;protected override void OnInitialized(){objref DotNetObjectReference.Create(this);}public async void Change(){//将实例作为参数传给调用的JSawait runtime.InvokeVoidAsync(use_csharp_dy,objref);}/// summary/// 静态方法/// /summary[JSInvokable]public static void ChangeTheTitle(){Title 理塘;}[JSInvokable(ChangeTheTitle_2)]public void ChangeTheTitle_2(){Title 通辽;}}JS
async function use_csharp_dy(instance) {//instance 即为razor中的objref,由其进行调用await instance.invokeMethodAsync(ChangeTheTitle_2, null);}参数结果 未完。。。。。
