讲师中心 微信公众号
AI工具推荐 视频效率加速

JavaScript 怎么调用 Blazor 的 C# 方法

轻浩姑娘_4281

轻浩姑娘_4281

发布时间:2026-01-17 12:34:03

|

215人浏览过

|

来源于php中文网

原创

JavaScript 调用 Blazor C# 方法需满足:方法标记 [JSInvokable]、为 public static,并在 JS 中通过 DotNet.invokeMethodAsync(传入程序集名、方法名及参数)异步调用,注意程序集名准确性、类型转换与异常捕获。

javascript 怎么调用 blazor 的 c# 方法

JavaScript 可以通过 JS Interop(JavaScript 互操作) 调用 Blazor 中的 C# 方法,但必须满足一个关键前提:该 C# 方法需被标记为 [JSInvokable],且在 Blazor 组件或服务中定义(推荐放在可注入的服务中,便于复用和测试)。

1. 在 C# 中定义可被 JS 调用的方法

方法必须是 public static(Blazor Server 和 WebAssembly 均要求),并添加 [JSInvokable] 特性。方法名可自定义,也可用特性参数指定 JS 端调用名:

  • 不指定名称时,JS 端默认用 C# 方法名(如 GetUserName)
  • 指定名称更安全,避免因 C# 命名规则变化导致 JS 调用失败,例如:[JSInvokable("get_user_info")]

示例(放在一个静态服务类中):

public static class JsInteropService
{
    [JSInvokable]
    public static string GetGreeting(string name) => $"Hello, {name}!";
<pre class="brush:php;toolbar:false;">[JSInvokable("calculate_total")]
public static int Add(int a, int b) => a + b;

}

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

Aria2 Json Rpc
Aria2 Json Rpc

通过 JSON‑RPC 2.0 与 aria2 下载管理器交互,使用自然语言命令管理下载、查询状态并控制任务。适用于 aria2、下载管理或种子操作。

下载

2. 在 JavaScript 中调用 C# 方法

使用 DotNet.invokeMethodAsync(WebAssembly)或 DotNet.invokeMethod(同步,仅限 Server 的旧版,不推荐)。现代 Blazor(.NET 6+)统一推荐异步方式:

  • 第一个参数是程序集名称(通常是项目名,如 "MyBlazorApp")
  • 第二个参数是 C# 方法名(或 [JSInvokable] 指定的名称)
  • 后续参数按顺序传入 C# 方法所需参数
  • 返回 Promise,需 await 或 .then() 处理结果

示例:

// JS 中调用
async function callCSharp() {
  try {
    const greeting = await DotNet.invokeMethodAsync('MyBlazorApp', 'GetGreeting', 'Alice');
    console.log(greeting); // "Hello, Alice!"
<pre class="brush:php;toolbar:false;">const sum = await DotNet.invokeMethodAsync('MyBlazorApp', 'calculate_total', 5, 3);
console.log(sum); // 8

} catch (err) { console.error('调用失败:', err); } }

3. 注意事项与常见问题

  • 程序集名要准确:不是解决方案名,也不是命名空间,而是项目文件(.csproj)中 <assemblyname></assemblyname> 的值,默认为项目名;若修改过,需以实际为准
  • 类型兼容性:JS 传参会自动转换基础类型(string/number/boolean),复杂对象需序列化为 JSON 字符串,C# 端用 JsonSerializer.Deserialize<t></t> 解析
  • 生命周期与上下文:[JSInvokable] 方法必须是 static,无法直接访问组件实例、依赖注入服务或状态。如需访问服务,应通过 static 方法间接获取(如使用 IServiceProvider 全局引用,但需谨慎设计)
  • 错误处理:C# 方法中抛出异常会变成 JS Promise 的 rejection,务必在 JS 端 catch,否则静默失败

4. 进阶:从组件内注册 JS 可调用实例方法(.NET 7+)

如果确实需要调用非静态、带状态的方法(比如访问当前组件的 NavigationManager),可借助 DotNetObjectReference.Create 创建对 .NET 对象的引用,并传给 JS:

  • C# 端创建引用并暴露给 JS(通常在 OnAfterRender 或初始化时)
  • JS 保存该引用,后续通过 invokeMethodAsync 调用其公开方法(这些方法无需 static,但需加 [JSInvokable])
  • 使用完毕后,JS 应主动调用 dispose 避免内存泄漏

