Компоненты Blazor

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

  1. Строку с текстом «Выберите дату своего рождения:»
  2. Поле ввода даты: <input type="date" @bind="data">
  3. Кнопку, клик по которой будет рассчитывать возраст человека: <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.

Подписаться
Уведомить о
guest
0 Комментарий
Старые
Новые Популярные
Межтекстовые Отзывы
Посмотреть все комментарии