Understanding How to Inject Services in .NET Core Blazor Server App View Page

In .NET Core, we have built in Dependency Injection feature, .NET Core's Blazor application's Razor Page also provides feature to use Dependency Injection in the view page, Users can inject services into Razor's page using @inject keyword followed by name of the service, following steps help you to create Service and know how to inject that service in .NET Core Blazor Server App Razor View Page:

To begin with implementing and using Dependency Injection and injecting Services into Razor View Pages of Blazor Server app, we need to create the app, we can create it with either Visual Studio or using .NET CLI Commands:

Step 1: Use the below .NET CLI command or use Visual Studio "Create New Project

dotnet new blazorserver -o InjectServiceApp

Or Create it using Visual Studio => Create New Project window, select "Blazor Server App" option and click on Next button, specify the Project Name, Location & Solution Name in the fields and click on Next button, In the next window, select the Target Framework & Authentication Type and click on Create button to create the Project

Step 2: Now, create the IUserService.cs interface and UserService.cs class in Data folder of the project and add below code:

1.    interface IUserService
2.    {
3.        List<string> GetUsers();
4.        void AddUser(string name);
5.    }

1.   public class UserService: IUserService
2.    {
3.         private List<string> _users = new List<string>();
4.         public List<string> GetUsers()
5.         {
6.             return _users;
7.         }
8. 
   
9.         public void AddUser(string name)
10.         {
11.             _users.Add(name);
12.         }
13.    }

In the above UserService, we have created it by inhering it from IUserService which has 2 methods GetUsers() and AddUser(string name). We are adding the users into a private variable _users when AddUser(string name) method is called and sending the user list(_users) when GetUsers() method is called.

Step 3: Now we will be Configuring the above UserService in Startup.cs class inside ConfigureServices() method.

1.   public void ConfigureServices(IServiceCollection services)
2.   {
3.       services.AddRazorPages();
4.       services.AddServerSideBlazor();
5.       services.AddScoped<IUserService, UserService>();
6.   }

In the above ConfigureServices() method, we have specified the lifetime of the UserService as Scoped, you can modify it to Singleton or Transient based on your requirement.

Step 4: Now, We are going to use the above UserService in our Razor view page, to use it we have to inject the service using below syntax:

1. @page "/"
2. @inject InjectServiceApp.Data.IUserService userService
3. 
   
4. @if (_users != null)
5. {
6.     <ul>
7.         @foreach (var user in _users)
8.         {
9.             <li>@user</li>
10.         }
11.     </ul>
12. }
13. 
    
14. @code{
15.     private List<string> _users;
16.     protected override void OnInitialized()
17.     {
18.         userService.AddUser("John");
19.         userService.AddUser("Brian");
20.         userService.AddUser("Tom");
21.         _users = userService.GetUsers();
22.     }
23. }

As per above code, we have to inject the Service using @inject keyword and add the service name which we have to inject in the Blazor Application's Razor View Page. you can see we have used the object of the injected IUserService inside the @code to call the methods of the service. Using above code, you will get output as shown below:

You can try above way of injecting Services into your Blazor application's Razor View Page.