Blazor客户端中Blazored Modal弹窗确认后UI不自动刷新问题

核心原因 #

你的代码仅调用了API删除应用，但未同步更新本地绑定的数据源列表，也未通知Blazor组件重新渲染，导致UI无法感知数据变化。

修复步骤及代码修改 #

1. 重构DeleteApplication组件：使用回调解耦，避免直接引用父组件

将子组件的删除逻辑改为通过回调通知父组件，降低耦合度：

@code {
    [CascadingParameter] BlazoredModalInstance BlazoredModal { get; set; } = default!;
    [Parameter] public ApiApplication? applicationData { get; set; }
    // 添加删除完成后的回调参数
    [Parameter] public EventCallback<ApiApplication> OnDeleteCompleted { get; set; }

    async Task Delete()
    {
        // 触发回调，通知父组件执行删除逻辑
        await OnDeleteCompleted.InvokeAsync(applicationData);
        await BlazoredModal.CloseAsync();
    }

    async Task Cancel() => await BlazoredModal.CancelAsync();
}

2. 修改父页面（APIShapes）逻辑：更新本地数据源并触发渲染

假设父页面有一个绑定到UI的应用列表ApplicationList，修改弹窗调用逻辑并添加删除后的处理：

// 父页面绑定到UI的数据源
private List<ApiApplication> ApplicationList { get; set; } = new();

private void deleteApplicationSubmit() 
{
    var parameters = new ModalParameters
    {
        { nameof(DeleteApplication.applicationData), applicationData },
        // 传递删除完成的回调
        { nameof(DeleteApplication.OnDeleteCompleted), EventCallback.Factory.Create<ApiApplication>(this, HandleDeleteCompleted) }
    };

    Modal.Show<DeleteApplication>("Are you sure you would like to delete", parameters);
}

private async Task HandleDeleteCompleted(ApiApplication? targetApp)
{
    if (targetApp == null) return;

    // 1. 调用API删除应用
    await DeleteApplicationApi(targetApp);
    // 2. 从本地数据源中移除已删除的应用
    ApplicationList.RemoveAll(app => app.Id == targetApp.Id);
    // 3. 手动触发组件状态更新（确保UI刷新）
    StateHasChanged();
}

// 单独封装API调用逻辑
private async Task DeleteApplicationApi(ApiApplication app)
{
    // 替换为你的实际API调用代码
    await _httpClient.DeleteAsync($"api/applications/{app.Id}");
}

关键说明 #

• 避免子组件直接引用父组件实例：这种强耦合方式不仅不符合组件设计原则，还可能导致状态感知失效。
• 必须更新本地数据源：UI绑定的是本地列表，只有修改这个列表，Blazor才能感知到数据变化。
• StateHasChanged()：如果使用List<T>，修改后可能需要手动触发状态更新；如果使用ObservableCollection<T>，则会自动通知，但手动调用StateHasChanged()更保险。

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