Материал подготовлен на основе обучающего курса Алана Омари (канал freeCodeCamp.org). В статье детально разобраны основы архитектуры Blazor, работа с компонентами, режимы рендеринга и создание полноценного CRUD-приложения на базе .NET 8.
🏗️ Что такое Blazor и как устроена его архитектура 0:00
Blazor — это современный фронтенд-фреймворк, входящий в состав платформы .NET, который позволяет создавать интерактивные веб-интерфейсы, используя C# вместо JavaScript . Основная идея технологии заключается в использовании единого стека разработки (HTML, CSS и C#) как для клиентской, так и для серверной части приложения. Это позволяет разработчикам обмениваться кодом общей логики между сервером и клиентом .
Ключевой особенностью Blazor является его компонентная архитектура. Компонент в Blazor — это многоразовый элемент пользовательского интерфейса (UI), который инкапсулирует в себе разметку и логику обработки событий . Важно отметить, что сфера применения фреймворка не ограничивается только вебом: благодаря подходу Blazor Hybrid можно создавать нативные мобильные и десктопные приложения, смешивая веб-технологии и нативные возможности платформ .
Разбор структуры проекта в .NET 8
При создании проекта с использованием шаблона «Blazor Web App» формируется стандартная иерархия файлов :
File.csproj: содержит настройки сборки, версию .NET и включенные зависимости .Program.cs: точка входа в приложение. Здесь настраиваются сервисы (например,AddRazorComponentsиAddInteractiveServerComponents) и промежуточное ПО (middleware) для обработки HTTP-запросов, перенаправления на HTTPS и защиты от CSRF-атак .wwwroot: папка для статичных активов: CSS, JavaScript, изображений .App.razor: корневой компонент, в котором определены базовый HTML-документ, роутер и скрипты Blazor ._Imports.razor: специальный файл, где указываются глобальные директивыusing. Это избавляет от необходимости импортировать одни и те же пространства имен в каждом компоненте .
🧩 Компоненты и обработка событий 10:09
Файлы компонентов имеют расширение .razor и представляют собой смесь HTML и C#. Синтаксис Razor позволяет внедрять логику рендеринга (условия, циклы) непосредственно в разметку .
Параметры и жизненный цикл
Для передачи данных в компонент используются параметры. Чтобы объявить параметр, необходимо создать публичное свойство в блоке @code и пометить его атрибутом [Parameter] . Например, в учебном примере счетчик (Counter) принимает параметр IncrementAmount, определяющий шаг увеличения значения при нажатии кнопки .
Обработка событий пользовательского интерфейса
Интерфейсные события (клики, ввод текста, наведение мыши) привязываются к элементам с помощью специальных атрибутов. Алан Омари выделяет несколько типов событий:
- События клика (
@onclick): наиболее распространенный триггер, вызывающий метод C# для изменения состояния приложения . - События ввода (
@oninput): срабатывают мгновенно при наборе текста в поле. В обработчик передается аргументChangeEventArgs, через который можно получить текущее значение поля ввода . - События мыши (
@onmouseover): позволяют реагировать на наведение курсора на элементы . - События фокуса (
@onfocus,@onblur): фиксируют моменты, когда пользователь заходит в поле ввода или покидает его .
🔗 Привязка данных (Data Binding) 31:30
Data Binding позволяет синхронизировать состояние компонентов с источниками данных.
- Односторонняя привязка: данные передаются из C#-кода в UI для отображения с помощью символа
@. - Двусторонняя привязка (
@bind): изменения в UI автоматически обновляют значения в коде, и наоборот. По умолчанию синхронизация в текстовых полях происходит при событииonchange(после потери фокуса), но это поведение можно изменить наoninputдля мгновенного обновления .
Продвинутый атрибут @bind:after позволяет запустить определенный метод сразу после завершения привязки. Это удобно, например, для реализации функции автоматического поиска, когда запрос к базе данных отправляется сразу после ввода текста пользователем .
🔄 Режимы рендеринга в Blazor 38:20
Одним из самых важных аспектов Blazor является гибкость настройки того, где именно исполняется код.
- Static Server-Side Rendering (Static SSR): компонент рендерится на сервере и отправляет клиенту чистый HTML. Состояние на сервере не сохраняется. Идеально для простых страниц без сложной интерактивности .
- Streaming Rendering: сервер начинает отправлять контент клиенту по мере готовности данных. Это полезно для страниц с долгоживущими асинхронными задачами (например, запросы к внешнему API), позволяя пользователю увидеть структуру страницы и «заглушку» загрузки до получения всех данных .
- Interactive Server: управление UI-событиями происходит на сервере через соединение WebSocket (с использованием SignalR). Это обеспечивает быструю реакцию интерфейса, но требует постоянного подключения к серверу .
- Interactive WebAssembly (WASM): код компонента и среда выполнения .NET скачиваются в браузер и исполняются на стороне клиента. После первой долгой загрузки приложение работает автономно и не создает нагрузки на сервер .
- Interactive Auto: комбинированный режим. Первая загрузка происходит через сервер (для скорости), в то время как в фоновом режиме скачиваются библиотеки WebAssembly. При последующих посещениях приложение полностью переключается на клиентский рендеринг .
🛠️ Создание CRUD-приложения со Scaffold 55:09
Для демонстрации сложных операций Алан Омари создает приложение для управления списком студентов, используя Entity Framework (EF) Core и SQL Server .
Шаги разработки:
- Создание модели: определяется класс
Studentс полями ID, Name, Age и Birthday . - Scaffolding: Visual Studio позволяет автоматически сгенерировать страницы для создания, чтения, обновления и удаления (CRUD) записей на основе модели данных и контекста базы данных (
DbContext) . - Миграции: с помощью команд
Add-MigrationиUpdate-Databaseв консоли диспетчера пакетов NuGet структура из C#-кода переносится в физическую базу данных SQL Server . - Работа с данными в UI:
- QuickGrid: встроенный компонент Blazor для отображения табличных данных с поддержкой сортировки и пагинации .
- EditForm: специальный компонент для работы с формами, который автоматически связывает поля ввода с объектом модели .
- Валидация: использование атрибутов данных (Data Annotations) в модели, таких как
[Required]или[Range], позволяет автоматически проверять корректность ввода и выводить сообщения об ошибках .
Для получения мгновенной валидации («на лету») при выходе из поля ввода, Алан рекомендует включать интерактивный режим рендеринга (@rendermode InteractiveServer) для страниц заполнения форм .
