C#•2y ago

Invoke StateHasChanged() only after asynchronous operation has completed

Referring to the code below:

private async void PublishDrawWithConfirmation()
    {
        var result = await DialogService.ShowMessageBox(
            "Publish Draw",
            "Once published, the draw will no longer be editable and will be open to entries. Are you sure?",
            yesText: "Publish", cancelText: "Cancel");
        
        if (result == null) return;

        await DrawService.ActivateDraw(DrawId);
        Snackbar.Add("Draw has been published!", Severity.Success);
        StateHasChanged();
    }

private async void PublishDrawWithConfirmation()
    {
        var result = await DialogService.ShowMessageBox(
            "Publish Draw",
            "Once published, the draw will no longer be editable and will be open to entries. Are you sure?",
            yesText: "Publish", cancelText: "Cancel");
        
        if (result == null) return;

        await DrawService.ActivateDraw(DrawId);
        Snackbar.Add("Draw has been published!", Severity.Success);
        StateHasChanged();
    }

private async void PublishDrawWithConfirmation()
    {
        var result = await DialogService.ShowMessageBox(
            "Publish Draw",
            "Once published, the draw will no longer be editable and will be open to entries. Are you sure?",
            yesText: "Publish", cancelText: "Cancel");
        
        if (result == null) return;

        await DrawService.ActivateDraw(DrawId);
        Snackbar.Add("Draw has been published!", Severity.Success);
        StateHasChanged();
    }

private async void PublishDrawWithConfirmation()
    {
        var result = await DialogService.ShowMessageBox(
            "Publish Draw",
            "Once published, the draw will no longer be editable and will be open to entries. Are you sure?",
            yesText: "Publish", cancelText: "Cancel");
        
        if (result == null) return;

        await DrawService.ActivateDraw(DrawId);
        Snackbar.Add("Draw has been published!", Severity.Success);
        StateHasChanged();
    }

My intent is to refresh the page after updating the database, in order to display the updated information. Based on the behaviour I am seeing, it looks as if

StateHasChanged()

StateHasChanged()

is invoked before the database is updated with

await DrawService.ActivateDraw(DrawId)

await DrawService.ActivateDraw(DrawId)

. What would be the correct way to refresh the page only after the

await

await

is complete?

Pobiega•2/11/24, 7:16 PM

by making this method be

async Task

async Task

instead of

async void

async void

and awaiting it

Pobiega•2/11/24, 7:16 PM

async void

async void

means fire and forget, and you are on thin ice at that point

PPobiega by making this method be `async Task` instead of `async void` and awaiting it

MaverickOP•2/11/24, 7:32 PM

What difference would that make? Not disputing it, just not following how that would affect things logically. The call to StateHasChanged is happening inside of this function, so surely just changing the return type wouldn't make a difference? if I move the call to StateHasChanged outside of the function and then await the function and call StateHasChanged, wouldn't I just get the same behaviour as I currently am?

Pobiega•2/11/24, 7:34 PM

PublishDrawWithConfirmation

PublishDrawWithConfirmation

must be awaited

Pobiega•2/11/24, 7:34 PM

thats the problem

Pobiega•2/11/24, 7:34 PM

you can't await an

async void

async void

method

PPobiega you can't await an `async void` method

MaverickOP•2/11/24, 9:45 PM

I see. However, I am not seeing a change in behaviour when switching the method to

async Task

async Task

, when calling it with:

<MudButton Variant="Variant.Filled" Color="Color.Info" FullWidth="true" Class="my-4"
           OnClick="@PublishDrawWithConfirmation">
    Publish Draw
</MudButton>

<MudButton Variant="Variant.Filled" Color="Color.Info" FullWidth="true" Class="my-4"
           OnClick="@PublishDrawWithConfirmation">
    Publish Draw
</MudButton>

As far as I know, Blazor will detect that the method is asynchronous and handle it as such in the event handler above. I'm still not quite sure how awaiting

PublishDrawWithConfirmation

PublishDrawWithConfirmation

will affect the call to

StateHasChanged

StateHasChanged

within that method, but that's probably due to my lack of experience/in-depth understanding of asynchronicity

Pobiega•2/11/24, 10:06 PM

No idea how this works in blazor

Pobiega•2/11/24, 10:07 PM

Usually a good idea to open your question with such information btw,

Anu6is•2/11/24, 11:09 PM

Based on the behaviour I am seeing, it looks as if StateHasChanged() is invoked before the database is updated with await DrawService.ActivateDraw(DrawId).

what behaviour

PPobiega Usually a good idea to open your question with such information btw,

MaverickOP•2/11/24, 11:10 PM

I hadn't noticed I left Blazor out of the title/description, whoops - never done that before

AAnu6is > Based on the behaviour I am seeing, it looks as if StateHasChanged() is invoke...

MaverickOP•2/11/24, 11:11 PM

I guess a lack of behaviour would be a better description - nothing changes until I manually refresh the screen. I suppose there's a chance that

StateHasChanged

StateHasChanged

isn't actually refreshing the page as I'd expect, but it works everywhere else so I reckon my assumption that

StateHasChanged

StateHasChanged

is being invoked before the database is actually updated is more likely

Anu6is•2/11/24, 11:13 PM

I doubt

Anu6is•2/11/24, 11:13 PM

do you have a simple TryMud reproduction?

AAnu6is do you have a simple TryMud reproduction?

MaverickOP•2/11/24, 11:14 PM

I don't - surely any attempt to reproduce in TryMud would be worthless as I can't replicate EF Core functionality there?

Anu6is•2/11/24, 11:15 PM

doesn't actually need your db, just a simulated delayed task

Joschi•2/11/24, 11:27 PM

You got a client in which a user updated some information.

This is then saved to the DB right? So I guess that page already has all the updated information available.

If that's the case you could just update it directly instead of doing a complete another roundtrip to the DB. Or maybe your update endpoint returns the updated resource and you can use that.

Joschi•2/11/24, 11:28 PM

No need to call StateHasChanged then.

MaverickOP•2/11/24, 11:28 PM

Ended up taking an alternative approach by navigating to the same page (essentially a reload) using NavigationManager with a forced refresh - thanks for the messages folks

Invoke StateHasChanged() only after asynchronous operation has completed

Similar Threads

Similar Threads

Similar Threads