开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

如何对Blazor webassembly组件中的javascript CustomEvent做出反应

Blazor WebAssembly是一种用于构建现代、交互式Web应用程序的.NET框架。它允许开发人员使用C#语言和.NET生态系统来构建客户端Web应用程序，而无需编写JavaScript代码。

在Blazor WebAssembly组件中，如果需要对JavaScript CustomEvent做出反应，可以通过以下步骤实现：

在Blazor组件中引用JavaScript代码：在Blazor组件中，可以使用IJSRuntime接口来调用JavaScript代码。首先，在组件中注入IJSRuntime接口，然后使用InvokeAsync方法调用JavaScript函数。
在Blazor组件中引用JavaScript代码：在Blazor组件中，可以使用IJSRuntime接口来调用JavaScript代码。首先，在组件中注入IJSRuntime接口，然后使用InvokeAsync方法调用JavaScript函数。
创建JavaScript函数：在JavaScript文件中，创建一个函数来触发CustomEvent。例如，创建一个名为triggerCustomEvent的函数：
创建JavaScript函数：在JavaScript文件中，创建一个函数来触发CustomEvent。例如，创建一个名为triggerCustomEvent的函数：
在Blazor组件中订阅CustomEvent：在Blazor组件的生命周期方法中，订阅CustomEvent并定义相应的处理逻辑。例如，在OnInitializedAsync方法中订阅CustomEvent：
在Blazor组件中订阅CustomEvent：在Blazor组件的生命周期方法中，订阅CustomEvent并定义相应的处理逻辑。例如，在OnInitializedAsync方法中订阅CustomEvent：
定义处理CustomEvent的方法：在Blazor组件中定义处理CustomEvent的方法。该方法将在CustomEvent触发时被调用。例如，定义一个名为HandleCustomEvent的方法：
定义处理CustomEvent的方法：在Blazor组件中定义处理CustomEvent的方法。该方法将在CustomEvent触发时被调用。例如，定义一个名为HandleCustomEvent的方法：
注意：[JSInvokable]特性用于标记可从JavaScript调用的方法。

通过以上步骤，你可以在Blazor WebAssembly组件中对JavaScript CustomEvent做出反应。当CustomEvent触发时，Blazor组件将调用相应的处理方法来处理事件数据。

腾讯云相关产品和产品介绍链接地址：

腾讯云云服务器（CVM）：https://cloud.tencent.com/product/cvm
腾讯云云函数（SCF）：https://cloud.tencent.com/product/scf
腾讯云云数据库MySQL版（TencentDB for MySQL）：https://cloud.tencent.com/product/cdb-for-mysql
腾讯云对象存储（COS）：https://cloud.tencent.com/product/cos
腾讯云人工智能（AI）：https://cloud.tencent.com/product/ai
腾讯云物联网（IoT）：https://cloud.tencent.com/product/iotexplorer
腾讯云移动开发（移动推送、移动分析、移动测试等）：https://cloud.tencent.com/product/mobile
腾讯云区块链（BCS）：https://cloud.tencent.com/product/bcs
腾讯云游戏多媒体引擎（GME）：https://cloud.tencent.com/product/gme
腾讯云音视频处理（VOD）：https://cloud.tencent.com/product/vod
腾讯云云原生应用引擎（TKE）：https://cloud.tencent.com/product/tke
腾讯云云原生数据库（TDSQL）：https://cloud.tencent.com/product/tdsql
腾讯云云原生存储（TCS）：https://cloud.tencent.com/product/tcs
腾讯云元宇宙（Tencent XR）：https://cloud.tencent.com/product/xr

相关搜索:如何获取对组件中的EventEmitter做出反应的指令 Blazor组件-对列表参数更改的反应 Blazor Webassembly中的JavaScript免费引导转盘 vuejs如何对异步更新的组件数据做出反应如何对特定的消息做出反应？如何在Blazor webassembly中捕获EditForm组件是否“脏”如何对webhook发送的消息做出反应？在Blazor Webassembly中读取.NET中的Javascript变量如何对浏览器Javascript中的NS错误失败错误做出反应在react本机ScrollView中对滚动出屏幕的组件做出反应如何对滑块的值改变事件做出反应？如何对jquery中的输入文本事件做出反应？如何在JointJS中对链接移除事件做出反应如何对新创建的约会做出反应？对android中设置活动的更改做出反应如何让两个不同的对象对javascript中的同一函数做出反应如何在react Native Reanimated中对键盘事件做出反应？如何在discord.py中获取对某个反应做出反应的人员的id 任何让React表示组件对MobX存储更改做出反应的方法如何使元素对页面上的用户输入做出反应

