如何从嵌入的Blazor组件触发父页面（Files.razor）更新？

最直接的方案：用EventCallback实现组件回调 #

这是Blazor父子组件通信的标准实现方式，步骤清晰：

1. 给AddFile组件添加回调事件
   在AddFile.razor的@code块中声明一个EventCallback参数，用于通知父组件上传完成：

@code {
    [Parameter]
    public int ContainerID { get; set; }

    [Parameter]
    public int DocType { get; set; }

    // 定义上传完成的回调钩子
    [Parameter]
    public EventCallback OnFileUploadDone { get; set; }

    // 假设这是你的文件上传逻辑方法
    private async Task UploadFile()
    {
        // 执行实际的文件上传操作（比如调用后端API）
        // ...

        // 上传完成后触发回调，通知父页面刷新
        await OnFileUploadDone.InvokeAsync();
    }
}

2. 在Files页面绑定刷新方法
   嵌入AddFile组件时，将回调事件绑定到父页面的文件列表刷新方法，确保上传后能重新获取最新数据：

@page "/files/{ID:int}"
@inject HttpClient Http

<AddFile ContainerID="@ID" DocType="3" OnFileUploadDone="@RefreshFiles" />

<h3>文件列表</h3>
@foreach (var file in FileList)
{
    <p>@file.FileName</p>
}

@code {
    [Parameter]
    public int ID { get; set; }

    private List<FileInfo> FileList { get; set; } = new();

    protected override async Task OnInitializedAsync()
    {
        await RefreshFiles();
    }

    // 刷新文件列表的核心方法
    private async Task RefreshFiles()
    {
        // 重新从后端获取最新的文件列表
        FileList = await Http.GetFromJsonAsync<List<FileInfo>>($"api/files/{ID}");
        // 手动通知Blazor重新渲染组件
        StateHasChanged();
    }
}

复杂场景：使用全局状态容器 #

如果你的应用有多个组件需要共享文件状态（比如多页面关注文件变化），可以用全局状态容器实现：

1. 编写状态容器类

public class FileStateContainer
{
    private Dictionary<int, List<FileInfo>> _fileDictionary = new();

    // 文件列表更新的通知事件
    public event Action<int> OnFileListUpdated;

    // 更新指定容器的文件列表
    public void UpdateFileList(int containerId, List<FileInfo> newFiles)
    {
        _fileDictionary[containerId] = newFiles;
        OnFileListUpdated?.Invoke(containerId);
    }

    // 获取指定容器的文件列表
    public List<FileInfo> GetFileList(int containerId)
    {
        _fileDictionary.TryGetValue(containerId, out var files);
        return files ?? new List<FileInfo>();
    }
}

2. 注册状态容器
   在Program.cs中将状态容器注册为单例服务：

builder.Services.AddSingleton<FileStateContainer>();

3. 在AddFile组件中更新状态

@code {
    [Inject]
    private FileStateContainer FileState { get; set; }

    [Parameter]
    public int ContainerID { get; set; }

    [Parameter]
    public int DocType { get; set; }

    private async Task UploadFile()
    {
        // 执行文件上传逻辑
        // ...

        // 上传完成后拉取最新列表并更新全局状态
        var latestFiles = await Http.GetFromJsonAsync<List<FileInfo>>($"api/files/{ContainerID}");
        FileState.UpdateFileList(ContainerID, latestFiles);
    }
}

4. 在Files页面监听状态变化

@page "/files/{ID:int}"
@inject HttpClient Http
@inject FileStateContainer FileState

<AddFile ContainerID="@ID" DocType="3" />

<h3>文件列表</h3>
@foreach (var file in CurrentFiles)
{
    <p>@file.FileName</p>
}

@code {
    [Parameter]
    public int ID { get; set; }

    private List<FileInfo> CurrentFiles { get; set; } = new();

    protected override void OnInitialized()
    {
        // 订阅状态更新事件
        FileState.OnFileListUpdated += HandleFileListUpdate;
        // 初始化加载文件列表
        CurrentFiles = FileState.GetFileList(ID);
    }

    private void HandleFileListUpdate(int containerId)
    {
        // 只处理当前容器的文件更新
        if (containerId == ID)
        {
            CurrentFiles = FileState.GetFileList(ID);
            StateHasChanged();
        }
    }

    // 组件销毁时取消订阅，避免内存泄漏
    public void Dispose()
    {
        FileState.OnFileListUpdated -= HandleFileListUpdate;
    }
}

内容的提问来源于stack exchange，提问作者Josh