文章详情

登录

短信预约-IT技能 免费直播动态提醒

选择考试省份

  • 北京
  • 上海
  • 天津
  • 重庆
  • 河北
  • 山东
  • 辽宁
  • 黑龙江
  • 吉林
  • 甘肃
  • 青海
  • 河南
  • 江苏
  • 湖北
  • 湖南
  • 江西
  • 浙江
  • 广东
  • 云南
  • 福建
  • 海南
  • 山西
  • 四川
  • 陕西
  • 贵州
  • 安徽
  • 广西
  • 内蒙
  • 西藏
  • 新疆
  • 宁夏
  • 兵团

请输入下面的图形验证码

提交验证

短信预约提醒成功

Blazor 组件之间使用 EventCallback 进行通信

2024-12-03 00:00

关注

本文转载自微信公众号「技术译站」，作者技术译民。转载本文请联系技术译站公众号。

Blazor 应用程序是相互交互的多个 Blazor 组件的集合，我们可以在其他父组件中使用子组件。在实际的应用程序中，将数据或事件信息从一个组件传递到另一组件是一种十分常见的场景。您可能会有一个页面，其中一个组件中发生的用户操作需要更新其他组件中的某些 UI。通常使用 EventCallback 委托来处理这种类型的通信。在本教程中，我将介绍如何使用 EventCallback 在父组件和子组件之间进行通信。

下面是使用 EventCallback 从子组件到父组件进行通信所涉及的通用步骤。

  1. 在子组件中声明一个 EventCallback 或 EventCallback 委托
  2. 在父组件中附加一个到子组件的 EventCallback 或 EventCallback 的回调方法
  3. 当子组件想要与父组件通信时，可以使用以下方法之一调用父组件的回调方法。

为了理解上述步骤，让我们创建一个简单的待办事项列表(To Do List)示例。首先，在 Data 文件夹中创建以下 ToDo.cs 类。这是一个简单类，用于存储每个待办事项的 Title 和 Minutes 属性。Minutes 属性指定完成特定待办事项所需的时间。

ToDo.cs

  1. public class ToDo 
  2. { 
  3.     public string Title { get; set; } 
  4.     public int Minutes { get; set; } 
  5. } 

在项目中添加以下 ToDoList.razor 组件，并在其中编写以下代码：

