Blazor中C#与Javascript的互操作

做Web开发肯定离不开Javascript，Blazor虽然一定程度上可以用c#来替换Javascript的功能，但是完全抛弃Javascript肯定是不可能的，因此必然需要一种机制让C#可以和Javascript互相调用，也可以称之为互操作。

从调用的方向来看可以是C#调用Javascript，也可以是Javascript调用C#。

1. C#调用Javascript

做Web开发的都知道Javascript脚本都是通过<script>标签来引入的，不过Blazor不能直接在Razor组件里面添加该标签，你只能添加到文件"wwwroot/index.html (Blazor WebAssembly)" 或者 "Pages/_Host.cshtml (Blazor Server)"中。

1.1 IJSRuntime

Blazor提供了IJSRuntime接口让开发者可以方便的进行Javascript调用。

以下是她的声明：

namespace Microsoft.JSInterop
{
    public interface IJSRuntime
    {
        ValueTask<TValue> InvokeAsync<TValue>(string identifier, object[] args);
        ValueTask<TValue> InvokeAsync<TValue>(string identifier, CancellationToken cancellationToken, object[] args);
    }
}

同时还有一组扩展方法

namespace Microsoft.JSInterop
{
    public static class JSRuntimeExtensions
    {
        public static ValueTask<TValue> InvokeAsync<TValue>(this IJSRuntime jsRuntime, string identifier, params object[] args);
        public static ValueTask<TValue> InvokeAsync<TValue>(this IJSRuntime jsRuntime, string identifier, CancellationToken cancellationToken, params object[] args);
        public static ValueTask<TValue> InvokeAsync<TValue>(this IJSRuntime jsRuntime, string identifier, TimeSpan timeout, params object[] args);
        public static ValueTask InvokeVoidAsync(this IJSRuntime jsRuntime, string identifier, params object[] args);
        public static ValueTask InvokeVoidAsync(this IJSRuntime jsRuntime, string identifier, CancellationToken cancellationToken, params object[] args);
        public static ValueTask InvokeVoidAsync(this IJSRuntime jsRuntime, string identifier, TimeSpan timeout, params object[] args);
    }
}

其实主要还是用扩展方法，她比原始方法更灵活，如果需要取返回值，则使用InvokeAsync方法，不需要返回值则使用InvokeVoidAsync。

使用之前必选先在Razor组件里面声明注入：

@inject IJSRuntime JSRuntime;

1.2 identifier

identifier作为每个函数的第一个必选参数，表示JS里面函数的标识符,如果是全局函数，直接写函数名就行，如果包含范围(命名空间或实例)，则使用"{范围}.{函数名}"的形式。

比如如下js:

//全局
function sayHello() {
   
    alert('Hello');
}

//带范围
window.jsUtils = {
   
    sayHello: function () {
   
        alert('jsUtils:Hello')