Поддержка разделяемых классов в компонентах Razor

В Blazor поддерживаются разделяемые (частичные, partial) классы. Такие классы удобно использовать при создании компонентов Razor.

Способы создания компонентов Razor

Создавать компоненты Razor мы можем двумя способами. Первый способ, который мы использовали на протяжении всей этой части, заключается в том, что код C# компонента располагается в одном или нескольких блоках @code. Таким образом, компонент Razor представляет из себя физически один файл с расширением .razor в котором сосредоточена и логика компонента и его визуальная часть.

Второй способ создания компонента Razor — разделение визуальной части и логики компонента на два файла. В этом способе первый файл с расширением .razor отвечает за разметку компонента (визуальную часть), а второй (с расширением .razor.cs) представляет собой разделяемый класс в котором сосредотачивается вся логика компонента. И этот способ мы рассмотрим ниже.

Создание компонента Razor с использованием разделяемого класса

Создадим новое приложение Blazor Hybrid и добавим в него новый компонент с названием MyCounter

Теперь добавим в эту же папку (Components) новый файл с именем MyCounter.razor.cs. Вы должны увидеть следующее расположение этого файла в обозревателе решений:

При этом, Visual Studio сразу покажет вам ошибку:

добавим модификатор partial к классу, а также сразу определим в нем логику компонента:

namespace BlazorPartial.Components
{
    public partial class MyCounter
    {
        private int counterValue = 0;

        public void IncrementCounter()
        {
            counterValue++;
        }
        public void DecrementCounter()
        {
            counterValue--;
        }
    }
}

Теперь перейдем к файлу с разметкой компонента и добавим в него следующий код:

<h3>MyCounter</h3>

<div>
    <button type="button" class="btn btn-danger" @onclick="DecrementCounter">-1</button>
    @counterValue 
    <button type="button" class="btn btn-primary" @onclick="IncrementCounter">+1</button>
</div>

Собственно, на этом разработка компонента закончена. Здесь мы полностью вынесли всю логику работы компонента в отдельный класс. Теперь добавим этот компонента на главную страницу приложения:

@page "/"

<h1>Hello, world!</h1>

<MyCounter></MyCounter>

и запустим приложение:

Использование разделяемых классов при создании компонентов Razor имеет, как минимум, одно очень важное преимущество — несколько человек могут одновременно работать над компонентом. Дизайнеры — работают над визуальной частью, программисты — над логикой.

Изоляция CSS

Строго говоря, изоляция CSS в Blazor доступна для всех компонентов вне зависимости от того, каким способом они создавались.

Изоляция CSS в Blazor позволяет создавать для отдельных компонентов свои собственные файлы стилей. Создание собственного CSS-файла для компонента похоже на использование разделяемого класса — достаточно создать в папке с компонентом файл с именем компонента и расширением .razor.css. Например, создадим такой файл в нашем приложении:

и добавим этот файл оформление заголовка h1:

h1 {
    font-size: 70px;
    font-weight: 600;
    color: #fdfdfe;
    text-shadow: 0px 0px 5px #b393d3, 0px 0px 10px #b393d3, 0px 0px 10px #b393d3, 0px 0px 20px #b393d3;
}

И немного изменим разметку компонента:

<h1>MyCounter</h1>

Теперь у нас два стиля оформления заголовков первого уровня — один стиль применяется ко всем компонентам приложения по умолчанию, а второй — применяется конкретно к нашему компоненту. Запустим приложение и убедимся в этом наглядно:

Как видите, наш компонент использует стиль, определенный конкретно для него в файле MyCounter.razor.css.

Итого

При создании компонентов Razor мы можем использовать разделяемые классы, отделяя тем самый, логику компонента от его визуальной части. Также, в Blazor поддерживается изоляция CSS, благодаря которой мы можем определять собственные стили оформления html-содержимого для конкретного компонента.