ToDoList.razor

  1. @page "/todos" 
  2. @using BlazorEventHandlingDemo.Data 
  3.   
  4. "row"> 
  5.     "col">
    To Do List
 
  •     "col">"float-right">Total Minutes: @TotalMinutes
    •  
  •  
  •   
  •  
  • <table class="table"> 
  •      
  •         Title 
  •         Minutes 
  •          
  •      
  •     @foreach (var todo in ToDos) 
  •     { 
  •         "todo" /> 
  •     } 
  • table> 
  •   
  • @code { 
  •   
  •     public List ToDos { get; set; } 
  •     public int TotalMinutes { get; set; } 
  •   
  •     protected override void OnInitialized() 
  •     { 
  •         ToDos = new List() 
  •         { 
  •                 new ToDo() { Title = "Analysis", Minutes = 40 }, 
  •                 new ToDo() { Title = "Design", Minutes = 30 }, 
  •                 new ToDo() { Title = "Implementation", Minutes = 75 }, 
  •                 new ToDo() { Title = "Testing", Minutes = 40 } 
  •         }; 
  •   
  •         UpdateTotalMinutes(); 
  •     } 
  •   
  •     public void UpdateTotalMinutes() 
  •     { 
  •         TotalMinutes = ToDos.Sum(x => x.Minutes); 
  •     } 
  • } 
    •

    在上面的 @code 代码块中，我们声明了两个属性 ToDos 和 TotalMinutes。其中 ToDos 属性存储待办事项的列表，TotalMinutes 存储所有待办事项花费分钟数的总和。

    1. public List ToDos { get; set; } 
    2. public int TotalMinutes { get; set; } 

    接下来，我们在 Blazor 组件生命周期方法之一的名为 OnInitialized 的方法中使用一些待办事项对象来初始化我们的 ToDos 列表。我们还调用了 UpdateTotalMinutes 方法，该方法简单地计算 ToDos 列表中所有 ToDo 对象的 Minutes 属性的总和。

    1. protected override void OnInitialized() 
    2. { 
    3.     ToDos = new List() 
    4.     { 
    5.             new ToDo() { Title = "Analysis", Minutes = 40 }, 
    6.             new ToDo() { Title = "Design", Minutes = 30 }, 
    7.             new ToDo() { Title = "Implementation", Minutes = 75 }, 
    8.             new ToDo() { Title = "Testing", Minutes = 40 } 
    9.     }; 
    10.   
    11.     UpdateTotalMinutes(); 
    12. } 

    HTML 代码也非常简单，我们将 TotalMinutes 属性显示在带有页面的页面顶部。

    1. "float-right">Total Minutes: @TotalMinutes 

    我们还在页面上生成了一个 HTML 表格，接下来的 foreach 循环遍历 ToDos 列表并渲染一个名为 ToDoItem 的子组件，我们还使用其 Item 属性将每个 ToDo 对象传入子组件中。

    1. @foreach (var todo in ToDos) 
    2. { 
    3.     "todo" /> 
    4. } 

    让我们在 Shared 文件夹中创建一个子组件 ToDoItem.razor 并在其中添加以下代码。该子组件有一个 Item 属性(我们在父组件的 foreach 循环中设置了属性)。该子组件简单地使用 元素生成一个表格行，并在表格单元格中显示 Title 和 Minutes 属性。

    1. @using BlazorEventHandlingDemo.Data 
    2.  
    3.     @Item.Title 
    4.     @Item.Minutes 
    5.      
    6.        "button" class="btn btn-success btn-sm float-right"> 
    7.             + Add Minutes 
    8.          
    9.      
    10.  
    11.   
    12. @code { 
    13.     [Parameter] 
    14.     public ToDo Item { get; set; } 
    15. } 

    运行该应用程序，您会看到一个类似于如下内容的页面：

    如果此时您点击子组件中的 Add Minutes 按钮，则不会有任何反应，因为我们还没有将 click 事件与 Add Minutes 按钮关联起来。让我们更新一下 Add Minutes 按钮的代码，添加调用 AddMinute 方法的 @onclick 特性。

    1. "button" class="btn btn-success btn-sm float-right" @onclick="AddMinute"> 
    2.     + Add Minutes 
    3.  

    当用户每次点击 Add Minutes 按钮时，事件处理方法 AddMinute 简单地将 Minutes 属性加 1。

    1. public async Task AddMinute(MouseEventArgs e) 
    2. { 
    3.     Item.Minutes += 1;  
    4. } 

    再次运行应用程序并尝试点击每个待办事项的 Add Minutes 按钮。您将注意到每个待办事项显示的分钟数会增加，但是顶部的总分钟数属性将保持不变。这是由于 TotalMinutes 属性是在父组件中计算的，而父组件并不知道子组件中的 Minutes 属性增加了。

    让我们使用上面提到的步骤在我们的示例中改进一下子组件到父组件的通信，以便每次增加子组件中的 Minutes 时，能够相应地更新父组件的 UI。

    步骤1：在子组件中声明一个 EventCallback 或 EventCallback 委托

    第一步是在我们的子组件中声明 EventCallback 委托。我们声明一个委托 OnMinutesAdded，并使用 MouseEventArgs 作为 T，因为它可以为我们提供有关按钮点击事件的额外信息。

    1. [Parameter] 
    2. public EventCallback OnMinutesAdded { get; set; } 

    步骤2：在父组件中附加一个到子组件的 EventCallback 或 EventCallback 的回调方法

    在这一步中，我们需要向在前面的步骤 1 中声明的子组件的 EventCallback 委托 OnMinutesAdded 附加一个回调方法。

    1. "todo" OnMinutesAdded="OnMinutesAddedHandler" /> 

    在本例中我们使用的回调方法是 OnMinutesAddedHandler，该方法简单地调用同一个 UpdateTotalMinutes 方法，更新 TotalMinutes 属性。

    1. public void OnMinutesAddedHandler(MouseEventArgs e) 
    2. { 
    3.     UpdateTotalMinutes(); 
    4. } 

    步骤3：当子组件需要与父组件通信时，使用 InvokeAsync(Object) 或 InvokeAsync(T) 方法调用父组件的回调方法。

    在这一步中，我们需要调用父组件中的回调方法，因为我们希望每次用户点击 Add Minute 按钮时都会更新父组件 UI，所以最好的调用位置是在 AddMinute 方法中。

    1. public async Task AddMinute(MouseEventArgs e) 
    2. { 
    3.     Item.Minutes += 1; 
    4.     await OnMinutesAdded.InvokeAsync(e); 
    5. } 

    这就是在 Blazor 中实现从子组件到父组件通信我们所要做的所有事情。以下是子组件 ToDoItem.razor 的完整代码：

    ToDoItem.razor

    1. @using BlazorEventHandlingDemo.Data 
    2.  
    3.     @Item.Title 
    4.     @Item.Minutes 
    5.      
    6.         "button" class="btn btn-success btn-sm float-right" @onclick="AddMinute"> 
    7.             + Add Minutes 
    8.          
    9.      
    10.  
    11.   
    12. @code { 
    13.   
    14.   [Parameter] 
    15.   public ToDo Item { get; set; } 
    16.   
    17.   [Parameter] 
    18.   public EventCallback OnMinutesAdded { get; set; } 
    19.   
    20.   public async Task AddMinute(MouseEventArgs e) 
    21.   { 
    22.     Item.Minutes += 1; 
    23.     await OnMinutesAdded.InvokeAsync(e); 
    24.   } 
    25. } 

    以下是父组件 ToDoList.razor 的完整代码：

    ToDoList.razor

    1. @page "/todos" 
    2. @using BlazorEventHandlingDemo.Data 
    3.   
    4. "row"> 
    5.     "col">
      To Do List
       
    6.     "col">"float-right">Total Minutes: @TotalCount 
    7.  
    8.   
    9.  
    10. <table class="table"> 
    11.      
    12.         Title 
    13.         Minutes 
    14.          
    15.      
    16.     @foreach (var todo in ToDos) 
    17.     { 
    18.         "todo" OnMinutesAdded="OnMinutesAddedHandler" /> 
    19.     } 
    20. table> 
    21.   
    22. @code { 
    23.   
    24.     public List ToDos { get; set; } 
    25.     public int TotalCount { get; set; } 
    26.   
    27.     protected override void OnInitialized() 
    28.     { 
    29.         ToDos = new List() 
    30.         { 
    31.                 new ToDo() { Title = "Analysis", Minutes = 40 }, 
    32.                 new ToDo() { Title = "Design", Minutes = 30 }, 
    33.                 new ToDo() { Title = "Implementation", Minutes = 75 }, 
    34.                 new ToDo() { Title = "Testing", Minutes = 40 } 
    35.         }; 
    36.   
    37.         UpdateTotalMinutes(); 
    38.     } 
    39.   
    40.     public void UpdateTotalMinutes() 
    41.     { 
    42.         TotalCount = ToDos.Sum(x => x.Minutes); 
    43.     } 
    44.   
    45.     public void OnMinutesAddedHandler(MouseEventArgs e) 
    46.     { 
    47.         UpdateTotalMinutes(); 
    48.     } 
    49. } 

    在浏览器中运行应用程序，并尝试增加任一待办事项的分钟数，您会注意到父组件将自动地实时更新总分钟数。

    翻译自 Waqas Anwar 2021年3月28日的文章 《Communication between Blazor Components using EventCallback》 [1]

     

    来源：技术译站内容投诉

    免责声明：

    ① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

    ② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

    软考中级精品资料免费领

    • 2024年上半年信息系统项目管理师第二批次真题及答案解析（完整版）

      难度     813人已做
      查看

    • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

      难度     354人已做
      查看

    • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

      难度     318人已做
      查看

    • 2024年上半年软考高项第一、二批次真题考点汇总（完整版）

      难度     435人已做
      查看

    • 2024年上半年系统架构设计师考试综合知识真题

      难度     224人已做
      查看

    相关文章

    发现更多好内容

    猜你喜欢

    AI推送时光机

    Blazor 组件之间使用 EventCallback 进行通信

    后端开发BlazorEventCallback2024-12-03

    vue组件间如何进行通信

    后端开发2023-06-21

    Vue3.x使用mitt.js进行组件通信

    后端开发2024-04-02

    Angular父子组件间如何进行通信

    后端开发2024-04-02

    Vue3使用mitt进行组件通信的步骤

    后端开发2024-04-02

    Android进程间使用Intent进行通信

    后端开发2023-02-28

    Angular中父子组件间如何进行通信

    后端开发2024-04-02

    .NET 8怎么使用Blazor组件进行服务器端呈现

    后端开发2023-07-06

    Angular组件间进行通信的方法有哪些

    后端开发2023-07-04

    Android进程间如何使用Intent进行通信

    后端开发2023-07-05

    React父子组件间的通信是如何进行的

    后端开发2023-07-05

    React父子组件间的通信是怎样进行的

    后端开发2023-03-14

    vue兄弟组件间怎么进行通信？方法详解

    后端开发2023-05-14

    使用Broadcast实现Android组件间的通信

    后端开发2022-06-06

    带你了解Angular组件间进行通信的几种方法

    后端开发2023-05-14

    Vue3全局组件通信之provide/inject怎么使用

    后端开发2023-07-06

    .NET 8新预览版使用 Blazor 组件进行服务器端呈现(项目体验)

    .NET 8新预览版使用 Blazor 组件进行服务器端呈现(项目体验)
    后端开发2024-04-02

    .NET 8新预览版使用 Blazor 组件进行服务器端呈现(项目体验)

    后端开发2023-05-15

    AJAX怎么使用XML文件进行交互式通信

    后端开发2024-04-02

    python利用socket实现客户端和服务端之间进行通信

    后端开发2024-04-02
    位置：首页-资讯-后端开发
    咦！没有更多了？去看看其它编程学习网 内容吧
    首页课程
    资料下载    问答资讯