I have a really basic piece of code in Blazor Server .NET 8. I am not an expert on Blazor (yet), but more a backend developer in C# and .NET. My work allows me to learn Blazor and I can get far, but I can't seem to figure out how to update the UI, which seems pretty important.
I have seen this code a lot on my search of my problem:
@using System.Timers@page "/testing"Counter value is: @currentCount at @DateTime.UtcNow.ToString("HH:mm:ss")@code{ private int currentCount = 0; private void IncrementCount() { currentCount++; Console.WriteLine($"Count incremented: {currentCount}"); } private Timer timer; protected override void OnAfterRender(bool firstRender) { if (firstRender) { timer = new Timer(); timer.Interval = 1000; timer.Elapsed += OnTimerInterval; timer.AutoReset = true; // Start the timer timer.Enabled = true; } base.OnAfterRender(firstRender); } private void OnTimerInterval(object sender, ElapsedEventArgs e) { IncrementCount(); InvokeAsync(() => StateHasChanged()); } public void Dispose() { // During prerender, this component is rendered without calling OnAfterRender and then immediately disposed // this mean timer will be null so we have to check for null or use the Null-conditional operator ? timer?.Dispose(); }}Whatever I do, the UI is never updating the @currentCount value! The OnTimerInterval is hitting every second, so that works. But the InvokeAsync(() => StateHasChanged()); doesn't work. The StateHasChanged() (without the async) doesn't work either.
What I have tried:
- ChatGPT (Not gong to do that again! Took me down the wrong path completely!)
- Google (this code I have shown you is from different sources)
- Trying to remove the async way, but that doesn't work either.
What am I doing wrong??
Update: StackOverflow gave a suggestion for another post:
Blazor-Server side UI Updating does not work or only partially
This answer didn't work either.