做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')