Code-behind в Blazor

Обычно, компонент Blazor создается в одном файле с расширением .razor. В этом файле содержится и HTML-разметка компонента с необходимыми привязками данных и код программной части — обработка событий, бизнес-логика и т.д. С одной стороны, такой подход к разработке довольно привычный (особенно, если до этого вы разрабатывали приложения с использованием .NET Framework), а, с другой стороны, не совсем (а, точнее, совсем) не удобен в том случае, если над разметкой и логикой компонента работают разные люди. В этом случае, Blazor позволяет разделить разметку и код программной части компонента.

Тестовый компонент

Порядок разделения разметки и кода программной части компонента рассмотрим на примере компонента Counter, который используется в демонстрационном приложении Blazor по умолчанию и выглядит следующим образом:

@page "/counter"

<PageTitle>Counter</PageTitle>

<h1>Counter</h1>

<p role="status">Current count: @currentCount</p>

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

@code {
    private int currentCount = 0;

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

Логика у этого компонента элементарная — клик по кнопке увеличивает значение счётчика на 1.

Шаг 1. Создаем файл кода программной части

На данный момент наш счётчик находится в одном файле — Counter.razor. Создадим в папке Pages нашего приложения файл программной части, назвав его Counter.razor.cs. В результате вы увидите такую структуру папок и файлов в приложении:

Это означает, что мы создали файл кода программной части для компонента Counter.

Шаг 2. Пишем код программной части

В принципе, в созданном нами файле мы можем назвать наш класс как угодно, однако, рекомендуется назвать наш класс также, как и компонент, но, с добавлением в конце названия слова Base. То есть, в нашем случае, класс будет называться CounterBase:

namespace BlazorApp3.Pages
{
    public class CounterBase: ComponentBase
    {
    
    }
}

Теперь перенесем весь код, содержащийся в секции @code{} из файла Counter.razor в наш класс, изменив модификаторы доступа на public:

namespace BlazorApp3.Pages
{
    public class CounterBase
    {
        public int currentCount = 0;

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

На этом шаге Visual Studio вы даст две ошибки, которые обнаружит в Counter.razor:

Это нормально, так как компонент пока не знает откуда брать данные.

Шаг 3. Добавляем директиву @inherits в файл разметки

Директива @inherits позволяет полностью управлять классом, от которого наследуется представление. В нашем случае код разметки должен быть следующим:

@page "/counter"

@inherits CounterBase

<PageTitle>Counter</PageTitle>

<h1>Counter</h1>

<p role="status">Current count: @currentCount</p>

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

Как видите, мы полностью избавились в этом файле от кода C#, указав при этом с помощью директивы Razor @inherits,  что наш компонент наследуется от CounterBase. Теперь можно запустить приложение и убедиться, что счётчик работает также, как и прежде, но при этом, мы разделили программную части и разметку по двум файлам.

Итого

Чтобы отделить программную часть компонента Blazor от разметки, необходимо выполнить три шага — создать файл кода программной части, создать новый класс для компонента, унаследовав его от ComponentBase и унаследовать компонент Blazor от вновь созданного класса, используя директиву Razor @inherits.