相关搜索:

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

别了，JavaScript；你好，Blazor

Web开发与JavaScript开发向来是同义词。直到WebAssembly的横空出世，WebAssembly (Wasm)是一种在浏览器中可以执行的二进制指令。 WebAssembly 的官方工具链能够编译 C/C++ 代码，但许多社区也提供了不同语言的编译器，如 Rust，Python，Java 和 Blazor(C#)。特别是 Rust 社区非常活跃，可以开始看到完整的前端框架，如 Yew 和 Dodrio，这为基于浏览器的应用带来了更多新的可能性，只要测试一些使用 WebAssembly 构建的优秀应用，就可知道基于浏览器的近乎原生的应用现在已经成为现实，例如 Sketchup 或 Magnum。

03

Blazor WebAssembly 修仙之途 - 初尝

Blazor 是一个可是使用 .NET/C# 来编写交互式客户端的 Web UI 框架，在官网有一句话概括 “Build client web apps with C#”。在 Blazor 里面有三个比较重要的概念：

01

对打 Angular，Blazor 赢在哪里？

Blazor 是一个 Microsoff ASP.NET Core 框架，用它无需任何附加组件或插件即可在浏览器中运行.NET 应用程序。相比之下，Angular 是一种基于组件的流行 JavaScript 框架，用于构建可扩展的 Web 应用程序。

03

全面的ASP.NET Core Blazor简介和快速入门

因为咱们的MongoDB入门到实战教程Web端准备使用Blazor来作为前端展示UI，本篇文章主要是介绍Blazor是一个怎样的Web UI框架，其优势和特点在哪？并带你快速入门上手ASP.NET Core Blazor(当然这个前提是你要有一定的C#编程基础的情况，假如你完全没有接触过C#的话建议你先从基本语法学起)。

02

Blazor资源大全，很棒的Blazor(2)

.NET Foundation提供的Blazor应用程序构建工作坊，Blazzing Pizza。

02

快速了解 ASP.NET Core Blazor

最近在几个微信 .NET 交流群里大家讨论比较频繁的话题就是这几天自己的面试经历。

01

ASP.NET Core Blazor WebAssembly 之 .NET JavaScript互调

Blazor WebAssembly可以在浏览器上跑C#代码，但是很多时候显然还是需要跟JavaScript打交道。比如操作dom，当然跟angular、vue一样不提倡直接操作dom；比如浏览器的后退导航。反之JavaScript也有可能需要调用C#代码来实现一些功能，毕竟客户的需求是千变万化的，有的时候只能通过一些hack的手段来实现。

01

Blazor学习之旅(1)初步了解Blazor

2022年9月以来在学习Blazor做全栈开发，因此根据老习惯，我会将我的学习过程记录下来，一来体系化整理，二来作为笔记供将来翻看。作为第一篇，我们先来了解一下这个Blazor到底是个什么鬼。

02

.NET Core/.NET5/.NET6 开源项目汇总8：Blazor项目

Ant Design Blazor是一套基于 Ant Design 和 Blazor 的企业级组件库。

03

.NET5 Blazor初探

经常看我公众号的朋友应该能看出来，我的文章基本都是.Net、Android、OpenCV的相关的，用到的语言C#、Kotlin、C++、还有现在偶尔还维护下的Delphi老代码。本来也想空余时间学一下前端的，公众号里也有几篇VUE文章，后台没再继续学习的主要原因就是学习的成本太高，除了JS的语言，像编译部署、环境搭建、跨域访问等一系列的东西，需要花费的时间太多。前阵子.Net5发布后跟着做了个小的东西，也是无意间看到了Blazor后，抱着测试看看是否占用学习时间太多的想法做了个Demo，于是有这今天这篇。

01

Blazor资源大全，很棒的Blazor(3)

更新 .razor 文件并立即查看更新，无需重新加载页面。由于无需重新加载任何内容，因此保留了应用程序状态。livesharp.net。

04

ASP.NET Core Blazor 初探之 Blazor WebAssembly

最近Blazor热度很高，传说马上就要发布正式版了，做为微软脑残粉，赶紧也来凑个热闹，学习一下。

01

Blazor VS React / Angular / Vue.js

Blazor是一项新的Microsoft技术，允许开发人员使用C＃为浏览器编写代码, 本文将Blazor与其他三个常见SPA框架进行了比较：React，Angular和Vue.js, JavaScript是当前基于浏览器的单页应用程序（SPA）最受欢迎的语言，因为直到最近，它还是在浏览器中运行的唯一语言。这些框架可以从JavaScript或TypeScript进行编译或转换。本文询问开发人员是否需要依赖与JavaScript，以及我们是否可以开始使用C＃构建SPA应用程序。

00

Blazor VS React / Angular / Vue.js

Blazor是一项新的Microsoft技术，允许开发人员使用C＃为浏览器编写代码, 本文将Blazor与其他三个常见SPA框架进行了比较：React，Angular和Vue.js, JavaScript是当前基于浏览器的单页应用程序（SPA）最受欢迎的语言，因为直到最近，它还是在浏览器中运行的唯一语言。这些框架可以从JavaScript或TypeScript进行编译或转换。本文询问开发人员是否需要依赖JavaScript，以及我们是否可以开始使用C＃构建SPA应用程序。

01

(7/30)Blazor系列：生命周期(Lifetime)

前面说过自己建立的Service都必须在Program.cs注册，但有些基本Service就不用自己做了。

03

.NET 8 Preview 6发布，支持新的了Blazor呈现方案和 VS Code .NET MAUI 扩展

2023年7月11日 .NET 8 Preview 6，.NET 团队在官方博客发布了系列文章：

02

最流行的WebAssembly Web开发框架： Blazor

最新的一份《The State of WebAssembly 2022》调查报告已出炉，“对于 WebAssembly 来说，这是相当不错的一年”。报告的一些重点内容包括：

02

Blazor带我重玩前端(二)

Blazor目前有两种托管模式，一种是Server-Side模式，一种是WebAssembly模式。官方首先支持的是Service-Side模式，使用WebAssembly模式，需要更新到最新版VS2019。小编目前的精力是更多的专注于Blazor-WebAssembly模式的研究，所以本系列文章只会对Server-Side模式做简要说明。

02

值得推荐的Blazor UI组件库

本文主要是推荐一些开源、免费、实用、美观的Blazor UI组件库，提供给广大C#/.NET开发者们学习和使用（注意：排名不分先后，都是十分优秀的开源框架和项目💖）。本文中的所有框架都已经收录到适合后端程序员的前端框架GitHub Issues知识库中，假如大家有更好组件库推荐欢迎到以下GitHub项目地址留言或者在文末留言。

02

Blazor带我重玩前端(一)

曾经我和前端朋友聊天的时候，我说我希望有一天可以用C#写前端，不过当时更多的是美好的想象，这一切正变得真实……

01

.NET 8 Release Candidate 1 (RC1)现已发布，包括许多针对ASP.NET Core的重要改进！

这是我们计划在今年晚些时候发布的最终.NET 8版本之前的两个候选版本中的第一个。大部分计划中的功能和变更都包含在这个候选版本中，可以供您尝试使用。您可以在文档中找到完整的ASP.NET Core在.NET 8中的新功能列表[1]。一些领域（尤其是Blazor）仍然有一些重大的变更待完成，我们预计将在下一个.NET 8候选版本中完成这些变更。

04

Blazor资源大全，很棒的Blazor（1）

Blazor允许您使用C#而不是JavaScript构建交互式Web用户界面。Blazor应用程序由使用C#、HTML和CSS实现的可重用的Web用户界面组件组成。客户端和服务器代码都是用C#编写的，允许您共享代码和库。更多信息请参阅官方Blazor网站[22]。

05

Day 01 初见Blazor

笔者接触软件行业的时间不长，先后接触三种架构，分别为ASP.NET MVC、ASP.NET Core & Blazor、ASP.NET Core & Angular，由于ASP.NET MVC 是笔者初入软件行业的新人时期，迷迷糊糊地就在前辈的带领下完成了项目，所以没什么感悟，只是大概了解前后端的差别，前端以HTTP Request 发送向后端取资源，后端回传资源，前端再将结果呈现在画面上。

02

.NET平台系列10 .NET统一平台愿景

2019年，微软分享了【统一的.NET堆栈和生态系统的愿景】。给开发者带来的价值是，将能够使用一组API，语言和工具来针对广泛的应用程序类型，包括移动，云，桌面和IoT。可能会意识到，如今已经可以使用.NET定位广泛的平台，但是，这些工具和API在Web和Mobile上并不总是相同的，例如它们不是同时发布的。

01

Blazor - .NET Core平台的SPA开发框架快速上手

可以看出，Blazor是微软试图推出一个拜托现有的ASP.NET WebForm,MVC这类混合开发模型下的，应对当前单页WEB应用和前后端分离趋势的一次尝试。

02

Blazor 中的依赖项注入

Razor 组件主要与 UI 表示有关。生成 UI 所涉及的部分工作通常涉及与数据存储进行通信，可能是通过 Web 服务。可能需要记录组件中的操作和事件。数据访问和日志记录不是 Razor 组件的主要关注点。执行日志记录或提取数据的代码不属于 UI 组件。在 Razor 组件中包含此类代码会违反单一原则。

01

NET 8 预览版 2 亮点是Blazor

.NET 团队在2023年3月14日发布了.NET 8预览版2，博客文章地址：https://devblogs.microsoft.com/dotnet/announcing-dotnet-8-preview-2/，亮点是了对Blazor的一些改进。

05

ASP.NET Core Blazor Webassembly 之路由

web最精妙的设计就是通过url把多个页面串联起来，并且可以互相跳转。我们开发系统的时候总是需要使用路由来实现页面间的跳转。传统的web开发主要是使用a标签或者是服务端redirect来跳转。那今天来看看Blazor是如何进行路由的。

01

浏览器里能跑C#？竟然有这样的神奇技术！

本号已有原创文章250+篇，以软件工程为纲，DevOps为基，洞察研发效能全貌，涵盖从需求管理、应用/游戏开发、软件测试、发布部署到运营监控的完整流程。无论您是项目经理、产品经理、开发人员、测试人员，还是运维人员，在这里您都可以有所收获，同时深入理解其他角色的工作内容，共同助力DevOps的成功落地。欢迎关注，有任何问题可发送私信~

01

【重榜？】.NET 6 Preview 1 开箱上手！带你尝试新版本更新！

最近 .NET 6 Preview 1 发布了，.NET 统一是此版本的核心。大家可以读一下原文博客：

02

C#程序员的福音来啦，Blazor框架概览

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

02

Blazor 准备好为企业服务了吗？

如果您正在编写 .NET Web 应用程序，您很可能已经意识最近一年在.NET Web开发领域的热点都是 Blazor 的。如果你还没有了解Blazor，它允许您使用 C# 来编写 Web UIs，传统上您必须使用 JavaScript。过去两年，我已经看到它从一个可爱的微软实验项目演变成他们认为是生产就绪的项目的全过程。

02

Day 02 网页和Blazor介绍

笔者对网站的认知为前端、后端及数据库，使用者在浏览器页面按下按钮或是表单请求，触发前端事件，将收集起来的条件打包送往后端，后端接收条件后去数据库据此处理判断，捞出使用者想要的数据后，后端将页面、数据回传给前端，前端再将相应数据呈现在页面上，这就是最原始的前后端交流。

02

用 Blazor WebAssembly 实现微前端

我聊下最近我在做的事情，然后分享下在Blazor WebAssembly 微前端的实现细节，这篇文章是我的一些心得，以及一个示例的 Demo 项目，展示了如何使用Blazor 实现多模块分布式的应用程序的微前端，如下图所示。

00

什么将会替代 JavaScript 呢？

JavaScript 正在蓬勃发展。但由于 WebAssembly 的出现，它的衰落可能只是一个时间问题。

02

Blazor VS 传统Web应用程序

Blazor是Microsoft团队开发的单页面应用程序（SPA）框架，它是与React，Angular和Vue.js有相同之处，但是它使用的是C＃而不是JavaScript。它将C＃带入SPA领域，并向传统的Web应用程序框架（如ASP .NET Web窗体和ASP .NET Core MVC）挑战，来构建Web应用程序。本文讨论了SPA和传统Web应用程序之间的选择，并说明了服务器端渲染和客户端渲染之间的区别。

01

Blazor VS 传统Web应用程序

Blazor是Microsoft团队开发的单页面应用程序（SPA）框架，它是与React，Angular和Vue.js有相同之处，但是它使用的是C＃而不是JavaScript。它将C＃带入SPA领域，并向传统的Web应用程序框架（如ASP .NET Web窗体和ASP .NET Core MVC）挑战，来构建Web应用程序。本文讨论了SPA和传统Web应用程序之间的选择，并说明了服务器端渲染和客户端渲染之间的区别。

01

Blazor VS Vue

在其最简单的模式中，您可以简单地将核心 Vue 脚本包含在您的应用程序中，然后开始构建您的组件。

03

.NET 8 Preview 5发布，了解一下Webcil 是啥

2023年6月13日 .NET 8 Preview 5，.NET 团队在官方博客发布了系列文章：

03

Blazor学习之旅 (14) Blazor WebAssembly

在上一篇我们学习了如何创建和使用Razor类库，这一篇我们了解下WebAssembly是什么，以及创建第一个Blazor WebAssembly应用。

01

「译」用 Blazor WebAssembly 实现微前端

我聊下最近我在做的事情，然后分享下在Blazor WebAssembly 微前端的实现细节，这篇文章是我的一些心得，以及一个示例的 Demo 项目，展示了如何使用Blazor 实现多模块分布式的应用程序的微前端，如下图所示。

02

Dotnet9网站回归Blazor重构，访问速度飞快，交互也更便利了！

Dotnet9网站回归Blazor重构，访问速度确实飞快，同时用上Blazor的交互能力，站长也同步添加了几个在线工具，这篇文章分享下Blazor的重构过程，希望对大家网站开发时做技术选型有个参考。

03

Blazor带我重玩前端(三)

需要升级VS2019以及.NET Core到最新版（具体的最低支持，我已经忘了，总是越新支持的就越好），以更好的支持自己开发Blazor项目。

03

ASP.NET Core 6.0对热重载的支持

.NET 热重载技术支持将代码更改（包括对样式表的更改）实时应用到正在运行的程序中，不需要重启应用，也不会丢失应用状态。

01

.NET 20周年软件趋势随想

从2000年微软启动.NET战略时，我还是一位大学生，当年著名的黑客Miguel de Icaza , Miguel 为了寻找GNOME项目开发框架经过充分的调研启动了一个志存高远的项目：Mono，一个Microsoft .NET Framework的自由GNU/Linux实现，我在国外的Linux论坛上循着Miguel的指引踏上了.net开发之路，我开始接触.NET Framework的时候还是beta阶段，2002年2月13日微软发布了.NET 1.0 , 我也毕业工作半年时间，开始使用ASP.NET 1.0开发项目, 今天我已经伴随.NET 发展20年，在此.NET 20年之际有感而发写下这些感想。

02

如何使用 Blazor 框架在前端浏览器中导入和导出 Excel

Blazor 是一个相对较新的框架，用于构建具有 .NET 强大功能的交互式客户端 Web UI。一个常见的用例是将现有的 Excel 文件导入 Blazor 应用程序，将电子表格数据呈现给用户，并且能够允许进行任何更改，最后将该数据导出回 Excel 文件或将其保存到数据库。

02

使用Jexus 容器化您的 Blazor 应用程序

在本文中，我们将介绍如何将 Blazor 应用程序放入Jexus 容器以进行开发和部署。我们将使用 .NET Core CLI，因此无论平台如何，使用的命令都将是相同的。

01

MAUI使用Masa blazor组件库

上一篇(点击阅读)我们实现了UI在Web端(Blazor Server/Wasm)和客户端(Windows/macOS/Android/iOS)共享，这篇我加上 Masa Blazor[2]组件库的引用，并把前几个月写的时间戳转换[3]工具加上。

02

自研开源 Blazor 组件库路上，我们解决了这些重要挑战

采访嘉宾 | 谷首道、曹尤先编辑 | 闫园园随着 Web 开发的日趋复杂，框架和组件库的应用可谓是越来越多。然而，当开发者打开搜索引擎搜索相关概念时，会发现如今的框架和组件库已是“满天飞”，它们各有优势，但也各有不足。因此，到底应该再造轮子还是选择已有工具，选择已有工具时又该如何根据自己的项目需求进行抉择，这其中种种问题对很多团队来说渐渐成为主要挑战。 MASA 技术团队，成立于 2021 年，其自主研发的 MASA Blazor 是一个基于 Blazor Component 和 Material

03

Day 03：Blazor Server和Blazor WebAssembly的差异

下载Visual Studio后首先建立一个Blazor解决方案，里面建立Blazor Server项目，方案位置可以自己选择(注：新版Visual Studio将Blazor Server跟Blazor WebAssembly的新建项目模板拆分了，较为直观)，先不管里面的程序，按下F5执行后在网页按下F12或是Ctrl+Shift+I开启开发人员工具(Dev tool)，切换到Network页签后重新加载网页，可以看到几个文件，其中blazor.server.js就是在服务器跟浏览器之间通过SingalR建立WebSocket通道的文件。

03

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