# Blazor с нуля: руководство по созданию современных веб-приложений на C#

Источник: https://www.youtube.com/watch?v=CpbRAWgFBRQ
Канал: freeCodeCamp.org
Опубликовано: 18.07.2024

---

Материал подготовлен на основе обучающего курса Алана Омари (канал freeCodeCamp.org). В статье детально разобраны основы архитектуры Blazor, работа с компонентами, режимы рендеринга и создание полноценного CRUD-приложения на базе .NET 8.

## 🏗️ Что такое Blazor и как устроена его архитектура
[[JUMP:00:00]]

Blazor — это современный фронтенд-фреймворк, входящий в состав платформы .NET, который позволяет создавать интерактивные веб-интерфейсы, используя C# вместо JavaScript [00:51]. Основная идея технологии заключается в использовании единого стека разработки (HTML, CSS и C#) как для клиентской, так и для серверной части приложения. Это позволяет разработчикам обмениваться кодом общей логики между сервером и клиентом [01:16].

Ключевой особенностью Blazor является его компонентная архитектура. Компонент в Blazor — это многоразовый элемент пользовательского интерфейса (UI), который инкапсулирует в себе разметку и логику обработки событий [01:30]. Важно отметить, что сфера применения фреймворка не ограничивается только вебом: благодаря подходу Blazor Hybrid можно создавать нативные мобильные и десктопные приложения, смешивая веб-технологии и нативные возможности платформ [02:10].

### Разбор структуры проекта в .NET 8
При создании проекта с использованием шаблона «Blazor Web App» формируется стандартная иерархия файлов [02:37]:

*   **`File.csproj`**: содержит настройки сборки, версию .NET и включенные зависимости [04:48].
*   **`Program.cs`**: точка входа в приложение. Здесь настраиваются сервисы (например, `AddRazorComponents` и `AddInteractiveServerComponents`) и промежуточное ПО (middleware) для обработки HTTP-запросов, перенаправления на HTTPS и защиты от CSRF-атак [05:27].
*   **`wwwroot`**: папка для статичных активов: CSS, JavaScript, изображений [06:49].
*   **`App.razor`**: корневой компонент, в котором определены базовый HTML-документ, роутер и скрипты Blazor [08:11].
*   **`_Imports.razor`**: специальный файл, где указываются глобальные директивы `using`. Это избавляет от необходимости импортировать одни и те же пространства имен в каждом компоненте [09:30].

## 🧩 Компоненты и обработка событий
[[JUMP:10:09]]

Файлы компонентов имеют расширение `.razor` и представляют собой смесь HTML и C#. Синтаксис Razor позволяет внедрять логику рендеринга (условия, циклы) непосредственно в разметку [10:36].

### Параметры и жизненный цикл
Для передачи данных в компонент используются параметры. Чтобы объявить параметр, необходимо создать публичное свойство в блоке `@code` и пометить его атрибутом `[Parameter]` [14:04]. Например, в учебном примере счетчик (Counter) принимает параметр `IncrementAmount`, определяющий шаг увеличения значения при нажатии кнопки [14:22].

### Обработка событий пользовательского интерфейса
Интерфейсные события (клики, ввод текста, наведение мыши) привязываются к элементам с помощью специальных атрибутов. Алан Омари выделяет несколько типов событий:

1.  **События клика (`@onclick`)**: наиболее распространенный триггер, вызывающий метод C# для изменения состояния приложения [17:10].
2.  **События ввода (`@oninput`)**: срабатывают мгновенно при наборе текста в поле. В обработчик передается аргумент `ChangeEventArgs`, через который можно получить текущее значение поля ввода [22:03].
3.  **События мыши (`@onmouseover`)**: позволяют реагировать на наведение курсора на элементы [24:52].
4.  **События фокуса (`@onfocus`, `@onblur`)**: фиксируют моменты, когда пользователь заходит в поле ввода или покидает его [29:11].

## 🔗 Привязка данных (Data Binding)
[[JUMP:31:30]]

Data Binding позволяет синхронизировать состояние компонентов с источниками данных.

*   **Односторонняя привязка**: данные передаются из C#-кода в UI для отображения с помощью символа `@` [32:50].
*   **Двусторонняя привязка (`@bind`)**: изменения в UI автоматически обновляют значения в коде, и наоборот. По умолчанию синхронизация в текстовых полях происходит при событии `onchange` (после потери фокуса), но это поведение можно изменить на `oninput` для мгновенного обновления [34:47].

Продвинутый атрибут `@bind:after` позволяет запустить определенный метод сразу после завершения привязки. Это удобно, например, для реализации функции автоматического поиска, когда запрос к базе данных отправляется сразу после ввода текста пользователем [35:57].

## 🔄 Режимы рендеринга в Blazor
[[JUMP:38:20]]

Одним из самых важных аспектов Blazor является гибкость настройки того, где именно исполняется код.

*   **Static Server-Side Rendering (Static SSR)**: компонент рендерится на сервере и отправляет клиенту чистый HTML. Состояние на сервере не сохраняется. Идеально для простых страниц без сложной интерактивности [39:01].
*   **Streaming Rendering**: сервер начинает отправлять контент клиенту по мере готовности данных. Это полезно для страниц с долгоживущими асинхронными задачами (например, запросы к внешнему API), позволяя пользователю увидеть структуру страницы и «заглушку» загрузки до получения всех данных [40:34].
*   **Interactive Server**: управление UI-событиями происходит на сервере через соединение WebSocket (с использованием SignalR). Это обеспечивает быструю реакцию интерфейса, но требует постоянного подключения к серверу [43:00].
*   **Interactive WebAssembly (WASM)**: код компонента и среда выполнения .NET скачиваются в браузер и исполняются на стороне клиента. После первой долгой загрузки приложение работает автономно и не создает нагрузки на сервер [43:26].
*   **Interactive Auto**: комбинированный режим. Первая загрузка происходит через сервер (для скорости), в то время как в фоновом режиме скачиваются библиотеки WebAssembly. При последующих посещениях приложение полностью переключается на клиентский рендеринг [44:23].

## 🛠️ Создание CRUD-приложения со Scaffold
[[JUMP:55:09]]

Для демонстрации сложных операций Алан Омари создает приложение для управления списком студентов, используя Entity Framework (EF) Core и SQL Server [58:30].

### Шаги разработки:

1.  **Создание модели**: определяется класс `Student` с полями ID, Name, Age и Birthday [57:49].
2.  **Scaffolding**: Visual Studio позволяет автоматически сгенерировать страницы для создания, чтения, обновления и удаления (CRUD) записей на основе модели данных и контекста базы данных (`DbContext`) [58:18].
3.  **Миграции**: с помощью команд `Add-Migration` и `Update-Database` в консоли диспетчера пакетов NuGet структура из C#-кода переносится в физическую базу данных SQL Server [1:02:23].
4.  **Работа с данными в UI**:
    *   **QuickGrid**: встроенный компонент Blazor для отображения табличных данных с поддержкой сортировки и пагинации [1:05:18].
    *   **EditForm**: специальный компонент для работы с формами, который автоматически связывает поля ввода с объектом модели [1:08:27].
    *   **Валидация**: использование атрибутов данных (Data Annotations) в модели, таких как `[Required]` или `[Range]`, позволяет автоматически проверять корректность ввода и выводить сообщения об ошибках [1:13:44].

Для получения мгновенной валидации («на лету») при выходе из поля ввода, Алан рекомендует включать интерактивный режим рендеринга (`@rendermode InteractiveServer`) для страниц заполнения форм [1:15:22].