Три способи організувати код у BlazorServer

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

Привіт!

Хочу розказати, як можна організовувати код в BlazorServer.

Code in client

Перший варіант — це зберігати код на клієнті (в razor файлі). Візьмемо Counter.razor файл, в якому поєднується html та C# код.

@page "/counter"

<h1>Counter</h1>

<p>Current count: @currentCount</p>

<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>

@code {
    private int currentCount = 0;

    private void IncrementCount()
    {
        currentCount++;
    }
}

На цій сторінці є приватна зміна currentCount та метод IncrementCount, який інкрементує цю зміну. Зі сторони html є кнопка Click me, яка викликає C# метод IncrementCount та вивід зміної currentCount на сторінку. Цей варіант варто використовувати, тільки якщо кількість коду зовсім не значна.

Inheritance

Інший варіант — це створити новий клас, який буде наслідувати razor сторінка. Цей клас має наслідуватись від ComponentBase.

using Microsoft.AspNetCore.Components;

namespace BlazorLearn.Pages
{
    public class CounterBase : ComponentBase
    {
        protected int currentCount = 0;

        protected void IncrementCount()
        {
            currentCount++;
        }
    }
}

Я перемістив код з Counter.razor в новий клас CounterBase. Тільки в цьому випадку доведеться змінити модифікатор доступу з private на protected. В Counter.razor потрібно додати @inherits CounterBase

@page "/counter"
@inherits CounterBase

<h1>Counter</h1>

<p>Current count: @currentCount</p>

<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>

Щоб додати логер чи інший компонент, конструктор використати не вийде. Але є інший спосіб, через властивість з модифікаторо Inject.

using Microsoft.AspNetCore.Components;
using Microsoft.Extensions.Logging;

namespace BlazorLearn.Pages
{
    public class CounterBase : ComponentBase
    {
        [Inject]
        public ILogger<CounterBase> logger { get; set; }

        protected int currentCount = 0;

        protected void IncrementCount()
        {
            logger.LogInformation("CounterExecuted");
            currentCount++;
        }
    }
}

Partial class

Третій варіант з використанням partial класів. Для цього я створю новий partial клас з такою ж назвою, як і razor сторінка.

namespace BlazorLearn.Pages
{
    public partial class Counter
    {
        private int currentCount = 0;
        private void IncrementCount()
        {
            currentCount++;
        }
    }
}

Модифікатори доступу можуть залишитись private, а в самій razor сторінці змінювати нічого не потрібно.

@page "/counter"

<h1>Counter</h1>

<p>Current count: @currentCount</p>

<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>

Logger чи інші компоненти з DI добавляються так само, як і в другому варіанті. За допомогою властивостей з атрибутом Inject.

        [Inject]
        public ILogger<Counter> Logger { get; set; }