Blazor学习之旅(12)JavaScript与Blazor的互操作

Edison Zhou

发布于 2023-12-29 09:25:50

2290

发布于 2023-12-29 09:25:50

文章被收录于专栏：EdisonTalkEdisonTalk

大家好，我是Edison。

在上一篇我们学习了Blazor+SignalR开发简单的实时应用程序，这一篇我们了解下Blazor和JavaScript的互操作性。

有了Blazor还需要JavaScript？

我们都知道，在Blazor中我们可以轻松地使用C#组件而不是JavaScript来创建Web应用程序，但是，这并不代表我们不能继续使用JavaScript提供的便利。很

多时候，我们可能希望继续使用JavaScript提供的函数来实现某些功能，这时，我们可以用Blazor和JavaScript的互操作性（也称为JS互操作）来调用Blazor应用中的JavaScript库，并从C#代码直接调用JavaScript函数。当然，也可以使用JS互操作性从JavaScript函数调用C#方法。

这种场景经常发生在：有时候需要使用现有的JavaScript库，例如一些开源JavaScript库以专门的方式呈现组件和处理用户界面元素，又或者你可能拥有一些开源JavaScript库的开发调试经验，是个JavaScript库的老鸟了，你希望重用该JavaScript代码而不是将其转换为C#。那么，这个时候，你可能就需要用上JS互操作性了。

接下来，我们就来看看如何在Blazor应用中加载JavaScript代码，又如何在JavaScript中调用.NET代码。

在Blazor中调用JavaScript代码

加载方式

将JavaScript添加到Blazor应用的方式与添加到标准HTML Web应用一样，都是使用HTML的<script>元素。我们可以在 Pages/_Layout.cshtml 文件或 wwwroot/index.html文件中的现有 <script src="_framework/blazor.*.js"></script> 标记后添加 <script> 标记即可。

NOTE：最好不要将JavaScript脚本放在页面的<head>元素中。

将JavaScript库或脚本添加之后，我们就可以在C#代码中通过使用 IJSRuntime 接口调用JavaScript函数了。不过，你需要提前将 IJSRuntime 实例注入Blazor页面中。

IJSRuntime 接口用于调用JavaScript代码的 InvokeAsync（有返回值）和 InvokeVoidAsync（无返回值）两个方法。顾名思义，这两个方法都是异步的，因此你需要在使用时标注await来获取结果。

InvokeAsync 或 InvokeVoidAsync 方法的接收参数，第一个是要调用的JavaScript函数的名称，比如 confirm 这个方法名。第二个则是这个函数所需的任何参数。

需要注意的是：

JavaScript函数必须属于 window 作用域或 window 子作用域；
传入的参数必须是可序列化为JSON的；

DEMO

假设我们已经有了一个Blazor Server应用程序，你可以从这里获取Code：https://github.com/Coder-EdisonZhou/BlazorSamples。

这里我们改写一下经典的Counter页面，将原来的按钮直接加一改为调用JavaScript的confirm函数弹出一个确认框，确认后再加一。

为了实现这个功能，我们需要改写如下：

Step1. 注入IJSRuntime抽象实例

[Inject]
public IJSRuntime JavaScript { get; set; }

Step2. 改写原来的button按钮调用IncrementCountConfirmation方法

@* <button class="btn btn-primary" @onclick="IncrementCount">Click me</button> *@
<button class="btn btn-primary" @onclick="@(async() => await IncrementCountConfirmation())">Click me</button>

Step3. 实现IncrementCountConfirmation方法

@code {
    private int currentCount = 0;

    [Parameter]
    public int IncrementAmount { get; set; } = 1;

    [Inject]
    public IJSRuntime JavaScript { get; set; }

    private void IncrementCount()
    {
        currentCount += IncrementAmount;
    }
    
    private async Task IncrementCountConfirmation()
    {
        if (await JavaScript.InvokeAsync<bool>(
          "confirm", 
          "Do you want to increment the count?"))
        {
            currentCount += IncrementAmount;
        }
    }
}

最终的效果如下图：

那么，如果想要使用第三方JavaScript库的函数该如何做呢？

你只需要在 Pages/_Layout.cshtml 文件的末尾，在现有 <script src="_framework/blazor.*.js"></script> 标记后添加你需要引入的JavaScript库即可。

然后，你就可以在C#代码中继续通过 IJSRuntime 调用第三方JavaScript库中的函数了。

在JavaScript中调用C#代码

加载方式

在JavaScript中若想调用C#代码可以使用 DotNet实用工具类（JS互操作的一部分）来运行Blazor代码中定义的.NET方法。在这个工具类中提供了 invokeMethod 和 invokeMethodAsync 两个函数，顾名思义，一个是同步的，另一个是异步的。

invokeMethodAsync方法返回 JavaScript Promise。

需要注意的是：

要调用的.NET方法需要使用 JSInvokableAttribute 标记
且该方法必须是 public的
且该方法任何参数都必须可序列化为JSON

DEMO

这里我们还是改写一下刚刚的Counter页面，增加一个button用于在JavaScript中调用.NET静态方法。

Step1. 添加HTML与JavaScript

<h1>Call .NET Example From JavaScript</h1>

<p>
    <button onclick="returnArrayAsync()">
        Trigger .NET static method
    </button>
</p>

<script>
    window.returnArrayAsync = () => {
        DotNet.invokeMethodAsync('EDT.BlazorServer.App', 'ReturnArrayAsync')
            .then(data => {
                console.log(data);
            });
    };
</script>

Step2. 添加.NET方法并标注 JSInvokable

[JSInvokable]
public static Task<int[]> ReturnArrayAsync()
{
   return Task.FromResult(new int[] { 1, 2, 3 });
}

效果演示：

那么，如果是.NET实例方法，该如何调用呢？这个就稍微复杂一丢丢了。

还是来个Demo吧：

Step1. 添加HTML和JavaScript示例：

<h1>Call .NET Example From JavaScript - Sample 2</h1>

<p>
    <label>
        Name: <input @bind="name" />
    </label>
</p>

<p>
    <button @onclick="TriggerDotNetInstanceMethod">
        Trigger .NET instance method
    </button>
</p>

<p>
    @result
</p>

<script>
    window.sayHello = (dotNetHelper) => {
        return dotNetHelper.invokeMethodAsync('GetHelloMessage');
    };
</script>

Step2. 添加.NET方法并标注 JSInvokable，还需要声明一个 DotNetObjectReference对象便于进行资源释放，以免引起内存泄露的问题；

@code {    
    [Inject]
    public IJSRuntime JavaScript { get; set; }

    private string? name;
    private string? result;
    private DotNetObjectReference<Counter>? objRef;

    protected override void OnInitialized()
    {
        objRef = DotNetObjectReference.Create(this);
    }

    public async Task TriggerDotNetInstanceMethod()
    {
        result = await JavaScript.InvokeAsync<string>("sayHello", objRef);
    }

    [JSInvokable]
    public string GetHelloMessage() => $"Hello, {name}!";

    public void Dispose()
    {
        objRef?.Dispose();
    }
}

效果演示：