blazor how to pass the variable value in the component to the MainLayout component

Question

I created a project using the blazor server template that comes with vs 2019, how do I pass the currentCount property value in the Counter.razor component to a MainLayout.razor component?

And when the page is loaded, the currentCount value passed in the Mainlayout component is the same as the currentCount value in the Counter component. And when the currentCount value changes, the currentCount value in Mainlayout will also change.

MainLayout.razor:

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

    <div class="main">
        <div class="top-row px-4 auth">
            <LoginDisplay />
        </div>
        <div class="content px-4">
            @Body
        </div>
    </div>
</div>

Counter.razor

@page "/counter"

<h1>Counter</h1>

<p>Current count: @currentCount</p>

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

@code {
    private int currentCount = 0;

    private void IncrementCount()
    {
        currentCount++;
    }
}

Answer 1

I believe you are looking for cascading parameters. Cascading values and parameters are a way to pass a value from a component to all of its descendants without having to use traditional component parameters.

https://docs.microsoft.com/en-us/aspnet/core/blazor/components/cascading-values-and-parameters?view=aspnetcore-5.0

Example for origin of the cascading value will cascade to contained components.

<CascadingValue Value="@CurrentCount">
 @Body
</CascadingValue>

@code{
   int CurrentCount = 5;
}

The inner component should then decorate its property as following.

[CascadingParameter] int CurrentCount { get; set; }

Answer 2

One way would be with a state service.

Add a class to your project MainLayoutState.cs

public class MainLayoutState
{
    int currentCount;
    public int CurrentCount
    {
        get => currentCount;
        set
        {
            if (currentCount == value) return;
            currentCount = value;
            CurrentCountChanged?.Invoke(this, value);
        }
    }
    public event EventHandler<int> CurrentCountChanged;
}

Update Startup.cs so it can be injected.

services.AddScoped<MainLayoutState>();

Use it in both the layout and the counter razor components.

MainLayout.razor

@inherits LayoutComponentBase
@implements IDisposable
@inject MainLayoutState LayoutState
<div class="page">
    <div class="sidebar">
        <NavMenu />
    </div>

    <div class="main">
        <div class="top-row px-4">
            <LoginDisplay /> @LayoutState.CurrentCount
        </div>

        <div class="content px-4">
            @Body
        </div>
    </div>
</div>
@code {
    protected override void OnInitialized()
        => LayoutState.CurrentCountChanged += CountChanged;

    void CountChanged(object sender, int e) => StateHasChanged();

    public void Dispose() => LayoutState.CurrentCountChanged -= CountChanged;
}

Change the code block in Counter.razor

@code {

    int CurrentCount { 
        get => LayoutState.CurrentCount; 
        set => LayoutState.CurrentCount = value; }

    [Inject]
    MainLayoutState LayoutState { get; set; }

    void IncrementCount()
    {
        CurrentCount++;
    }

}