Blazor 事件处理开发指南

翻译自 Waqas Anwar 2021年3月25日的文章 《A Developer’s Guide To Blazor Event Handling》 [1]

如果您正在开发交互式 Web 应用程序,根据不同的应用程序事件和用户操作动态更新用户界面是十分常见的做法。这些操作会触发事件,而作为开发人员,我们的工作是使用一些事件处理技术来处理这些事件。Blazor 内置支持处理多种事件,比如 onclick、onchange 和 onmousemove 等,并为开发者提供了处理这些事件的多种方式。我将在本教程中概述 Blazor 事件处理。此外,我还将介绍如何在 Blazor 中使用事件参数和 Lambda 表达式,以及如何将附加参数传递给事件处理程序。

Blazor 事件处理入门

Blazor 中处理事件的基本语法如下所示:

@on[DOM EVENT]="[DELEGATE]"

在上面的语法中

  • [DOM EVENT] 是 DOM 事件的占位符,例如 click、mouseup 等。

  • [DELEGATE] 是 C# 委托事件处理程序的占位符。

假设您要处理按钮单击事件,您可以按如下方式使用上述语法:

<button @onclick="Update" /> 

让我们通过一些实际的例子来更详细地介绍一下事件处理。在 Visual Studio 2019 中创建一个新的 Blazor Server 应用程序,然后添加一个新的 Blazor 组件 Calculator.razor

@page "/calculator"<h3>Calculator</h3><div class="form-group"><label for="number1">Number 1</label><input type="number" class="form-control" id="number1" @bind="number1">
</div>
<div class="form-group"><label for="number2">Number 2</label><input type="number" class="form-control" id="number2" @bind="number2">
</div>
<div class="form-group"><label><b>Total: </b>@total</label>
</div><button class="btn btn-primary" @onclick="Calculate">Calculate</button>
<button class="btn btn-secondary" @onclick="Clear">Clear</button>@code {private int number1 = 0;private int number2 = 0;private int total = 0;private void Calculate(){total = number1 + number2;}private void Clear(){number1 = 0;number2 = 0;total = 0;}
}

上面的组件中有两个按钮:Calculate 和 Clear,它们都处理了 onclick 事件,并调用了上面的 @code 代码块中编写的 Calculate 和 Clear 方法。

<button class="btn btn-primary" @onclick="Calculate">Calculate</button>
<button class="btn btn-secondary" @onclick="Clear">Clear</button>

如果您运行这个简单的示例,将看到类似于以下内容的页面。在文本框中输入一些数字,然后按下按钮查看事件处理的效果。

如下面的代码片段所示,Blazor 还支持异步委托事件处理程序。这些处理程序类型会返回一个 Task,在其内部我们可以使用 await 关键字调用异步方法。

private async Task Clear()
{await Task.Delay(10);number1 = 0;number2 = 0;total = 0;
}

理解 Blazor 事件参数

大部分 Blazor 事件支持事件参数,这些参数是携带触发事件的相关信息的对象。例如,KeyboardEventArgs 可以为我们提供用户按下的按键的详细信息。

让我们创建一个带有标准的 HTML div 元素的基本组件,如下所示。

@page "/mouseevents"<h3>Mouse Events</h3><div style="width: 400px; height: 400px; background: lightblue" @onmousemove="Move"></div>
<label><b>Coordinates: </b>@coordinates</label>@code {private string coordinates = "";private void Move(MouseEventArgs e){coordinates = $"{e.ScreenX}:{e.ScreenY}";}
}

上面的 div 元素处理 onmousemove 事件并将 MouseEventArgs 传递给方法名为 Move 的事件处理程序。然后,Move 事件处理程序使用 MouseEventArgs 类中提供的 ScreenX 和 ScreenY 属性,用鼠标的 X 和 Y 位置更新本地字段 coordinates。运行应用程序,并尝试在 div 中移动鼠标,您将看到坐标会实时更新。

