Disabling button from async function in Blazor

Question

I have following EditForm model on my page:

<EditForm Model="@projectParameters" OnValidSubmit="@SubmitProject">
       <MatButton Raised="true" Type="submit" Disabled="@saveButtonDisabled">@saveButtonName</MatButton>
</EditForm>

Then the following functions:

private async Task SubmitProject()
    {
        DisableSave();

        if (pageType == "Create")
        {
            await CreateProject();
        }
        else if (pageType == "Create")
        {
           await EditProject();
        }
    }

and

void DisableSave()
    {
        saveButtonDisabled = true;
        saveButtonName = "Saving...";
        StateHasChanged();
    }

SubmitProject & DisableSave are properly called, but the saveButtonName & disabled never actually show as completed when CreateProject is working. What am I missing?

This is a very crude way to do the trick... – enet Sep 19 '19 at 19:00 — enet, Sep 19 '19 at 19:00

score 6 · Accepted Answer · answered Sep 19 '19 at 19:02

6

Flush changes with await Task.Delay(1);:

private async Task SubmitProject()
{
    await DisableSave();
    ...

Then

async Task DisableSave()
{
    saveButtonDisabled = true;
    saveButtonName = "Saving...";
    await Task.Delay(1); //flush changes
    StateHasChanged(); // not needed
}

answered Sep 19 '19 at 19:02

dani herrera

48,760
8
117
177

This works, thanks!! Could you explain why though? I still have trouble understanding some async stuff sometimes. – Katie P Sep 19 '19 at 19:51
1

It's not about async, is about virtual DOM, diffs only are send at end of call, releasing UI thread diffs are also send. This is the way I found to do it, but I don't if this is the better way, is how I do it. – dani herrera Sep 19 '19 at 20:54
I have another clever answer about this subject here: https://stackoverflow.com/a/56675814/842935 Just checkout. – dani herrera Apr 13 '20 at 11:04

Disabling button from async function in Blazor

1 Answers1