C# 如何在 Blazor WebAssembly 中调用 JavaScript 函数_C# Blazor WebAssembly JS 互操作指南

在 Blazor WebAssembly 中调用 JavaScript 函数是实现与前端 DOM 操作、第三方 JS 库集成的关键方式。Blazor 提供了内置的 JS 互操作（JavaScript Interop）机制，让你能在 C# 代码中安全地调用 JavaScript，并支持传参和返回值。

启用 JS 互操作的基本步骤

Blazor WebAssembly 允许你在 .NET 代码中通过 IJSRuntime 接口调用 JavaScript 函数。你需要注入该服务，并确保 JS 脚本已加载。

在组件中获取 IJSRuntime 实例：

然后就可以使用 JS.InvokeAsync 方法来调用全局定义的 JS 函数或直接执行脚本片段。

立即学习“Java免费学习笔记（深入）”；

定义并调用简单的 JavaScript 函数

在 wwwroot/index.html 的 <script> 标签中定义一个 JS 函数：</script>

<script>
  window.showAlert = (message) => {
    alert(`来自 C# 的消息: ${message}`);
  };
<p>window.getScreenWidth = () => {
return window.screen.width;
};
</script></p>

在 Razor 组件中调用这些函数：

InvokeVoidAsync 用于没有返回值的函数，InvokeAsync 用于有返回值的情况，T 是期望的返回类型（如 int、string、bool 或对象）。

处理复杂参数和对象传递

你可以将 C# 对象传给 JavaScript，Blazor 会自动序列化为 JSON。例如：

// C#
var person = new { Name = "张三", Age = 25 };
await JS.InvokeVoidAsync("logPerson", person);

// JavaScript
window.logPerson = (person) => {
  console.log(person.name, person.age); // 输出：张三 25
};

注意：C# 属性名会转为小驼峰格式（Name → name），除非你自定义序列化设置。

异步调用与错误处理

JS 调用是异步的，应始终使用 await 并包裹在 try-catch 中防止崩溃：

try {
  var result = await JS.InvokeAsync<string>("someFunction");
} catch (JSException ex) {
  Console.Error.WriteLine($"JS 调用失败: {ex.Message}");
}

常见错误包括函数未定义、脚本未加载完成、跨域限制等。确保 JS 函数挂载到 window 上且页面已完全加载后再调用。

模块化 JS 调用（推荐做法）

对于大型项目，建议将 JS 封装成模块，避免污染全局作用域：

// wwwroot/js/helper.js
export function showAlert(message) {
  alert(message);
}
<p>export function readLocalStorage(key) {
return localStorage.getItem(key);
}</p>

在组件中动态导入模块并调用：

var module = await JS.InvokeAsync<IJSObjectReference>("import", "./js/helper.js");
await module.InvokeVoidAsync("showAlert", "模块化调用！");
var value = await module.InvokeAsync<string>("readLocalStorage", "token");
await module.DisposeAsync(); // 释放引用

模块化方式更清晰，支持 Tree-shaking，也便于管理生命周期。

基本上就这些。只要正确引入 IJSRuntime、定义好 JS 函数、注意异步和序列化规则，就能顺畅实现 Blazor WebAssembly 与 JavaScript 的互操作。不复杂但容易忽略细节，比如函数必须挂在 window 上或使用模块导入。