(13/30)大家一起學Blazor：EventCallback, event from child to parent

目前的 4 篇文章是來自我們寫好的假資料，但正常來說不會這樣做，而是有個按鈕讓用戶點擊了之後，增加或減少文章的數量。

增加的按鈕會放在<Blog>，點擊了「增加」按鈕產生一則新的 Post 供用戶輸入，再讓用戶點擊「確認」按鈕儲存文章。

刪除的按鈕則可以放在<Blog>，再在<Post>加入 checkbox，讓用戶自己勾選要刪除哪些 Post；或是放在<Post>，點擊刪除按鈕就刪除該篇文章。

新增按鈕很簡單，只要在<MyButton>加上@onclick事件即可，開始之前，先將版面稍作修改，順便把FontSizeStyle移除。

Blog.razor

@page "/Blog" @inherits BlogBase @if (Blog == null) {
<p>Loading...</p>
} else {
<div class="container">
  <div class="row">
    <div class="col pl-0">
      <label>部落格名稱</label>
      <input @bind-value="Blog.Name" class="form-control w-25" />
      <MyButton
        value="Add"
        class="btn btn-info my-2"
        type="button"
        @onclick="Add"
      />
    </div>
  </div>
  <div class="row">
    @if (Blog.Posts != null) { foreach (var post in Blog.Posts) {
    <div class="col-md-3 border rounded p-3 mr-2 mb-2 w-25">
      <CascadingValue Value="ColorStyle" Name="ColorStyle" IsFixed="true">
        <Post Post="post" />
      </CascadingValue>
    </div>
    } }
  </div>
</div>
}

C#部分則加入Add()方法，原來LoadData()的日誌刪除。

BlogBase.razor.cs

using BlazorServer.Models;
using Microsoft.AspNetCore.Components;

namespace BlazorServer.Pages;

public class BlogBase : ComponentBase
{
	public BlogModel? Blog { get; set; }

	public string? ColorStyle { get; set; } = "color: goldenrod";
	public string? FontSizeStyle { get; set; } = "color: goldenrod";

	protected override Task OnInitializedAsync()
	{
		LoadData();
		return base.OnInitializedAsync();
	}

	private void LoadData()
	{
		Blog = new BlogModel
		{
			Id = 1,
			Name = "我的部落格",
			Posts = new List<PostModel>(),
			CreateDateTime = new DateTime(2021, 12, 14, 23, 46, 59)
		};
	}

	protected void Add()
	{
		Blog?.Posts?.Add(new PostModel());
	}
}

接著點擊 Add 按鈕，就可以看到文章數量增加了。

接著來做 Delete 功能，在Post.razor加入 Delete 按鈕。

但問題來了，當我點擊 Delete 按鈕，<Blog>怎麼知道我刪除的是哪一條 Post？這時候就需要Id可以識別，於是加入一個私有變數_postId，每次點擊Add()都+1，正常來說 PostId 會跟著 Post 而不是由 Blog 產生，不過因為還沒接觸到資料庫，所以先這樣將就，後面連接資料庫後就會改變。

為了驗證是否正確，刪除原來Post.razor註解的 Post.Id，加入新樣式的 Post.Id，可以看到沒有問題。

現在有了識別 Id，又產生了新問題，要怎麼讓<Blog>收到Id？目前 Id 由<Blog>產生，所以沒這問題，等後面 Id 由資料庫產生後，<Blog>就不會知道 Id 了。前面說的都是從父元件傳遞資料到子元件的方法，我們現在要從子元件傳資料到父元件，有辦法做到反向傳回去嗎？

有的，那就是EventCallback，但是要把Delete改成<input>而非<MyButton>，因為EventCallback是由子元件傳向父元件，如果用<MyButton>，Id 的流向就必須先這樣<Blog> => <Post> => <MyButton>，接著再用EventCallback反向<MyButton> => <Post> => <Blog>，實在太麻煩了。

先把 Delete 按鈕改成<input>，加入@onclick="ReturnPostId"。

接著在PostBase.razor.cs定義類型為EventCallback<int>的屬性 GetPostId，記住一定要加上[Parameter]特性，因為這要被<Blog>呼叫。然後完整定義ReturnPostId()方法，裡面做的就是GetPostId.InvokeAsync(Post!.PostId);，當外部傳來的GetPostId被觸發時，就將Post.PostId傳給父元件也就是<Blog>。