日韩无码专区无码一级三级片|91人人爱网站中日韩无码电影|厨房大战丰满熟妇|AV高清无码在线免费观看|另类AV日韩少妇熟女|中文日本大黄一级黄色片|色情在线视频免费|亚洲成人特黄a片|黄片wwwav色图欧美|欧亚乱色一区二区三区

 
 
 
 

  
  
  
  
public class ToDo
  
  
  
  
{
  
  
  
  
    public string Title { get; set; }
  
  
  
  
    public int Minutes { get; set; }
  
  
  
  
}
 
 
 
 

 
 
 
 

  
  
  
  
@page "/todos"
  
  
  
  
@using BlazorEventHandlingDemo.Data
  
  
  
  
 
  
  
  
  

  
  
  
  
    
To Do List

在上面的 @code 代碼塊中，我們聲明了兩個(gè)屬性 ToDos 和 TotalMinutes。其中 ToDos 屬性存儲(chǔ)待辦事項(xiàng)的列表，TotalMinutes 存儲(chǔ)所有待辦事項(xiàng)花費(fèi)分鐘數(shù)的總和。

 
 
 
 

  
  
  
  
public List ToDos { get; set; }
  
  
  
  
public int TotalMinutes { get; set; }
 
 
 
 

接下來，我們?cè)?Blazor 組件生命周期方法之一的名為 OnInitialized 的方法中使用一些待辦事項(xiàng)對(duì)象來初始化我們的 ToDos 列表。我們還調(diào)用了 UpdateTotalMinutes 方法，該方法簡(jiǎn)單地計(jì)算 ToDos 列表中所有 ToDo 對(duì)象的 Minutes 屬性的總和。

 
 
 
 

  
  
  
  
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();
  
  
  
  
}
 
 
 
 

HTML 代碼也非常簡(jiǎn)單，我們將 TotalMinutes 屬性顯示在帶有頁(yè)面標(biāo)題的頁(yè)面頂部。

 
 
 
 

  
  
  
  
Total Minutes: @TotalMinutes
 
 
 
 

我們還在頁(yè)面上生成了一個(gè) HTML 表格，接下來的 foreach 循環(huán)遍歷 ToDos 列表并渲染一個(gè)名為 ToDoItem 的子組件，我們還使用其 Item 屬性將每個(gè) ToDo 對(duì)象傳入子組件中。

 
 
 
 

  
  
  
  
@foreach (var todo in ToDos)
  
  
  
  
{
  
  
  
  
    
  
  
  
  
}
 
 
 
 

讓我們?cè)?Shared 文件夾中創(chuàng)建一個(gè)子組件 ToDoItem.razor 并在其中添加以下代碼。該子組件有一個(gè) Item 屬性(我們?cè)诟附M件的 foreach 循環(huán)中設(shè)置了屬性)。該子組件簡(jiǎn)單地使用 元素生成一個(gè)表格行，并在表格單元格中顯示 Title 和 Minutes 屬性。

 
 
 
 

  
  
  
  
@using BlazorEventHandlingDemo.Data
  
  
  
  

  
  
  
  
    @Item.Title
  
  
  
  
    @Item.Minutes
  
  
  
  
    
  
  
  
  
       
  
  
  
  
            + Add Minutes
  
  
  
  
        
  
  
  
  
    
  
  
  
  

  
  
  
  
 
  
  
  
  
@code {
  
  
  
  
    [Parameter]
  
  
  
  
    public ToDo Item { get; set; }
  
  
  
  
}
 
 
 
 

運(yùn)行該應(yīng)用程序，您會(huì)看到一個(gè)類似于如下內(nèi)容的頁(yè)面：

如果此時(shí)您點(diǎn)擊子組件中的 Add Minutes 按鈕，則不會(huì)有任何反應(yīng)，因?yàn)槲覀冞€沒有將 click 事件與 Add Minutes 按鈕關(guān)聯(lián)起來。讓我們更新一下 Add Minutes 按鈕的代碼，添加調(diào)用 AddMinute 方法的 @onclick 特性。

 
 
 
 

  
  
  
  

  
  
  
  
    + Add Minutes
  
  
  
  

 
 
 
 

