jsp网站开发目的及意义,网站开发和软件开发有什么区别,网络规划设计师如何复习,wordpress模板首页是哪个文件翻译自 Waqas Anwar 2021年3月28日的文章 《Communication between Blazor Components using EventCallback》 [1]Blazor 应用程序是相互交互的多个 Blazor 组件的集合#xff0c;我们可以在其他父组件中使用子组件。在实际的应用程序中#xff0c;将数据或事件信息从一个组件… 翻译自 Waqas Anwar 2021年3月28日的文章 《Communication between Blazor Components using EventCallback》 [1]Blazor 应用程序是相互交互的多个 Blazor 组件的集合我们可以在其他父组件中使用子组件。在实际的应用程序中将数据或事件信息从一个组件传递到另一组件是一种十分常见的场景。您可能会有一个页面其中一个组件中发生的用户操作需要更新其他组件中的某些 UI。通常使用 EventCallback 委托来处理这种类型的通信。在本教程中我将介绍如何使用 EventCallback 在父组件和子组件之间进行通信。下面是使用 EventCallback 从子组件到父组件进行通信所涉及的通用步骤。在子组件中声明一个 EventCallback 或 EventCallbackT 委托在父组件中附加一个到子组件的 EventCallback 或 EventCallbackT 的回调方法当子组件想要与父组件通信时可以使用以下方法之一调用父组件的回调方法。InvokeAsync(Object) – 如果使用的是 EventCallbackInvokeAsync(T) – 如果使用的是 EventCallbackT为了理解上述步骤让我们创建一个简单的待办事项列表(To Do List)示例。首先在 Data 文件夹中创建以下 ToDo.cs 类。这是一个简单类用于存储每个待办事项的 Title 和 Minutes 属性。Minutes 属性指定完成特定待办事项所需的时间。ToDo.cspublic class ToDo
{public string Title { get; set; }public int Minutes { get; set; }
}
在项目中添加以下 ToDoList.razor 组件并在其中编写以下代码ToDoList.razorpage /todos
using BlazorEventHandlingDemo.Datadiv classrowdiv classcolh3To Do List/h3/divdiv classcolh5 classfloat-rightTotal Minutes: TotalMinutes/h5/div
/divbr /
table classtabletrthTitle/ththMinutes/thth/th/trforeach (var todo in ToDos){ToDoItem Itemtodo /}
/tablecode {public ListToDo ToDos { get; set; }public int TotalMinutes { get; set; }protected override void OnInitialized(){ToDos new ListToDo(){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 存储所有待办事项花费分钟数的总和。public ListToDo ToDos { get; set; }
public int TotalMinutes { get; set; }
接下来我们在 Blazor 组件生命周期方法之一的名为 OnInitialized 的方法中使用一些待办事项对象来初始化我们的 ToDos 列表。我们还调用了 UpdateTotalMinutes 方法该方法简单地计算 ToDos 列表中所有 ToDo 对象的 Minutes 属性的总和。protected override void OnInitialized()
{ToDos new ListToDo(){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();
}
HTML 代码也非常简单我们将 TotalMinutes 属性显示在带有页面标题的页面顶部。h5 classfloat-rightTotal Minutes: TotalMinutes/h5
我们还在页面上生成了一个 HTML 表格接下来的 foreach 循环遍历 ToDos 列表并渲染一个名为 ToDoItem 的子组件我们还使用其 Item 属性将每个 ToDo 对象传入子组件中。foreach (var todo in ToDos)
{ToDoItem Itemtodo /
}
让我们在 Shared 文件夹中创建一个子组件 ToDoItem.razor 并在其中添加以下代码。该子组件有一个 Item 属性我们在父组件的 foreach 循环中设置了属性。该子组件简单地使用 tr 元素生成一个表格行并在表格单元格中显示 Title 和 Minutes 属性。ToDoItem.razorusing BlazorEventHandlingDemo.Data
trtdItem.Title/tdtdItem.Minutes/tdtdbutton typebutton classbtn btn-success btn-sm float-right Add Minutes/button/td
/trcode {[Parameter]public ToDo Item { get; set; }
}
运行该应用程序您会看到一个类似于如下内容的页面如果此时您点击子组件中的 Add Minutes 按钮则不会有任何反应因为我们还没有将 click 事件与 Add Minutes 按钮关联起来。让我们更新一下 Add Minutes 按钮的代码添加调用 AddMinute 方法的 onclick 特性。button typebutton classbtn btn-success btn-sm float-right onclickAddMinute Add Minutes
/button
当用户每次点击 Add Minutes 按钮时事件处理方法 AddMinute 简单地将 Minutes 属性加 1。public async Task AddMinute(MouseEventArgs e)
{Item.Minutes 1;
}
再次运行应用程序并尝试点击每个待办事项的 Add Minutes 按钮。您将注意到每个待办事项显示的分钟数会增加但是顶部的总分钟数属性将保持不变。这是由于 TotalMinutes 属性是在父组件中计算的而父组件并不知道子组件中的 Minutes 属性增加了。让我们使用上面提到的步骤在我们的示例中改进一下子组件到父组件的通信以便每次增加子组件中的 Minutes 时能够相应地更新父组件的 UI。§步骤1在子组件中声明一个 EventCallback 或 EventCallbackT 委托第一步是在我们的子组件中声明 EventCallbackT 委托。我们声明一个委托 OnMinutesAdded并使用 MouseEventArgs 作为 T因为它可以为我们提供有关按钮点击事件的额外信息。[Parameter]
public EventCallbackMouseEventArgs OnMinutesAdded { get; set; }
§步骤2在父组件中附加一个到子组件的 EventCallback 或 EventCallbackT 的回调方法在这一步中我们需要向在前面的步骤 1 中声明的子组件的 EventCallback 委托 OnMinutesAdded 附加一个回调方法。ToDoItem Itemtodo OnMinutesAddedOnMinutesAddedHandler /
在本例中我们使用的回调方法是 OnMinutesAddedHandler该方法简单地调用同一个 UpdateTotalMinutes 方法更新 TotalMinutes 属性。public void OnMinutesAddedHandler(MouseEventArgs e)
{UpdateTotalMinutes();
}
§步骤3当子组件需要与父组件通信时使用 InvokeAsync(Object) 或 InvokeAsync(T) 方法调用父组件的回调方法。在这一步中我们需要调用父组件中的回调方法因为我们希望每次用户点击 Add Minute 按钮时都会更新父组件 UI所以最好的调用位置是在 AddMinute 方法中。public async Task AddMinute(MouseEventArgs e)
{Item.Minutes 1;await OnMinutesAdded.InvokeAsync(e);
}
这就是在 Blazor 中实现从子组件到父组件通信我们所要做的所有事情。以下是子组件 ToDoItem.razor 的完整代码ToDoItem.razorusing BlazorEventHandlingDemo.Data
trtdItem.Title/tdtdItem.Minutes/tdtdbutton typebutton classbtn btn-success btn-sm float-right onclickAddMinute Add Minutes/button/td
/trcode {[Parameter]public ToDo Item { get; set; }[Parameter]public EventCallbackMouseEventArgs OnMinutesAdded { get; set; }public async Task AddMinute(MouseEventArgs e){Item.Minutes 1;await OnMinutesAdded.InvokeAsync(e);}
}
以下是父组件 ToDoList.razor 的完整代码ToDoList.razorpage /todos
using BlazorEventHandlingDemo.Datadiv classrowdiv classcolh3To Do List/h3/divdiv classcolh5 classfloat-rightTotal Minutes: TotalCount/h5/div
/divbr /
table classtabletrthTitle/ththMinutes/thth/th/trforeach (var todo in ToDos){ToDoItem Itemtodo OnMinutesAddedOnMinutesAddedHandler /}
/tablecode {public ListToDo ToDos { get; set; }public int TotalCount { get; set; }protected override void OnInitialized(){ToDos new ListToDo(){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(){TotalCount ToDos.Sum(x x.Minutes);}public void OnMinutesAddedHandler(MouseEventArgs e){UpdateTotalMinutes();}
}
在浏览器中运行应用程序并尝试增加任一待办事项的分钟数您会注意到父组件将自动地实时更新总分钟数。相关阅读Blazor Server 和 WebAssembly 应用程序入门指南Blazor 组件入门指南Blazor 数据绑定开发指南Blazor 事件处理开发指南Blazor 组件之间使用 EventCallback 进行通信(本文)相关链接https://www.ezzylearning.net/tutorial/communication-between-blazor-components-using-eventcallback Communication between Blazor Components using EventCallback ↩︎作者 Waqas Anwar译者 技术译民出品 技术译站https://ITTranslator.cn/
