Update a Component from a Page in Blazor

I wanted to update the Blazor NavMenu from the Counter page.

The Counter page must send an event to signal the NavMenu to update. I achieved this using a State service.

I called the service AppBarState. First, add it to the Program.cs file.

builder.Services.AddScoped<AppBarState>();

This is the code for AppBarState

public class AppBarState
{
    public event Action? CountHasChanged;

    public int? Count;

    public void SetCount(int c)
    {
        Count = c;
        NotifyCountChanged();
    }

    public void NotifyCountChanged()
    {
        this.CountHasChanged?.Invoke();
    }


}

Every time Count is changed, is fires the event CountHasChanged.

The Counter page injects the AppBarState. It sets the AppBarState Count to the currentCount in the Counter page. This invokes the Action CountHasChanged.

Here is the Counter page:

@page "/counter"
@rendermode InteractiveServer
@inject AppBarState appBarState



<PageTitle>Counter</PageTitle>

<h1>Counter</h1>

<p role="status">Current count: @currentCount</p>

<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>

@code {
    private int currentCount = 0;


    private async Task IncrementCount()
    {
        currentCount++;
        appBarState.SetCount(currentCount);
        
    }
}

NavMenu injects AppBarService. It must also implement IDisposable.

NavMenu must responds to the raised event CountHasChanged. It calls StateHasChanged.

The NavMenu has a title for the Count NavLink that specifies the Count:

...
<div class="nav-item px-3">
    <NavLink class="nav-link" href="counter">
        <span class="bi bi-plus-square-fill-nav-menu" aria-hidden="true"></span> Count @title
    </NavLink>
</div>
...

In the code section, NavMenu responds to the appBarState event CountHasChanged. Here is the code section.

@code{

    protected string title;
    protected override void OnInitialized()
    {
        appBarState.CountHasChanged += OnCountChanged;
        if (appBarState.Count != null)
        {
            title = appBarState.Count.ToString();
        }
        else
        {
            title = "0";
        }

    }

    private async void OnCountChanged()
    {
        title = appBarState.Count.ToString();
        await this.InvokeAsync(this.StateHasChanged);
    }

    public void Dispose()
    {
        appBarState.CountHasChanged -= OnCountChanged;
    }

}

In this blog, I have shown how to use an event in a State class to update the NavMenu when the Counter changes.