Blazor c# change text of button to saving... then back to save-CodePudding

I'm trying to change the text of my save button to Saving... when it's clicked and then back to Save after the save completes. The following is what I've tried but doesn't seem to be working.

<div>
    <button  @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...";
        await _service.SaveAllTheCache();
        saveText = "Save";
    }
}

CodePudding user response：

You need to Yield or Delay to allow the screen to update.

private async Task SaveTheCache()
{
    saveText = "Saving...";
    await Task.Yield();
    await _service.SaveAllTheCache();
    saveText = "Save";
}

You may want to consider adding logic in a similar way to disable the button and re-enable it by using a bool variable.

<div>
    <button  
            @onclick="SaveTheCache" 
            disabled=@isSaving>
        @Label
    </button>
</div>


@code {

    bool isSaving = false;
    string Label => isSaving ? "Saving..." : "Save";

    private async Task SaveTheCache()
    {
        isSaving = true;
        await Task.Yield();
        await _service.SaveAllTheCache();
        isSaving = false;
    }
}