Blazor WebAssembly 调用方法后页面不更新如何解决

你的场景里API执行完成但UI不刷新，本质是两个核心错误叠加导致的：

• 事件处理方法的异步签名不符合Blazor的渲染触发规则
• 表单提交流程的绑定方式和EditForm组件的工作机制不匹配

1. 修正异步事件的方法签名（核心修复） #

Blazor 框架只会对返回Task的异步事件处理器，在异步逻辑执行完成后自动触发组件重新渲染（即自动调用StateHasChanged()完成DOM更新）。
你当前的AddPerson方法用了async void签名：

// 错误写法：async void 是触发即忘模式，方法调用后Blazor无法捕获异步完成时机，不会触发UI重绘
private async void AddPerson()

这种写法会让异步方法变成“触发即走”的模式：Blazor调用方法后，因为没有拿到可等待的Task，会直接认为事件处理已完成，提前走完渲染流程。等到内部的await逻辑执行完毕、people列表被新数据赋值时，组件已经没有触发重绘的机制了，自然看不到UI更新。
需要把方法签名调整为返回Task：

// 正确写法：返回Task的异步方法，Blazor会等待所有异步逻辑完成后，自动触发UI重绘
private async Task AddPerson()

2. 适配EditForm的标准提交流程 #

当前直接给submit按钮绑定@onclick的方式存在逻辑脱节问题：既可能触发浏览器原生的表单提交行为导致页面意外刷新，也绕开了EditForm自带的表单校验、提交流程机制。
正确的绑定方式是将提交逻辑挂载在EditForm的OnValidSubmit回调上，移除按钮上的独立@onclick绑定：

<EditForm Model="@person" OnValidSubmit="AddPerson">
    <!-- 原有表单项保持不变 -->
    <div class="col-12 row">
        <label class="col-2 font-weight-bold">Id : </label>
        <InputNumber class="form-control col-3" @bind-Value="person.Id" placeholder="id" />
    </div>
    <br />
    <div class="col-12 row">
        <label class="col-2 font-weight-bold">Name : </label>
        <InputText class="form-control col-3" @bind-Value="person.Name" placeholder="name" />
    </div>
    <!-- 移除按钮上的@onclick绑定，EditForm会自动拦截submit按钮的原生提交行为，触发绑定的OnValidSubmit逻辑 -->
    <button type="submit" class="form-control  btn btn-primary text-center">Add</button>
</EditForm>

3. 增加空值兜底，避免初始渲染报错 #

当前people列表初始值为null，页面首次加载时@foreach遍历null值会直接抛出空引用异常。需要给列表做初始化处理：

@code 
{
    // 初始化为空列表，避免foreach遍历null触发报错
    public List<Person> people = new List<Person>();
    public Person person = new Person();

    private async Task AddPerson()
    {
        // 原有API调用逻辑保持不变
        HttpResponseMessage httpResponse = await Http.PostAsJsonAsync<Person>("https://apisite.ir/api/people", person);
        people = await Http.GetFromJsonAsync<List<Person>>("https://apisite.ir/api/people");

        // 可根据需要增加提交成功后的表单重置逻辑，避免表单保留上次输入内容
        person = new Person();
    }
}

如果按上述步骤修改后，极端场景下仍出现UI不更新的情况，可以在列表赋值完成后手动触发组件状态刷新：

people = await Http.GetFromJsonAsync<List<Person>>("https://apisite.ir/api/people");
// 手动通知组件重新渲染DOM
StateHasChanged();

正常情况下只要方法签名是返回Task的事件处理器，Blazor会自动完成重绘触发，这步仅作为异常场景的兜底方案。

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