Сегодня рассмотрим, что из себя представляют компоненты 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.