C# 如何在Blazor中调用JavaScript函数 - JS互操作(JS Interop)

来源:这里教程网 时间:2026-02-21 17:35:40 作者:

在 Blazor 中调用 JavaScript 函数,核心是使用 JS Interop(JavaScript 互操作)。它让 C# 和 JS 能安全、双向通信,但要注意:服务端渲染(Blazor Server)和客户端渲染(Blazor WebAssembly)的调用时机与限制略有不同。

注册并注入 IJSRuntime

所有 JS 调用都必须通过

IJSRuntime
实例完成。Blazor 已自动注册该服务,你只需在组件中注入即可:

@inject IJSRuntime JSRuntime

⚠️ 注意:不能在构造函数中使用

JSRuntime
(此时依赖尚未注入),应在
OnInitializedAsync
或事件处理方法中调用。

调用无返回值的 JS 函数(void)

适用于如弹窗、DOM 操作、初始化第三方库等场景:

立即学习“Java免费学习笔记(深入)”;

JS 端定义函数(建议挂载到
window
或自定义对象,避免污染全局):
window.showAlert = (msg) => alert(msg);
C# 端调用(异步,但不等待返回):
await JSRuntime.InvokeVoidAsync("showAlert", "Hello from Blazor!");

调用有返回值的 JS 函数

支持 Promise(WebAssembly)或同步/异步(Server),Blazor 自动处理 Promise 解包:

JS 端返回 Promise(推荐):
window.getTimestamp = () => Promise.resolve(Date.now());
C# 端获取结果(自动 await Promise):
long timestamp = await JSRuntime.InvokeAsync<long>("getTimestamp");

支持泛型类型:string、int、bool、DateTime、自定义类(需 JSON 兼容结构)。

从 JS 调用 C# 方法(.NET 方法回调)

适用于事件响应(如按钮点击、滚动监听)或第三方库回调:

C# 端用
[JSInvokable]
标记公开方法(必须是 public static 或实例方法 + 引用实例):
[JSInvokable]
public static void LogFromJs(string msg) => Console.WriteLine($"JS says: {msg}");
JS 端调用(注意命名空间前缀,或用别名):
DotNet.invokeMethodAsync('MyAssemblyName', 'LogFromJs', 'Hi again');

若调用非静态方法,需先用

DotNet.createJSObjectReference
创建引用,并在 JS 中保存该引用。

基本上就这些。关键点是:注入正确、调用时机合理、JS 函数可访问、类型匹配。不复杂但容易忽略初始化顺序和跨平台差异。

相关推荐