Maui Blazor异步任务后更新绑定值的问题及解决方法

这不是Bug，是Blazor的UI更新机制导致的。当你同步设置outputVal为“Value during loading”后立刻执行await Task.Delay(100)，UI线程还没来得及完成渲染，await后的代码就把值改成了“Final value”，所以中间状态根本没机会显示在页面上。

解决方法很简单，手动通知Blazor更新UI就行，同时建议把async void换成async Task（符合Blazor的最佳实践，避免潜在的异常处理问题）：

修改后的示例1代码：

@page "/example1"

<p>Output: @outputVal</p>
<button @onclick="@ChangeOutputVal" style="width:1200px">Confirm</button>

@code {
    private string outputVal = "Placeholder value";

    private async Task ChangeOutputVal() {
        outputVal = "Value during loading";
        StateHasChanged(); // 强制Blazor立即渲染组件，显示中间状态
        await Task.Delay(100);
        outputVal = "Final value";
        // await结束后Blazor会自动检测状态变化并更新UI，无需额外调用
    }
}

至于示例2能正常显示，是因为await之后设置值时，Blazor会在异步操作完成后自动触发UI更新，所以最终值能正确渲染。

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