Blazor 中调用 JavaScript

在 Blazor 中调用 JavaScript 可以通过 JavaScript Interop 来实现。这允许 Blazor 组件与 JavaScript 代码进行交互。以下是如何在 Blazor 中调用 JavaScript 的步骤：

1. 在 wwwroot 文件夹中创建 JavaScript 文件

首先，你需要创建一个 JavaScript 文件（如 wwwroot/js/site.js），并在其中编写你要调用的 JavaScript 函数。例如：

// wwwroot/js/site.js
 function showAlert(message) 
{ 
     alert(message); 
} 

2. 在 _Host.cshtml 或 index.html 文件中引入 JavaScript 文件

然后，在 Blazor 应用的 HTML 文件中引入 JavaScript 文件。例如：

<!-- _Host.cshtml 或 index.html --> <script src="js/site.js"></script> 

3. 在 Blazor 组件中调用 JavaScript

接下来，你可以在 Blazor 组件中使用 JavaScript Interop 来调用这个 JavaScript 函数。首先，需要注入 IJSRuntime 服务，并通过它调用 JavaScript 函数。

@page "/example"
@inject IJSRuntime JSRuntime
<button @onclick="CallJavaScript">Call JavaScript</button>
@code
{
   private async Task CallJavaScript()
    {
     await JSRuntime.InvokeVoidAsync("showAlert", "Hello from Blazor!");
    }
}

4. 运行应用

当你点击按钮时，Blazor 会通过 JavaScript Interop 调用 JavaScript 中的 showAlert 函数，显示一个警告框。

解释

• IJSRuntime 是 Blazor 提供的一个服务，用于与 JavaScript 进行交互。
• InvokeVoidAsync 用于调用不返回值的 JavaScript 函数。如果你的 JavaScript 函数有返回值，你可以使用 InvokeAsync<T> 来获取返回值。

这种方法可以帮助开发者在 Blazor 应用中实现与 JavaScript 的交互。