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

联系请关注微信公众号：Dotnet9

创建于2021-12-16 20:48:19| StrayaWorker| 我要编辑、留言

Ai摘要

摘要由站长通过智能技术生成

目前的 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>。