这种方式适合回调、事件响应等场景,但增加了管理复杂度,日常简单交互仍优先用 static 方法。

基本上就这些。核心就三点:标记 [JSInvokable]、确保方法是 public static、JS 端用 DotNet.invokeMethodAsync 正确传参。不复杂但容易忽略程序集名和异常处理。

热门AI工具

更多
UpDream
UpDream Hot

一款AI视频创作工具,主要用于哔哩哔哩推出的自研AI视频创作工具,适合需要提升相关任务效率的用户。

立刻MV
立刻MV Hot

立刻MV是一款AI文本写作工具,AI 音乐视频(MV)创作工具。

DeepSeek

DeepSeek是一款面向对话、写作、编程和推理场景的AI大模型工具。

豆包大模型

豆包大模型是一款由字节跳动推出的企业级大语言模型服务平台。

讯飞智作

讯飞智作是一款AI视频创作工具,AI文本配音工具,数字人课程、营销视频制作。

切问学术

切问学术是一款AI论文写作工具,复旦大学NLP团队推出的AI学术智能体。

LibLibAI
LibLibAI Hot

一款AI视频创作工具,主要用于国内领先的AI创意平台,以海量模型、低门槛操作与“创作-分享-商业化”生态,让小白与专业创作者都能高效实现图文乃至视频创意表达,适合需要提升相关任务效率的用户。

WorkBuddy

一款AI办公效率工具,主要用于腾讯云推出的AI原生桌面智能体工作台,适合需要提升相关任务效率的用户。

Laper
Laper Hot

Laper是专为编剧、导演和制片人推出的 AI 原生剧本创作工具。

相关专题

更多
json数据格式
json数据格式

JSON是一种轻量级的数据交换格式。本专题为大家带来json数据格式相关文章,帮助大家解决问题。

1975

2023.08.07

json是什么
json是什么

JSON是一种轻量级的数据交换格式,具有简洁、易读、跨平台和语言的特点,JSON数据是通过键值对的方式进行组织,其中键是字符串,值可以是字符串、数值、布尔值、数组、对象或者null,在Web开发、数据交换和配置文件等方面得到广泛应用。本专题为大家提供json相关的文章、下载、课程内容,供大家免费下载体验。

2702

2023.08.23

jquery怎么操作json
jquery怎么操作json

操作的方法有:1、“$.parseJSON(jsonString)”2、“$.getJSON(url, data, success)”;3、“$.each(obj, callback)”;4、“$.ajax()”。更多jquery怎么操作json的详细内容,可以访问本专题下面的文章。

936

2023.10.13

go语言处理json数据方法
go语言处理json数据方法

本专题整合了go语言中处理json数据方法,阅读专题下面的文章了解更多详细内容。

3019

2025.09.10

string转int
string转int

在编程中,我们经常会遇到需要将字符串(str)转换为整数(int)的情况。这可能是因为我们需要对字符串进行数值计算,或者需要将用户输入的字符串转换为整数进行处理。php中文网给大家带来了相关的教程以及文章,欢迎大家前来学习阅读。

5279

2023.08.02

java中boolean的用法
java中boolean的用法

在Java中,boolean是一种基本数据类型,它只有两个可能的值:true和false。boolean类型经常用于条件测试,比如进行比较或者检查某个条件是否满足。想了解更多java中boolean的相关内容,可以阅读本专题下面的文章。

2090

2023.11.13

java boolean类型
java boolean类型

本专题整合了java中boolean类型相关教程,阅读专题下面的文章了解更多详细内容。

143

2025.11.30

scripterror怎么解决
scripterror怎么解决

scripterror的解决办法有检查语法、文件路径、检查网络连接、浏览器兼容性、使用try-catch语句、使用开发者工具进行调试、更新浏览器和JavaScript库或寻求专业帮助等。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

889

2023.10.18

Buffalo框架数据库开发全教程
Buffalo框架数据库开发全教程

本专题围绕Buffalo框架数据库开发,讲解database.yml多环境配置、soda与fizz迁移生成回滚、模型结构体标签、增删改查与条件查询、一对多与多对多关联、数据校验、回调钩子、事务处理及原生SQL执行能力。

80

2026.09.23

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
WebStorm 官方调试文档
WebStorm 官方调试文档

共0课时 | 0人学习

React 教程
React 教程

共58课时 | 12万人学习

TypeScript 教程
TypeScript 教程

共19课时 | 6.5万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn