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

SignalR with JavaScript in ASP.NET Core MVC

-
Image
This blog is going to explain what is SignalR and how to implement it in ASP.NET Core. SignalR is a real time application framework for ASP.NET Core. Using SignalR you can provide updated information without refreshing the page, for example poll results, game score, chat etc. Let's see how to achieve it in ASP.NET Core MVC. Step 1: First step I added the SignalR client library. To add a SignalR client library, Right click on the project in Solution Explorer and Add -> Client-Side Library. Select the provider as unpkg as shown in the image below. Enter the latest version of SignalR into the library. And selected signalr.js and signalr.min.js files. Finally clicked the install button to install the client library. Step 2: At this step I have created a VoteHub.cs class inside the Hubs folder(create a new folder called Hubs). This class inherits from the Hub class which is a base class of SignalR hub. The SendMessage method will be called by the connected client.
Read more

Localization in ASP.NET Core MVC with Example

-
Image
Using Query Strings for Request Culture and Simplifying Localization with IStringLocalizer Interface Let’s see how to implement Localization in ASP.NET Core MVC. In the first example, I am going to use the IStringLocalizer Interface in the controller to implement Localization. Additionally, when the user passes the desired language through the query string, it will display content in that language. First, let’s configure the settings in the program.cs file. builder.Services.AddLocalization(options => options.ResourcesPath = "Resources");  The AddLocalization method adds the localization service to the service container. I have added the supported cultures here. I have added two cultures: en for English and nl for Dutch. In the RequestCultureProviders , I have included QueryStringRequestCultureProvider() . This allows the system to determine the culture information from the query string. UseRequestLocalization initializes a RequestLocalizationOptions objec
Read more