Blazor 支持大量的 EventArgs 对象,但最常用的 EventArgs 如下表所示:

您可以在微软 Blazor 文档页面[2]上看到 EventArgs 的完整列表。

在 Blazor 事件中使用 Lambda 表达式

Blazor 还支持将 Lambda 表达式作为委托事件处理程序。您应当只在简单的用例中使用这些表达式,如果有很多的代码要执行,应避免使用 Lambda 表达式。让我们修改一下前面的 Calculator 示例,这次使用 Lambda 表达式替代上面的 Calculate 和 Clear 方法。

@page "/calculator"
<h3>Calculator</h3>
<div class="form-group"><label for="number1">Number 1</label><input type="number" class="form-control" id="number1" @bind="number1">
</div>
<div class="form-group"><label for="number2">Number 2</label><input type="number" class="form-control" id="number2" @bind="number2">
</div>
<div class="form-group"><label><b>Total: </b>@total</label>
</div><button class="btn btn-primary" @onclick="@(e => total = number1 + number2)">Calculate</button>
<button class="btn btn-secondary" @onclick="@(e => total = number1 = number2 = 0)">Clear</button>@code {private int number1 = 0;private int number2 = 0;private int total = 0; 
}

向事件处理程序传递附加参数

有时,我们希望根据每个应用程序的需要向事件处理程序传递额外的参数。例如,在一个循环中,您可能希望将循环迭代索引号传递给事件参数,以便您知道此事件处理程序是针对循环中的哪一项执行的。另一个简单的例子是,从两个或多个控件调用相同的事件处理程序,并传递控件的引用以处理事件。让我们用一个基础的例子来介绍一下这个概念。依照下面的代码片段再次修改 Calculator 的代码。

<div class="form-group"><label for="number1">Number 1</label><input type="number" class="form-control" id="number1" @bind="number1">
</div><div class="form-group"><label for="number2">Number 2</label><input type="number" class="form-control" id="number2" @bind="number2">
</div><div class="form-group"><label><b>Total: </b>@total</label>
</div><button class="btn btn-primary" @onclick="@(e => Calculate(e, 1))">Add</button>
<button class="btn btn-primary" @onclick="@(e => Calculate(e, 2))">Subtract</button><button class="btn btn-secondary" @onclick="Clear">Clear</button>@code {private int number1 = 0;private int number2 = 0;private int total = 0;private void Calculate(MouseEventArgs e, int buttonType){switch (buttonType){case 1:total = number1 + number2;break;case 2:total = number1 - number2;break;}}private void Clear(){number1 = 0;number2 = 0;total = 0;}
}

在上面代码片段中,重要的两行如下,我将一个附加参数传递给了 Calculate 方法,其值分别为 1 和 2

<button class="btn btn-primary" @onclick="@(e => Calculate(e, 1))">Add</button>
<button class="btn btn-primary" @onclick="@(e => Calculate(e, 2))">Subtract</button>

方法 Calculate 的代码也略有修改,因为现在它接受一个额外的参数 buttonType。在此方法中,我们根据 buttonType 参数的值进行加法或减法运算。

private void Calculate(MouseEventArgs e, int buttonType)
{switch (buttonType){case 1:total = number1 + number2;breakcase 2:total = number1 - number2;break;}
}

再次运行应用程序,并尝试点击 Add 和 Subtract 方法,您会看到相同的 Calculate 方法给了我们不同的结果。

相关阅读:

  • Blazor Server 和 WebAssembly 应用程序入门指南

  • Blazor 组件入门指南

  • Blazor 数据绑定开发指南

  • Blazor 事件处理开发指南(本文)


相关链接:

  1. https://www.ezzylearning.net/tutorial/a-developers-guide-to-blazor-event-handling A Developer’s Guide To Blazor Event Handling ↩︎

  2. https://docs.microsoft.com/zh-cn/aspnet/core/blazor/components/event-handling ASP.NET Core Blazor 事件处理 ↩︎

