Chandradev's Blog

State Management is the process of maintaining state in one page to other page or entire application page. In each framework there would be separate approach to achieve statement.

Blazor Server is a stateful app framework. Most of the time, the app maintains an ongoing connection to the server.

There are so many approach to implement statement in Blazor Server. But I will show you one of the best and easy approach using AppState pattern.

In this demo we create CurrentCount as global variable to access in other page of blazor.

Step 1: Create the default blazor server demo project and go project folder >> Create CounterState.cs file, Create CurrentCount properties like this.

Step 2: Register in Startup file of blazor like this

Step 3: Go to the index.razor component file and inject the Counter Component like this

Step 4: Go to the Couter.razor component file write the code like this

@page "/counter"
@inject CounterState State;

<h1>Counter</h1>

<p>Current count: @State.CurrentCount</p>

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


@code {

    private void IncrementCount()
    {
        State.CurrentCount++;
    }
}
 

Step 5: Run the application and click on counter button and verify it on Home page.

Summary

In this small demo we saw that how to maintain the state in two Blazor page using one of the simplest approach.