In-Memory State Container Service in Blazor

-
In-Memory State Container Service in Blazor

This blog is going to explain how to carry data from page to page or component. In the Blazor application, you can achieve this by injecting application state, dependency injection, and custom class. This state will persist in the browser's memory. So when the user navigates through the browser, they will get the same data. But this data will be cleared when the user refreshes the page.

Let's look at the in-memory state process step by step. This example is going to illustrate how to manage in-memory state values from one child to another.

Step1:
First, I created the StateContainer class.

StateContainer.cs
 public class StateContainer
{
    public List<string> MovieList {get; set;} = new List<string>();
 
    public void SetValue(string value)
    {
        MovieList.Add(value);
        NotifyStateChanged();
    }
 
    public event Action? OnChange;
 
    private void NotifyStateChanged() => OnChange?.Invoke();
}

Step 2: I created this project on a Blazor server. If your project is also a Blazor server, add the following line to Program.cs.

Program.cs
builder.Services.AddScoped<StateContainer>();

If you are using an earlier version of Blazor server 6.0, add the following line to Startup.ConfigureServices.

Startup.cs
Services.AddScoped<StateContainer>();

If your project is Blazor WebAssembly, add the following line to Program.cs.

Program.cs
builder.Services.AddSingleton<StateContainer>();

Step 3: The first child component is as follows. Here you can see the injected StateContainer using the @inject directive. It has a text box for collecting the movie name and a button to add the movie name to the list. When the user clicks the button, the movie name is sent as a parameter to the SetValue() custom class and added to the movie list.

ChildOne.razor
@implements IDisposable
@inject StateContainer StateContainer
 
<h4>Child Component One</h4>
 
<input type="text" @bind="movieName" />
 
<br/>
<br/>
 
<button @onclick="ChangePropertyValue" class="btn btn-primary">
    Add to List
</button>
 
@code {
    private string movieName="";
    protected override void OnInitialized()
    {
        StateContainer.OnChange += StateHasChanged;
    }
 
    private void ChangePropertyValue()
    {
        StateContainer.SetValue(movieName);
        movieName="";
    }
    public void Dispose()
    {
        StateContainer.OnChange -= StateHasChanged;
    }
}

Step 4: Next is the second child component. Here also, theStateContainer is injected using the @inject directive. Here the MovieList will be displayed using the foreach loop.

ChildTwo.razor
@implements IDisposable
@inject StateContainer StateContainer
 
<h4>Child Component Two</h4>
 
<ul class="list-group">
@foreach (var item in StateContainer.MovieList)
{
    <li class="list-group-item">@item</li>
}
</ul>
 
@code {
    protected override void OnInitialized()
    {
        StateContainer.OnChange += StateHasChanged;
    }
 
    public void Dispose()
    {
        StateContainer.OnChange -= StateHasChanged;
    }
}

Step 5: This is an index page. Here the first and second child components are included.

Index.razor
@page "/"
 
<h3>In-memory State Container Service in Blazor</h3>
 
<div class="container">
  <div class="row">
    <div class="col" style="background-color: lightblue;">
      <ChildOne></ChildOne>
    </div>
    <div class="col" style="background-color: pink;">
      <ChildTwo></ChildTwo>
    </div>
  </div>
</div>

The output of the code above is below. Here you can see that when the user types in the name of the movie and clicks on the button in the first child component, it will add in the second child component.

In-Memory State Container Service in Blazor

I hope this helps you. Keep coding.

Comments

Post a Comment

Popular posts from this blog

Entity Framework Core (EF) with SQL Server LocalDB

-
Image
This blog is going to illustrate how to implement Entity Framework (EF) Core with SQL Server LocalDB. The Entity Framework Core enables access to data from the database. This allows developers to avoid having to write most of the data access code. And the SQL Server LocalDB works similarly to the SQL SERVER with few features. You can get the LocalDB when you install visual studio or visual studio express. You can find the .mdf and _log.ldf files in the C:/Users/{user} directory. Let see how to create a SQL Server LocalDB and implement Entity Framework Core Step 1: The first step is to add a connection. In the menu -> click Tools and select Connect to Database It will display the Add Connection window. Enter (localdb)\mssqllocaldb in the server name textbox. Then in the Select or enter a database, select master and click ok Now in the server explorer, you can find the master DB containing Tables, Views, Stored
Read more

Exploring EventCallback in Blazor: Building Interactive Components

-
Image
Introduction: Blazor is a powerful framework for building web applications using C# instead of JavaScript. It allows developers to create interactive and dynamic user interfaces with ease. One of the key features in Blazor is the EventCallback<T> pattern, which enables communication between components through events. In this blog post, we will explore how to use the EventCallback<T> pattern in Blazor by building a simple example. Creating the Event-Driven Component: Let's start by creating a Blazor component called MyComponent. This component will raise an event when a button is clicked. Here's the code for the MyComponent.razor file: MyComponent.razor < h3 > My Component < / h3 > < button @onclick = " RaiseEvent " > Raise Event < / button > @code { [ Parameter ] public EventCallback < string > EventRaised { get ; set ; } private async Task RaiseEvent ( ) { await EventRais
Read more

A Step-by-Step Guide to Implementing Identity in ASP.NET Core MVC

-
Image
Are you ready to enhance your ASP.NET Core MVC project with the power of Identity? In this comprehensive guide, we'll walk you through the process of setting up and customizing the Identity system in your web application. By the end of this tutorial, you'll be able to implement secure user authentication and authorization for your ASP.NET Core project. Step 1: Create a New ASP.NET Core Web App Begin by opening Visual Studio and selecting "ASP.NET Core Web App (Model-View-Controller)" as your project template. Follow these steps: 1. Open Visual Studio and create a new project, selecting "ASP.NET Core Web App (Model-View-Controller)". 2. In the "Configure your project" window, enter the project name and choose the project's location. 3. In the "Additional Information" window, select the framework and choose "Individual Accounts" as the Authentication type. 4. Click "Create" to generate your project.
Read more