Blazor C#实现按钮点击显示Saving…完成后恢复Save文本问题

你的代码问题在于Blazor没有在修改saveText后立即触发UI渲染，尤其是当_service.SaveAllTheCache()是同步方法或者没有让出线程的异步方法时，UI不会实时更新。以下是修复方案：

基础修复方案 #

在修改saveText后手动调用StateHasChanged()通知组件重新渲染：

<div>
    <button class="btn btn-primary" @onclick="SaveTheCache">@saveText</button>    
</div>

@code {
    private bool collapseNavMenu = true;

    private string NavMenuCssClass => collapseNavMenu ? "collapse" : null;

    string saveText = "Save";

    private void ToggleNavMenu()
    {
        collapseNavMenu = !collapseNavMenu;
    }

    private async Task SaveTheCache()
    {
        saveText = "Saving...";
        StateHasChanged(); // 手动触发UI更新
        await _service.SaveAllTheCache();
        saveText = "Save";
    }
}

优化方案（防止重复点击） #

添加状态变量禁用按钮，避免用户重复触发保存操作：

<div>
    <button class="btn btn-primary" @onclick="SaveTheCache" disabled="@isSaving">@saveText</button>    
</div>

@code {
    private bool collapseNavMenu = true;
    private bool isSaving; // 标记是否正在保存

    private string NavMenuCssClass => collapseNavMenu ? "collapse" : null;
    string saveText = "Save";

    private void ToggleNavMenu()
    {
        collapseNavMenu = !collapseNavMenu;
    }

    private async Task SaveTheCache()
    {
        isSaving = true;
        saveText = "Saving...";
        StateHasChanged();

        try
        {
            await _service.SaveAllTheCache();
        }
        finally
        {
            // 无论成功失败都恢复按钮状态
            saveText = "Save";
            isSaving = false;
        }
    }
}

特殊情况处理 #

如果SaveAllTheCache是长时间运行的同步方法，需要将它放到后台线程执行，避免阻塞UI：

private async Task SaveTheCache()
{
    isSaving = true;
    saveText = "Saving...";
    StateHasChanged();

    try
    {
        // 用Task.Run将同步操作移到后台线程
        await Task.Run(() => _service.SaveAllTheCache());
    }
    finally
    {
        saveText = "Save";
        isSaving = false;
    }
}

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