(13/30)Blazor系列：EventCallback, event from child to parent

沙漠尽头的狼

发布于 2021-12-21 18:10:48

1.7K0

文章被收录于专栏：Dotnet9Dotnet9

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