當(dāng)用戶每次點(diǎn)擊 Add Minutes 按鈕時(shí)，事件處理方法 AddMinute 簡(jiǎn)單地將 Minutes 屬性加 1。

 
 
 
 

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

再次運(yùn)行應(yīng)用程序并嘗試點(diǎn)擊每個(gè)待辦事項(xiàng)的 Add Minutes 按鈕。您將注意到每個(gè)待辦事項(xiàng)顯示的分鐘數(shù)會(huì)增加，但是頂部的總分鐘數(shù)屬性將保持不變。這是由于 TotalMinutes 屬性是在父組件中計(jì)算的，而父組件并不知道子組件中的 Minutes 屬性增加了。

讓我們使用上面提到的步驟在我們的示例中改進(jìn)一下子組件到父組件的通信，以便每次增加子組件中的 Minutes 時(shí)，能夠相應(yīng)地更新父組件的 UI。

步驟1：在子組件中聲明一個(gè) EventCallback 或 EventCallback 委托

第一步是在我們的子組件中聲明 EventCallback 委托。我們聲明一個(gè)委托 OnMinutesAdded，并使用 MouseEventArgs 作為 T，因?yàn)樗梢詾槲覀兲峁┯嘘P(guān)按鈕點(diǎn)擊事件的額外信息。

 
 
 
 

  
  
  
  
[Parameter]
  
  
  
  
public EventCallback OnMinutesAdded { get; set; }
 
 
 
 

步驟2：在父組件中附加一個(gè)到子組件的 EventCallback 或 EventCallback 的回調(diào)方法

在這一步中，我們需要向在前面的步驟 1 中聲明的子組件的 EventCallback 委托 OnMinutesAdded 附加一個(gè)回調(diào)方法。

在本例中我們使用的回調(diào)方法是 OnMinutesAddedHandler，該方法簡(jiǎn)單地調(diào)用同一個(gè) UpdateTotalMinutes 方法，更新 TotalMinutes 屬性。

 
 
 
 

  
  
  
  
public void OnMinutesAddedHandler(MouseEventArgs e)
  
  
  
  
{
  
  
  
  
    UpdateTotalMinutes();
  
  
  
  
}
 
 
 
 

步驟3：當(dāng)子組件需要與父組件通信時(shí)，使用 InvokeAsync(Object) 或 InvokeAsync(T) 方法調(diào)用父組件的回調(diào)方法。

在這一步中，我們需要調(diào)用父組件中的回調(diào)方法，因?yàn)槲覀兿Ｍ看斡脩酎c(diǎn)擊 Add Minute 按鈕時(shí)都會(huì)更新父組件 UI，所以最好的調(diào)用位置是在 AddMinute 方法中。

 
 
 
 

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

這就是在 Blazor 中實(shí)現(xiàn)從子組件到父組件通信我們所要做的所有事情。以下是子組件 ToDoItem.razor 的完整代碼：

ToDoItem.razor

 
 
 
 

  
  
  
  
@using BlazorEventHandlingDemo.Data
  
  
  
  

  
  
  
  
    @Item.Title
  
  
  
  
    @Item.Minutes
  
  
  
  
    
  
  
  
  
        
  
  
  
  
            + Add Minutes
  
  
  
  
        
  
  
  
  
    
  
  
  
  

  
  
  
  
 
  
  
  
  
@code {
  
  
  
  
 
  
  
  
  
  [Parameter]
  
  
  
  
  public ToDo Item { get; set; }
  
  
  
  
 
  
  
  
  
  [Parameter]
  
  
  
  
  public EventCallback OnMinutesAdded { get; set; }
  
  
  
  
 
  
  
  
  
  public async Task AddMinute(MouseEventArgs e)
  
  
  
  
  {
  
  
  
  
    Item.Minutes += 1;
  
  
  
  
    await OnMinutesAdded.InvokeAsync(e);
  
  
  
  
  }
  
  
  
  
}
 
 
 
 

以下是父組件 ToDoList.razor 的完整代碼：

ToDoList.razor

 
 
 
 

  
  
  
  
@page "/todos"
  
  
  
  
@using BlazorEventHandlingDemo.Data
  
  
  
  
 
  
  
  
  

  
  
  
  
    
To Do List