Exchange Data between Page and NavMenu in Blazor

Question

I have a standard - blazor - project which has the following components:

-> MainLayout.razor
-> NavMenu.razor
-> Pages/Index.razor
-> Pages/Sub1.razor

The MainLayout looks like this:

<div class="sidebar">
    <NavMenu />
</div>
<div>@Body</div>

Now I want to exchange Data between my pages (index.razor, sub1.razor) and the navmenu so I could add something like this in navmenu:

<div><p>You are now on Page: @CurrentPageName</p></div>

How can I set (navMenu).CurrentPageName directly from within my page? I would expect that using a static class for that is not really a good option.

Answer 1

There are three main ways to communicate between components in Blazor. Chris Sainty has a good article outlining these: https://chrissainty.com/3-ways-to-communicate-between-components-in-blazor/

In this scenario a cascading value or a state container are probably the best options. A cascading value would require a top-level component to contain the value, e.g. something that encapsulates both the <NavMenu> and the @Body:

@inherits LayoutComponentBase
<MenuState>
<div class="sidebar">
    <NavMenu />
</div>

<div class="main">
    <div class="top-row px-4">
        <a href="http://blazor.net" target="_blank" class="ml-md-auto">About</a>
    </div>

    <div class="content px-4">
        @Body
    </div>
</div>
</MenuState>

Another approach is to use an injectable service that provides a State service, which you inject into both the <NavMenu> and the page components.