Сегодня рассмотрим, что из себя представляют компоненты Blazor, а также попробуем написать свой собственный компонент Blazor для нашего приложения.
Что такое «компонент Blazor»?
Основным строительным блоком в Blazor является компонент. Если вы ранее работали с WinForms, WPF или с другими платформами для разработки приложений с графическим интерфейсом, то, наверняка, представляете себе, что из себя представляет компонент, хотя бы в общих чертах.
Компоненты Blazor — это отдельный самодостаточный элемент пользовательского интерфейса, например, меню, кнопка, диалоговое окно и так далее, который описывает как визуальную часть так и связанную с ней логику. Компоненты Blazor, как и вообще компоненты могут использоваться в других компонентах, их можно переносить из одного проекта в другой. Название компонента Blazor обязательно начинается с заглавной буквы, а сам компонент сохраняется в файле с расширением .razor
.
Визуальная часть компонента Blazor описывается на HTML+CSS, а логика компонента — на языке C#. Связующим звеном, при этом, выступает язык разметки Razor. Вернемся к нашему шаблону приложения Blazor Server и посмотрим на компонент Counter.razor, который в нашем приложении реализует счётчик:
@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++; } }
Самая первая строка: @page "/counter"
определяет путь (маршрут) по которому будет доступен наш компонент. Далее используется компонент Blazor под названием PageTitle
— этот компонент позволяет определить Title
для страницы, которую пользователь увидит в браузере.
Затем начинается визуальная часть компонента — HTML-разметка:
<h1>Counter</h1> <p role="status">Current count: @currentCount</p> <button class="btn btn-primary" @onclick="IncrementCount">Click me</button>
и здесь мы снова встречаем «магический» символ @
. Этот символ указывает на то, что перед нами не обычный текст или html-разметка, а какой-либо C#-код — переменная, цикл, условие и т.д. То есть, всё, что следует за символом @ и находится в фигурных скобках относится к C#. Как можно видеть в коде выше, в заголовок h1
выводится строка «Current count:» и значение переменной currentCount
. У кнопки определено событие onclick по которому происходит изменение значения счётчика. Сама же логика работы компонента находится в файле ниже и заключена в @{}
.
@code { private int currentCount = 0; private void IncrementCount() { currentCount++; } }
В этой части компонента нам уже должно быть всё предельно понятно — метод IncrementCount
наращивает значение счётчика на 1. Таким образом выглядит простой компонент Blazor.
Конечно, тем, кто привык использовать при разработке паттерны проектирования типа MVC или MVVM такой подход к построению компонентов Blazor может показаться шагом назад в разработке, но, забегая вперед, можно сказать, что и в Blazor можно применить тот же MVVM, если уж сильно потребуется.
Пишем свой компонент Blazor
Напишем свой компонент Blazor, который будет рассчитывать возраст человека в зависимости от выбранного значения в поле ввода даты. Для этого в папке Pages
нашего проекта создадим новый файл с названием Age.razor
:
Напишем следующим код компонента:
@page "/age" <PageTitle>Калькулятор возраста</PageTitle> <p>Выберите дату своего рождения:</p> <input type="date" @bind="data"> <button @onclick="@CalcAge">Рассчитать возраст</button> <p>Ваш возраст: @age лет</p> @code { DateOnly data = DateOnly.FromDateTime(DateTime.Now); int age = 0; public void CalcAge() { age = DateTime.Now.Year - data.Year; } }
Здесь мы указали маршрут до страницы: @page "/age"
. В визуальной части компонента мы определили:
- Строку с текстом «Выберите дату своего рождения:»
- Поле ввода даты:
<input type="date" @bind="data">
- Кнопку, клик по которой будет рассчитывать возраст человека:
<button @onclick="@CalcAge">Рассчитать возраст</button>
Здесь стоит обратить внимание на поле ввода даты: в атрибуте @bind
мы связали значение, которое выберет пользователь со значением переменной data
в логической части нашего компонента. Теперь можно сохранить файл и в браузере перейти на страницу с нашим компонентом:
Каждый раз переходить к странице, используя адресную строку браузера — не совсем хорошо и правильно, поэтому добавим ещё один пункт меню в сайдбар. Для этого откроем файл Shared/NavMenu.razor
и допишем следующий код:
<div class="@NavMenuCssClass" @onclick="ToggleNavMenu"> //код других пунктов меню //..... <div class="nav-item px-3"> <NavLink class="nav-link" href="age"> <span class="oi oi-list-rich" aria-hidden="true"></span> Калькулятор возраста </NavLink> </div> </nav> </div>
Снова сохраняем изменения и видим, что в меню появился новый пункт:
Итого
Сегодня мы разобрались с тем, что из себя представляют компоненты Blazor, а также создали свой первый компонент Blazor и использовали его в нашем проекте Blazor Server.