Blazor WebAssembly包含一个在WebAssembly中实现的适当的.NET运行时，WebAssembly是web的标准字节码。此.NET运行时随Blazor WebAssembly应用程序一起下载，可以直接在浏览器中运行正常的.NET代码。不需要插件或代码传输。BlazorWebAssembly适用于所有现代web浏览器，包括台式机和移动设备。

不需要JavaScript，开发人员就可以使用C#、HTML和CSS构建一个全栈web应用程序。但是在有些情况下，开发人员需要与现有的JavaScript库进行通信。在本文中，我将解释如何在blazor webassembly中从C#调用JavaScript，反之亦然。

让我们使用VisualStudio2019创建一个示例BlazorWebAssembly应用程序。

作为第一步，打开VisualStudio2019->创建新项目->选择Blazor WebAssembly模板，将.NET5作为目标运行时，指定项目名称并单击创建。

右键单击pages文件夹并创建一个名为ShowMessage.razor.cs 把这个class变成一个partial class。将C#代码从ShowMessage.razor 文件并将其粘贴到新创建的分部类中。

C#调用JS

1、创建js文件，编写一个js方法，然后在页面文件中引用该js文件

function showMessage(message){
    alert(message)
}

2、创建C#接口IJSInvoker和JSInvoker类继承自IJSInvoker

public interface IJSInvoker{
    Task ShowMessageAsync(string message);
}

3、有一个名为IJSRuntime的内置接口，用于从C#调用JavaScript方法。此接口位于命名空间下Microsoft.JSInterop. 在构造函数中注入此接口。IJSRuntime接口中有一个名为InvokeVoidAsync的方法。这是一个重载方法。第一个参数是JavaScript函数的名称，第二个参数是我们需要传递给JS函数的数据。在我们的例子中，第一个参数值是“showMessage”，第二个参数值是”helloworld”，如下图所示。

public JavascriptInvoker(IJSRuntime iJSRuntime)
{
       this.iJSRUntime = iJSRuntime;
}

public async Task ShowMessageAsync(string message)
{
        await iJSRuntime.InvokeVoidAsync("showMessage", message);
}

4、在Program.cs 文件中添加IJavascriptInvoker依赖注入

public class Program
{
     public static async Task Main(string[] args)
     {
            var builder =WebAssemblyHostBuilder.CreateDefault(args);
            //其他代码...

            builder.Services.AddScoped<IJavascriptInvoker,JavascriptInvoker>();
     }
}

5、打开ShowMessage.razor.cs 文件并注入IJavascriptInvoker接口。使用属性注入。属性injecion是通过使用Inject属性实现的。

[Inject]
private IJavacriptInvoker IJavascriptInvoker{get;set;}

在ShowMessage方法中调用ShowMessageAsync

private async Task ShowMessage()
{
      await IJavascriptInvoker.ShowMessage("HelloWorld");
}

然后运行程序即可