Blazor中Bootstrap Modal无法更新Web API返回数据的问题

核心问题分析 #

1. 异步方法调用未正确等待：OK方法为void类型，调用异步的Delete方法时未使用await，导致Blazor无法感知异步操作完成后的状态变更，UI不会自动刷新。
2. 未显式触发组件状态更新：部分场景下，异步操作完成后需要手动通知Blazor组件状态已改变，强制刷新UI。

解决方案步骤 #

1. 修正异步方法调用逻辑

将OK方法改为async Task类型，并等待Delete方法执行完成：

public async Task OK()
{
    await Delete(1);
}

2. 确保状态变更通知UI

在Delete方法更新RetunMessage后，调用StateHasChanged()强制触发组件UI更新：

public async Task Delete(int id)
{
    // 推荐通过依赖注入获取HttpClient，而非手动实例化
    var URI = new Uri("https://localhost:7008/api/Employee/" + id.ToString());
    var deleteResult = await HttpClient.DeleteAsync(URI);

    if (deleteResult.IsSuccessStatusCode)
    {
        var responseContent = await deleteResult.Content.ReadAsStringAsync();
        RetunMessage = responseContent;
    }
    else
    {
        RetunMessage = "ERR";
    }
    // 通知组件状态已变更，触发UI刷新
    StateHasChanged();
}

3. 优化HttpClient使用（可选但推荐）

不要每次调用接口都手动创建HttpClient，而是通过Blazor的依赖注入获取实例，避免Socket资源耗尽问题：
在组件顶部添加注入声明：

@inject HttpClient HttpClient

然后删除Delete方法中HttpClient httpClient = new HttpClient();这一行。

4. 补充模态框显示控制（可选）

如果需要控制模态框的显示/隐藏，可添加布尔变量绑定模态框的显示状态：

<div class="modal @(IsModalVisible ? "show d-block" : "")" tabindex="-1" style="background-color: rgba(0,0,0,0.5);">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">操作结果</h5>
      </div>
      <div class="modal-body">
        <label class="form-label">@RetunMessage</label>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary" @onclick="() => IsModalVisible = false">Ok</button>
      </div>
    </div>
  </div>
</div>

@code {
    private bool IsModalVisible { get; set; }
    public string RetunMessage = string.Empty;

    public async Task OK()
    {
        await Delete(1);
        // 操作完成后显示模态框
        IsModalVisible = true;
    }

    // 其余代码同上
}

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