Blazor, Updating or Refreshing the Display During a Method Call

Full source code available here.

This is a quick post showing how to refresh or update components on a Blazor page asynchronously, for example in response to a task or tasks completing.

In this example I have a button that calls a method, inside the method I have for loop, inside each iteration of the for loop, I increment the counter twice, delay twice, and update the display twice using a call to StateHasChanged().

Here is the code -

 1@page "/"
 3<h1>Updating the state of the page every second</h1>
 5<p>Current count: @currentCount</p>
 7<button class="btn btn-primary" @onclick="StartCounterAsync">Start counter</button>
 9@code {
10    private int currentCount = 0;
11    private async Task StartCounterAsync()
12    {
13        for (int i = 1; i <= 10;)
14        {
15            await Task.Delay(1000);
16            currentCount = i++;
17            StateHasChanged();  
18            await Task.Delay(1000);
19            currentCount = i++;
20            StateHasChanged();  
21        }
22    }

Once you know how to do it’s easy.

There is a scenario where using StateHasChanged() won’t work and instead you’ll get an error like -

1Exception has occurred: CLR/System.InvalidOperationException
2An exception of type 'System.InvalidOperationException' occurred in Microsoft.AspNetCore.Components.dll but was not handled in user code: 'The current thread is not associated with the Dispatcher. Use InvokeAsync() to switch execution to the Dispatcher when triggering rendering or component state.'
3   at Microsoft.AspNetCore.Components.Dispatcher.AssertAccess()
4   at Microsoft.AspNetCore.Components.RenderTree.Renderer.AddToRenderQueue(Int32 componentId, RenderFragment renderFragment)
5   at Microsoft.AspNetCore.Components.ComponentBase.StateHasChanged()

In this case use InvokeAsync(StateHasChanged); instead and it should work.

Full source code available here.

comments powered by Disqus