CODEWITHSUNDEEP
blazor
SmallProgram
SmallProgram

Reputation: 81

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

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++;
    }
}

Upvotes: 1

Views: 3764

Answers (2)

Brian Parker
Brian Parker

Reputation: 14623

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++;
    }

}

Upvotes: 3

olabacker
olabacker

Reputation: 1480

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://learn.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; }

Upvotes: 1

Related Questions