Blazor中Bootstrap Alert组件在部分函数中无法显示的问题

核心问题 #

1. saveChanges使用async void：Blazor中异步事件处理方法必须返回async Task，async void会导致组件上下文丢失，后续状态更新无法触发UI渲染。
2. 调用AlertTask未加await：直接调用异步方法却不等待完成，会导致任务执行时上下文已被释放，UI更新逻辑失效。
3. StateHasChanged时机错误：原代码仅在隐藏Alert时调用状态更新，显示Alert后未立即触发，导致Alert来不及渲染就进入延迟流程。

具体修改步骤 #

1. 修正saveChanges方法的返回类型并添加await

将async void改为async Task，调用AlertTask时加上await，保证异步流程完整执行：

public async Task saveChanges() 
{
    try{
        int updResult = await Procs.procBankCodeItemDescriptionUpdate(editDetail.BankCodeLookupId, editDetail.ItemDescription, editDetail.OriginatorReference, editDetail.OriginatorParticulars, editDetail.OtherPartyReference, editDetail.OtherPartyAnalysisCode, editDetail.SendEnquiriesToEmailAddress);
        
        updResult = await Procs.procAuditLogMessageInsertAsync("Maintenance", DateTime.Now, "Details for " + editDetail.ItemDescription + " successfully updated by " + currentUser.UserName + ". ");
        await AlertTask("Details have been updated successfully.", 2);
    }catch(SqlException e){
        int insResult = await Procs.procErrorLogMessageInsertAsync("Maintenance", DateTime.Now, "Error updating record: " + e.Message);
        await AlertTask("There was an error updating the payment details", 3);
    }
}

2. 调整AlertTask中StateHasChanged的位置

在显示Alert后立即调用状态更新，确保UI及时渲染；隐藏时再次调用更新UI：

async Task AlertTask(string m, int t)
{
    // 设置Alert参数
    AlertMessage = m;
    AlertType = (AlertBox.aType)t;

    // 显示Alert并触发UI更新
    ShowAlert = true;
    StateHasChanged();

    await Task.Delay(2000);
    
    // 隐藏Alert并触发UI更新
    ShowAlert = false;
    StateHasChanged();
}

3. 确认按钮事件绑定正确性

确保按钮的@onclick绑定的是修改后的saveChanges方法（Blazor可正确处理返回Task的异步方法）：

<button @onclick="saveChanges">Save Changes</button>

原理说明 #

• Blazor的UI更新依赖组件状态变更通知，async void会绕过Blazor的异步上下文管理，导致StateHasChanged无法触发UI渲染。
• await关键字保证AlertTask在当前组件上下文内执行，状态变更能被Blazor捕获并更新UI。
• 显示Alert后立即调用StateHasChanged，强制组件实时渲染，避免延迟导致的UI无响应问题。

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