作者 :Waqas Anwar
译者 :技术译民
出品 :技术译站(https://ITTranslator.cn/)

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/300200.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

android 开源组件合集-UI篇(2013-11-07更新)

其实也算不上合集,只是将我经常用到的部分整理一下,如果您有好东西,也可以留言补充 1.actionbar http://actionbarsherlock.com/ https://github.com/JakeWharton/ActionBarSherlock (推荐) 2.下拉刷新pulltorefresh https://github.com/chrisbanes/Android-PullToRefresh 支持…

改变世界的5大常数,学过数学的人,这一辈子都不会忘记!

全世界只有3.14 % 的人关注了青少年数学之旅何谓数学&#xff1f;数学家Eduardo曾这样回答“数学是永恒&#xff0c;是真理&#xff0c;是一切的答案。”回首往昔数学始终伴随我们左右纵横交错的几何、繁琐复杂的运算难以求解的方程、无从下手的猜想......尽管在数学道路上有多…

创维linux进入工厂模式,创维电视怎么进入工厂模式?

满意答案zrwemshwt54推荐于 2019.11.03创维彩电进入与退出工厂模式方法的汇总一&#xff0e; D系列5D01机芯&#xff1a;进入&#xff1a;在遥控器屏显键的正下方&#xff0c;加装一个按键(SERVICE键)&#xff0c;按该键即可进入工厂模式。退出&#xff1a; 按遥控器上的TV/AV键…

收到在微软商店购买的商品

今天收到了在微软商店购买的商品&#xff0c;送货速度真快&#xff0c;20号下的订单&#xff0c;今天就拿到了&#xff0c;这么快就从美国通过UPS快递到国内&#xff0c;现在的物流越来越发达了。我购买的商品是&#xff1a;1、WM USB Powered Speakers(USB扬声器)2、LifeCam V…

[导入]纹理拼接后的Wrap寻址

拼接后的纹理:正常的草地(不进行WRAP寻址):文章来源:http://blog.csdn.net/xoyojank/archive/2008/11/03/3212425.aspx转载于:https://www.cnblogs.com/xoyojank/archive/2008/11/04/1343671.html

自定义EventSource(一)EventCounter

之前的Counters都是系统内置的&#xff0c;我们只需在进程外&#xff0c;或进程内采集&#xff0c;然后交给专门的展示指标工具即可。本篇说一下自定义EventSource&#xff0c;来采集自己业务中&#xff0c;或自己产品中的指标收集方式。自定义EventSource是以EventCounters作为…

看完这些自动化原理图,有一种豁然开朗的感觉

全世界只有3.14 % 的人关注了青少年数学之旅机械动态图有的可以洞察工作原理&#xff0c;有的可以洞察结构&#xff0c;有的可以表达工作过程&#xff0c;不学机械的也能看得懂&#xff01;今天的动态图总有一些你没有见过&#xff0c;相当棒&#xff01;一、机械原理篇球齿机机…

编程之美 set 1 不要被阶乘吓倒

总结 1. 使用加法解决指数问题时, 可用背包问题的变形 2. 题目用到的公式和求解 1~N 中 1 出现的次数的公式类似 题目 1. 给定一个整数 N, 那么 N 的阶乘 N! 末尾有多少个 0 呢 2. 求解 N! 的二进制表示中最低位 1 的位置 思路 1. 第一道题相当于求解 N! 分别是 2^a 和 5 ^b, 第…

apache weblogic ssl linux,apache基于ssl配置weblogic(完结篇)

眼睛基本已经无大碍。今天使用apache连接weblogic&#xff0c;并使用ssl&#xff0c;终于完成&#xff0c;最终选用的方式是前端使用apache来进行ssl处理&#xff0c;weblogic只负责相关的业务处理。在apache一边&#xff0c;载入mod_ssl.so、mod_rewrite.so和mod_wl.so&#x…

×××祥解及其配置示例

转载于:https://blog.51cto.com/yaoyao/21464

动态的管理ASP.NET DataGrid数据列【转载】

在ASP.NET的DataGrid数据显示控件编程中&#xff0c;我们有几种方式可以增加DataGrid columns。其中最常见的方法是在web forms设计器中增加&#xff0c;通过在控件工具箱中拖访DataGrid控件到web设计页面&#xff0c;然后在属性生成器中增加Columns列;还有一种方式就是在HTML视…

MTD/MT/MDD/MD以及LIB/DLL之间的一些联系和问题

这个话题要从哪里说起呢。博主小白一个&#xff0c;最近调试程序时(WIN-MSVC)连一些基本问题都没弄懂&#xff0c;本着遇见问题一定要解决的原则&#xff0c;下面来说下MTD/MT/MDD/MD以及LIB/DLL之间的一些联系和问题&#xff1a;一 动态库DLL 静态库LIBMSVC中工程只有三种类型…

WPF开源项目:AIStudio.Wpf.AClient

介绍Wpf客户端&#xff0c;AIStudio.Wpf.AClient软件架构本框架使用Prism做MVVM&#xff0c;优点咱就不说了&#xff0c;主要了容器注入&#xff0c;消息和DI&#xff0c;比自己写省很多事。网上有很多标准的MVVM的使用方法&#xff0c;但是没有形成一个系统级的框架。本框架从…

有一说一,确实。。 | 今日最佳

全世界只有3.14 % 的人关注了青少年数学之旅来源微博 月刊勇者KuMa君

linux一键启动,Linux一键启动、停止、重启Tomcat sh脚本

使用方式sh service-tomcat.sh {start|stop|restart} {si|cas|fr|all}#使用过程总配置一下即可属性名字#1、COMMANDPREFIX#2、APPS#3、APPS2#4、NAMES############################ 统一启动停止前缀 begin# 统一启动停止前缀 模块名称 tomcat7_si_20080COMMANDPREFIX"to…

jquery技巧总结

一、简介1.1、概述随着WEB2.0及ajax思想在互联网上的快速发展传播&#xff0c;陆续出现了一些优秀的Js框架&#xff0c;其中比较著名的有Prototype、YUI、jQuery、mootools、Bindows以及国内的JSVM框架等&#xff0c;通过将这些JS框架应用到我们的项目中能够使程序员从设计和书…

另一种阶乘问题

大家都知道阶乘这个概念&#xff0c;举个简单的例子&#xff1a;5&#xff01;1*2*3*4*5.现在我们引入一种新的阶乘概念&#xff0c;将原来的每个数相乘变为i不大于n的所有奇数相乘例如&#xff1a;5!!1*3*5.现在明白现在这种阶乘的意思了吧&#xff01; 现在你的任务是求出1!!…

让 Hangfire 使用 MongoDB 存储

MongoDB 支持Hangfire库。通过使用这个库&#xff0c;您可以将所有作业信息存储在 MongoDB 中。要安装 Hangfire MongoDB Storage&#xff0c;请在 Nuget 包管理器控制台中运行以下命令&#xff1a;PM> Install-Package Hangfire.Mongopublic void ConfigureServices(IServi…

颠覆认知!关于c²= b² + a²,你不知道的N个事实

全世界只有3.14 % 的人关注了青少年数学之旅数是什么&#xff1f;毕达哥拉斯会告诉你&#xff0c;数是众神之母&#xff0c;万物之源——节选自《数学之旅闪耀人类的54个数学家》一般人看来&#xff0c;勾股定理只存在于特定的三角形或几何图形中。但实际上&#xff0c;绝大多数…

Win2003 Server安全配置完整篇

Win2003 Server安全配置完整篇一、先关闭不需要的端口   我比较小心&#xff0c;先关了端口。只开了3389 21 80 1433有些人一直说什么默认的3389不安全&#xff0c;对此我不否认&#xff0c;但是利用的途径也只能一个一个的穷举爆破&#xff0c;你把帐号改 了密码设置为十五六…