Як працює Dependency Injection в Blazor Server

Підписуйтеся на Telegram-канал «DOU #tech», щоб не пропустити нові технічні статті

Привіт!

Сьогодні поговоримо, як працює dependency injection в blazor server. Якщо ви знайомі з dependency injection в asp.net core то відміностей тут немає. Dependency injection налаштовуєтся в Startup.cs в корені проекта. Одразу після створення проекту це матиме ось такий вигляд:

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

Розберемо, що тут відбуваться.

services.AddRazorPages() — додає підтримку razor pages в проект.

services.AddServerSideBlazor() — додає підтримку blazor server в проект .

services.AddSingleton<WeatherForecastService>() — реєструє клас WeatherForecastService в DI.

WeatherForecastService в прикладі додається як Singleton. Може бути ще Scoped i Transient. Детальніше на них подивимось далі.

Спробуємо додати новий клас в DI і перевірити як він працює з різними типами (Singleton, Scoped, Transient).

Для цього в папці Data я створю файл, який буде генерувати випадкове число.

using System;

namespace BlazorLearn.Data
{
    public class RandomData
    {
        private readonly int randomData;

        public RandomData()
        {
            Random random = new Random();
            randomData = random.Next();
        }

        public int GetRandomData()
        {
            return randomData;
        }
    }
}

В класі RandomData в конструкторі генерується випадкове число. А метод GetRandomData вертає його. Для того щоб використати клас в DI потрібно створити інтерфейс. Можна користуватись і без інтерфейса. Aле завдяки інтерфейсу легко можна замінити в реалізації цей клас на інший. Так буде виглядати інтерфейс.

namespace BlazorLearn.Data
{
    public interface IRandomData
    {
        int GetRandomData();
    }
}

Singleton

Тепер клас можна зареєструвати в DI. Поченемо з Singleton. Для цього в Startup.cs файлі в методі ConfigureServices потрібно додати:

services.AddSingleton<IRandomData, RandomData>();

Тепер кожен раз, як хтось буде використовувати інтерфейс IRandomData, буде підставлено RandomData.

Тепер в index.razor я викличу GetRandomNumber метод.

@page "/"
@using BlazorLearn.Data
@inject IRandomData RandomData
<h1>Hello, world!</h1>

Welcome to your new app.

Your random number is @RandomData.GetRandomData()
<SurveyPrompt Title="How is Blazor working for you?" />

@inject IRandomData RandomData виликає конструктор нашого класу. І запустимо аплікацію.

Якщо я відкрию аплікацію в іншому браузері випадкове число залишиться таким самим. Саме так працює singleton. Об’єкт створюється один раз при старті аплікації.

Scoped

Прдивимось тепер як працює scoped. Замінимо AddSingleton на AddScoped

services.AddScoped<IRandomData, RandomData>();

І запустимо аплцікацію. Тепер якщо я перейду на іншу сторінку сайту, а потім повернусь назад, число залишиться таким самим. А от якщо я оновлю сторінку, то число поміняться. Scoped обєкти створюються один раз на кожен запит.

Transient

І останій тип це Transient. Тепер замінимо AddScoped на AddTransient

services.AddTransient<IRandomData, RandomData>();

Запустимо аплікацію. І тепер навіть якщо перейти з однієї вкладки на іншу, число змінюється кожен раз.

DI in Class

І на кінець: подивимось, як можна використати RandomData клас в іншому класі за допомогою DI.

Для прикладу візьмемо Data/WeatherForecastService.cs. В цьому класі потрібно зробити зміну типу IRandomData і ініціалізувати її в конструкторі. І тепер її можна використовувати в будь якому місці цього класу.

using System;
using System.Linq;
using System.Threading.Tasks;

namespace BlazorLearn.Data
{
    public class WeatherForecastService
    {
        private IRandomData _randomData;

        private static readonly string[] Summaries = new[]
        {
            "Freezing", "Bracing", "Chilly", "Cool", "Mild", "Warm", "Balmy", "Hot", "Sweltering", "Scorching"
        };

        public WeatherForecastService(IRandomData randomData)
        {
            _randomData = randomData;
        }

        public Task<WeatherForecast[]> GetForecastAsync(DateTime startDate)
        {
            var rng = new Random();
            return Task.FromResult(Enumerable.Range(1, 5).Select(index => new WeatherForecast
            {
                Date = startDate.AddDays(index),
                TemperatureC = _randomData.GetRandomData(),
                Summary = Summaries[rng.Next(Summaries.Length)]
            }).ToArray());
        }
    }
}

_randomData.GetRandomData() я запишу в зміну TemperatureC і запущу аплікацію. На сторінці FetchData буде тепература, зегенерована за допомогою GetRandomData.

Важливо, щоб в DI WeatherForecastService та RandomData були одинаково додані.

            services.AddScoped<WeatherForecastService>();
            services.AddScoped<IRandomData, RandomData>();