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
<h3>MyTest</h3>
1.调取公用函数
page "/mytest"
<!--直接使用@inject标签获取即可-->
@inject IJSRuntime runtime
<h3>MyTest</h3>
<button type="button" @onclick="DoNothing">点击</button>
@code {
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 "/mytest"
@inject IJSRuntime runtime
<h3>MyTest</h3>
<button type="button" @onclick="MethodOne">方法一(无返回值和参数)</button> <br/>
<button type="button" @onclick="MethodTwo">方法二(无返回值)</button> <br/>
<button type="button" @onclick="MethodThree">方法三(返回值和参数)</button> <br/>
@code {
public async void MethodOne()
{
await runtime.InvokeVoidAsync("WhatTheHell",null);
}
public async void MethodTwo()
{
var num = await runtime.InvokeAsync<int>("WhatTheHell_2",null);
Console.WriteLine("获取js的返回值为" + num);
}
public async void MethodThree()
{
var num = await runtime.InvokeAsync<int>("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 "/jstest"
@inject IJSRuntime runtime
<h3>Jsusecsharp</h3>
<span style="font-size:36px">到达世界最高城 @Title</span>
<button type="button" @onclick="Change">前往朝圣</button>
@code {
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.Utils
@inject IJSRuntime runtime
<h3>Jsusecsharp</h3>
<span style="font-size:36px">到达世界最高城 @Title</span>
<button type="button" @onclick="Change">前往朝圣</button>
@code {
public static string Title = "沈阳!";
//用于传递给JS的实例
private DotNetObjectReference<Jsusecsharp> objref;
protected override void OnInitialized()
{
objref = DotNetObjectReference.Create(this);
}
public async void Change()
{
//将实例作为参数传给调用的JS
await 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);
}
参数结果:
文章来源:https://www.toymoban.com/news/detail-676571.html
未完。。。。。文章来源地址https://www.toymoban.com/news/detail-676571.html
到了这里,关于BlazorServer中C#与JavaScript的相互调用的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!