Dependency injection in Blazor Server

Dependencies are services or objects that a class/component needs to perform its function. Dependency injection, or DI, is a design pattern in which a class requests dependencies from other sources rather than creating them.

Blazor Server's DI framework provides dependencies to a class upon instantiation. You can use Blazor Server DI to increase flexibility and modularity on your websites.

Download the example for a working example containing the code snippets in this guide.

Creating an injectable service

Create a new class GreetingService under the Data folder.

namespace DependencyExampleBlazorSchool.Data
{
    public class GreetingService
    {
        public string Greet()
        {
            return $"Hello World from {nameof(GreetingService)}";
        }
    }
}

The GreetingService has one method Greet that returns a string. We will call this method inside a component.

Registering an injectable service

After we have our injectable service, the next step is to register it to Blazor Server and then it will be injectable anywhere on the website.

Open the Startup.cs and modify the ConfigureService as follow:

public void ConfigureServices(IServiceCollection services)
{
    services.AddRazorPages();
    services.AddServerSideBlazor();
    services.AddSingleton<GreetingService>();
}

The services.AddSingleton<GreetingService>(); line will register the GreetingService as a singleton service. There are 3 types of services: singleton, transient, scoped. Here is the comparison between the types of services:

Injecting services

Injecting services results in making them visible to a component.

To inject a dependency into a component, use @inject directive at the directive section.

@inject Data.GreetingService GreetingService

The syntax of the inject directive is @inject ServiceType ServiceInstanceName. In the example above, the Data.GreetingService is the type of service and we are calling the injecting instance is GreetingService.

The inject statement can be reduced to @inject GreetingService GreetingService by adding @using Data to import Data namespace before the inject statement.

After the service is injected into the component, you can call methods of GreetingService.

@using Data 
@inject GreetingService GreetingService
@page "/basic-injection" 

<h3>@GreetingService.Greet()</h3>

In this example, you are using Greet() method from GreetingService to generate a string when Blazor Server renders the page.

Nested injecting services

The injection is not bound to a component, you can also inject a service into another service.

1. Create a new class WaiterService under Data folder.

namespace DependencyExampleBlazorSchool.Data
{
    public class WaiterService
    {
        public string Serve()
        {
            return "How can I help you?";
        }
    }
}

2. Declare a private variable for GreetingService.

private readonly GreetingService _greetingService;

3. Declare a constructor and inject GreetingService into WaiterService.

public WaiterService(GreetingService greetingService)
{
    _greetingService = greetingService;
}

4. Now you can call methods in GreetingService.

public string Serve()
{
    string greeting = _greetingService.Greet();

    return $"{greeting}. How can I help you?";
}

At this point, you will have the whole class as follow:

namespace DependencyExampleBlazorSchool.Data
{
    public class WaiterService
    {
        private readonly GreetingService _greetingService;

        public WaiterService(GreetingService greetingService)
        {
            _greetingService = greetingService;
        }

        public string Serve()
        {
            string greeting = _greetingService.Greet();

            return $"{greeting}. How can I help you?";
        }
    }
}

You can register and inject the WaiterService to a component to see the result as with GreetingService.