虽然Blazor本身就是一个强大的组件化前端框架，但很遗憾浏览器的许多API还是需要使用JavaScript调用，此外Blazor的生态也远不如前端JavaScript生态庞大，很多功能是没有Blazor实现的，有时我们还是不得不使用JavaScript实现一些功能，这就涉及到Blazor和JavaScript之间的互操作。这篇笔记我们学习如何从Blazor调用JavaScript，以及如何从JavaScript调用Blazor组件中的代码。
Blazor调用JavaScript函数通常需要JavaScript函数在全局作用域可以被访问，下面例子我们在Blazor中调用window.alert()函数。
@rendermode InteractiveServer
@inject IJSRuntime JSRuntime
<button @onclick="HandleButtonClick">Click me</button>
@code {
public async Task HandleButtonClick()
{
await JSRuntime.InvokeVoidAsync("alert", "Hello from Blazor!");
}
}
代码中我们注入了IJSRuntime对象，它代表浏览器的JavaScript运行时，随后我们使用InvokeVoidAsync()方法调用了这个函数，并传递了一个字符串。如果我们调用的JavaScript函数有返回值，可以使用InvokeAsync<T>方法。
在JavaScript中也可以调用Blazor中定义的方法，下面代码中我们在Blazor中定义了一个静态方法，它标注了[JSInvokable]注解。
@rendermode InteractiveServer
@inject IJSRuntime JSRuntime
<div>Hello, world!</div>
@code {
[JSInvokable]
public static void DemoFunc(string? text)
{
Console.WriteLine(text);
}
}
JavaScript中我们可以按如下方式调用该方法。
DotNet.invokeMethodAsync("Gacfox.DemoBlazorServer", "DemoFunc", "Hello")
代码中，invokeMethodAsync的第一个参数是程序集名称，第二个参数是函数名，后面则是参数。