Blazor入门笔记(3)-C#与JS交互

1.环境

VS2019 16.5.1

.NET Core SDK 3.1.200

Blazor WebAssembly Templates 3.2.0-preview2.20160.5

2.前言

Blazor的存在可以让我们再前端以高性能运行代码,但是有些时候我们不得不需要使用JS来进行一些操作,尤其是在使用第三方JS库的时候,而在JS执行完毕后,可能还需要JS通知C#执行的结果,这时候就需要使用C#调用JS或者是JS调用C#。

3.C#调用JS 

3.1.函数定义

C#调用JS是通过IJSRuntime来实现的。IJSRuntime定义了两个方法(当然,这两个方法都有重载,但是这两个方法是常见的):

ValueTask<TValue> InvokeAsync<TValue>(string identifier, object[] args);
ValueTask InvokeVoidAsync<TValue>(string identifier, object[] args);

InvokeAsync和InvokeVoidAsync的定义类似,形参identifier代表要执行的js函数名(要求必须挂载在window对象上),可以为JSON格式的标识,args则是js函数所需要的参数。其中,InvokeAsync用于执行有返回值的js函数,InvokeVoidAsync用于执行无返回值的js函数,这是两者的区别。

我们可以看到,IJSRuntime中的这两个函数都是异步函数,这是因为如果Blazor是服务端渲染的格式,其使用SignalR进行交互,JS互操作调用都必须是异步的。如果我们希望在WebAssembly应用程序(客户端渲染)下同步调用js函数,则可以将IJSRuntime对象转换为IJSInProcessRuntime对象,IJSInProcessRuntime对象中定义了一个同步方法Invoke,其形参与上述的两个相同。

T Invoke<T>(string identifier, params object[] args)

注意:IJSRuntime在Server与Client渲染模式中都可以使用,IJSInProcessRuntime只可在Client渲染模式中使用。

3.2.IJSRuntime的注入

如果我们直接在razor组件中使用IJSRuntime对象,则可以通过@inject指令将IJSRuntime对象注入到组件中;如果我们需要在类中调用IJSRuntime对象,则需要使用Inject属性注解进行注入:

//组件中注入
@inject IJSRuntime JsRuntime
//类中注入
[Inject]
public IJSRuntime JsRuntime { get; set; }

3.3.使用

新建一个Blazor WebAssembly应用程序,打开Index.razor页面,在路由属性下插入以下代码:

@inject IJSRuntime JsRuntime
<div class="jumbotron bg-white border border-primary">
    <h5>C#与JS互操作</h5>
    <div>
        <button @onclick="OnClick" class="btn btn-primary">交互</button>
    </div>
</div>

在这里定义了一个button,并为它添加了onclick事件,注意我们在为HTML的原生事件添加绑定时,需要在事件前添加“@”符号。接下来,我们实现OnClick事件响应函数。OnClick函数的返回结果可以是Task,也可以为void,此外,还可以有一个事件参数(像js中定义事件函数一样,可以不用写e)。OnClick的定义如下:

private async Task OnClick(MouseEventArgs e)
{
    Console.WriteLine("OnClick is executing");
    var name = "world";
    var a = 11;
    var b = 22;
    var jsRunResult = await JsRuntime.InvokeAsync<string>("interop.runJs", name, a, b);
    Console.WriteLine($"interop.runJs return:{jsRunResult}");
}

在OnClick中使用JsRuntime调用了一个js函数runJs。runJs可以通过window.interop.runJs被调用。interop.runJs的定义如下(为了区分C# Console.WriteLine的输出,这里使用console.warn,使两者具备不同的背景色):

window.interop = {
    runJs: (name, a, b) => {
        console.warn("runJs is executing");
        console.warn("hello " + name);
        return "OK " + (a + b); 
    }
}

点击“交互”按钮,浏览器中控制台的输出结果如下(WASM: 是C#Console.WriteLine默认输出的前缀):

4.JS调用C#

从JS调用C#有两种方式,一种是调用静态方法,另外一种是调用实例方法,无论那种方式,C#中能被JS调用的函数都需要标注JSInvokable属性注解。

4.1.静态方法的调用

4.1.1.介绍

静态方法的调用是通过DotNet.invokeMethod或DotNet.invokeMethodAsync来实现的:

DotNet.invokeMethod("程序集的名称", "静态方法名称",参数1,…,参数n);

DotNet.invokeMethodAsync定义与DotNet.invokeMethod定义相似,两者区别在于DotNet.invokeMethodAsync的返回值为Promise,DotNet.invokeMethod结果就是函数的返回值。

4.1.2.实例

首先,我们在Index页面中定义一个静态函数Sum:

[JSInvokable]
public static Task<int> Sum(int a, int b)
{
    Console.WriteLine("Sum is executing");
    return Task.FromResult(a + b);
}

Sum的作用就是将用于替换runJs中放入求和。

然后我们添加一个runCsharp JS函数,并修改runJs的返回值为”return "OK " + runCsharp(a, b);“。runCsharp的定义如下:

const runCsharp = (a, b) => {
    console.warn("runCsharp is executing");
    //invokeResult是Task序列化的结果
    let invokeResult = DotNet.invokeMethod("BlazorInterop", "Sum", a, b);
    if (invokeResult.isCompletedSuccessfully) {
        return invokeResult.result;
    }
    return -1;
};

点击“交互”按钮,浏览器中控制台的输出结果如下:

注意:由于Sum的返回值为Task,因此其返回结果invokeResult是Task的序列化结果,通过DotNet.invokeMethodAsync(…).then(result=>)得到的result则是求和的结果。

4.2.实例方法的调用

4.2.1. 介绍 

实例方法顾名思义,是指利用组件的实例调用方法,因此需要先将要执行的函数所在类的实例(可以不是组件)传递到JS中。这个实例并不是单纯的new的结果,而是使用DotNetObjectReference对new进行封装的结果:

//组件实例封装:
DotNetObjectReference.Create(this)
//类实例封装:
var classInstance = new SomClass();
DotNetObjectReference.Create(classInstance)

4.2.2.实例 

首先,在Index页面中定义一个新的button,并为这个button绑定事件方法OnClick2:

<button @onclick="OnClick2" class="btn btn-primary">交互2</button>

OnClick2的定义如下:

private void OnClick2()
{
    IJSInProcessRuntime SyncJsRuntime = JsRuntime as IJSInProcessRuntime;
    var a = 11;
    var b = 22;
    var jsRunResult = SyncJsRuntime.Invoke<string>("interop.runJs2",DotNetObjectReference.Create(this),a, b);
    Console.WriteLine($"interop.runJs2 return:{jsRunResult}");
}

OnClick2中使用IJSInProcessRuntime同步调用了一个JS函数runJs2:

runJs2: (objInstance, a, b) => {
    let invokeResult = objInstance.invokeMethod("Multiply", a, b);
    console.warn(invokeResult);
    return "OK:" + invokeResult;
}

runJs2有三个参数:对象实例、a、b,然后通过对象实例调用了Index组件中的一个Multiply函数对a、b进行求积。Multiply函数定义如下:

[JSInvokable]
public int Multiply(int a, int b)
{
    Console.WriteLine("Multiply is executing");
    return a * b;
}

点击“交互2”按钮,浏览器中控制台的输出结果如下:

代码:https://github.com/zxyao145/LearningBlazor/tree/master/BlazorInterop

本文参考:

从ASP.NET Core Blazor中的.NET方法调用JavaScript函数

从ASP.NET Core Blazor中的JavaScript函数调用.NET方法

posted @ 2020-04-05 17:48  半野  阅读(3780)  评论(0编辑  收藏  举报