Blazor组件事件处理功能

 更新时间:2022年01月29日 11:12:27   作者:痕迹g  
这篇文章介绍了Blazor组件的事件处理功能,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

Blazor的组件当中, 提供了事件处理功能, 这点类似于使用客户端(Winform/Wpf)开发, 经常用到的一些类似: 按钮(Button), 输入框(TextBox) 用到的一些事件, 例如Click、DoubleClick、TextChanged 等等事件允许我们在后台代码当中进行处理相应的逻辑。

介绍事件

在Razor组件中, 同样提供了事件处理功能。对于具有委托类型值且名为 @on {EVENT}(例如 @onclick)的 HTML 元素特性,Razor 组件将该特性的值视为事件处理程序。

调用lamda表达式

下面的例子中:

Input输入框,添加了一个文本改变事件, 然后使用@前缀,添加了一个lamda的表达式,输出一段字符串 "Hello",

对于button而言,添加了一个 onclick事件。

    <input @onchange="@(()=>Console.WriteLine("Hello"))" />
    <button @onclick="@(()=>Console.WriteLine("Hello"))" />

使用code {} 方法

我们同样,可以在code代码块当中, 添加C#的方法, 然后在UI元素当中直接应用到我们的方法名即可。

例: 下面演示了一个button按钮的onclick事件绑定到c#的方法当中, 当点击按钮的事件, 将触发绑定的c#代码方法:

    <button @onclick="Show" />
    @code
{
    public void Show()
    {
       //当按钮被点击, 将执行下面代码
    }
}

异步的方法

事件处理同时也支持异步的方法, 返回Task

     public async Task Show()
    {
       //当按钮被点击, 将执行下面代码
    }

事件参数的方法

如果需要在方法当中处理UI当中的一些事件参数, 则可以通过方法添加事件参数即可, 如下所示:

@code{
    public async Task Show(MouseEventArgs  e)
    {
        //...
    }
}

事件参数列表

事件参数的方法(重载)

当同一个UI元素绑定了一个方法, 但是方法具备重载时, 需要我们在UI元素当中明确调用的方法, 否则编译器无法识别使用哪个方法。

<button @onclick="@(e=>Show(e))" />  //调用带事件参数的方法
<button @onclick="@(()=>Show())" />  //调用不带事件参数的方法
@code
{
    //不带事件参数的方法
    public void Show()
    {

    }

    //带事件参数的方法
    public void Show(MouseEventArgs e)
    {

    }
}

在默认的情况下, 我们如果只编写一个事件触发的方法, 并且明确它是否有参数, 在UI元素绑定方法上, 我们都无需传递参数。

    <button @onclick="@Show" />  
@code
{
    public void Show(MouseEventArgs e)
    {
         //当button按钮被点击, 会自动将事件参数传递给e
    }
}

到此这篇关于Blazor组件事件处理功能的文章就介绍到这了。希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

相关文章

  • asp.net下SQLite(轻量级最佳数据库) 原理分析和开发应用

    asp.net下SQLite(轻量级最佳数据库) 原理分析和开发应用

    SQLite是一个开源的嵌入式关系数据库,它在2000年由D. Richard Hipp发布,它的减少应用程序管理数据的开销,SQLite可移植性好,很容易使用,很小,高效而且可靠
    2011-10-10
  • ASP.NET中HyperLink超链接控件的使用方法

    ASP.NET中HyperLink超链接控件的使用方法

    本文主要介绍HyperLink控件的基础用法以及在Repeater中绑定数据的一些技巧,希望能帮到大家。
    2016-04-04
  • IIS7 应用程序池的 托管管道模式与集成模式小结

    IIS7 应用程序池的 托管管道模式与集成模式小结

    而 IIS 7 完全整合 .NET 之后,架构的处理顺序有了很大的不同(如下图),最主要的原因就是 ASP.NET 从 IIS 插件(ISAPI extension)的角色,进入了 IIS 核心,而且也能以 ASP.NET 模块负责处理 IIS 7 的诸多类型要求。
    2011-02-02
  • 检测含有中文字符串的实际长度

    检测含有中文字符串的实际长度

    检测含有中文字符串的实际长度...
    2006-08-08
  • .Net行为型设计模式之访问者模式(Visitor)

    .Net行为型设计模式之访问者模式(Visitor)

    这篇文章介绍了.Net行为型设计模式之访问者模式(Visitor),文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-05-05
  • ASP.NET在VS2022中使用Dispose释放资源实例

    ASP.NET在VS2022中使用Dispose释放资源实例

    这篇文章介绍了ASP.NET在VS2022中使用Dispose释放资源实例,文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2021-11-11
  • WPF中Style样式及其触发器

    WPF中Style样式及其触发器

    这篇文章介绍了WPF中Style样式及其触发器,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2022-01-01
  • 部署ASP.NET Core程序到Windows系统

    部署ASP.NET Core程序到Windows系统

    这篇文章介绍了部署ASP.NET Core程序到Windows系统的方法,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2022-03-03
  • .NET 6更新使.NET生态系统蜕变

    .NET 6更新使.NET生态系统蜕变

    微软正式发布.NET最新长期支持版本.NET 6,这个版本的更新重点,除了C#和F#都有许多语言功能改进之外,.NET 6终于集大成,成为跨浏览器、云计算、桌面、物联网和移动应用程序的统一平台,性能也获得大幅提升,并且更完整支持Arm64
    2022-01-01
  • .Net报表开发控件XtraReport介绍

    .Net报表开发控件XtraReport介绍

    这篇文章介绍了.Net报表开发控件XtraReport,文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-06-06

最新评论