ассмотрены особенности создания веб-приложений с помощью фреймворка Blazor с обновленной структурой, появившейся с выходом .NET 8. Приведены основные понятия, описана архитектура приложений для различных моделей хостинга (Blazor Server и Blazor WebAssembly) и даны практические примеры реализации таких приложений. Показаны способы привязки данных, настройки обратного вызова с использованием событий. Разобрано создание моделей и репозиториев для хранения данных, управление объектами при осуществлении CRUD-операций. Подробно описаны функции, специфичные для Blazor. Рассматриваются методы настройки рендеринга компонентов, их жизненный цикл, показаны способы создания и применения универсальных компонентов, предложены варианты внедрения готовых библиотек и реализации взаимодействия с JavaScript. Книга ориентирована на разработчиков, имеющих базовые знания о .NET, C# и веб-технологиях (HTML, JavaScript и CSS), желающих овладеть основами веб-разработки с помощью Blazor. Электронный архив на сайте издательства содержит результаты выполнения всех рассмотренных в книге проектов .
Для веб-разработчиков
Результаты выполнения всех рассмотренных в книге проектов можно скачать по ссылке https://zip.bhv.ru/9785977519847.zip, а также со страницы книги на сайте bhv.ru.
В книге рассмотрены:
- Разработка в Blazor
- Blazor Server и Blazor WebAssembly
- CRUD-операции в Blazor Server
- Взаимодействие с JavaScript
- Entity Framework Core и MS SQL Server
- Использование сторонних компонентов
Книгу “Разработка веб-приложений с помощью Blazor” можно купить со скидкой в интернет-магазине издательства “БХВ“.
Введение………………………………………………………………………………………………….. 7
Что вы узнаете из этой книги?…………………………………………………………………………………………………….. 9
Что нужно знать?……………………………………………………………………………………………………………………….. 12
Основные термины и понятия…………………………………………………………………………………………………… 13
Глава 1. Базовые сведения…………………………………………………………………….. 15
Модели хостинга……………………………………………………………………………………………………………………….. 15
Создание проекта на Blazor……………………………………………………………………………………………………… 20
Запуск приложения на локальном сервере……………………………………………………………………………… 24
Структура проекта…………………………………………………………………………………………………………………….. 26
Порядок работы приложения с рендерингом на сервере……………………………………………………….. 29
Рендеринг WebAssembly……………………………………………………………………………………………………………. 33
Автоматический рендеринг………………………………………………………………………………………………………. 34
Структура проекта Blazor WebAssembly…………………………………………………………………………………. 35
Структура домашней страницы приложения…………………………………………………………………………. 38
Знакомство с компонентом……………………………………………………………………………………………………….. 38
Подключение Blazor для проекта ASP.NET Core…………………………………………………………………….. 40
Глава 2. Привязки и организация кода………………………………………………….. 45
Однонаправленная привязка данных………………………………………………………………………………………. 45
Двунаправленная привязка данных…………………………………………………………………………………………. 47
Привязка событий………………………………………………………………………………………………………………………. 50
Раскрывающиеся списки…………………………………………………………………………………………………………… 51
Частичный класс………………………………………………………………………………………………………………………… 56
Наследование от класса ComponentBase………………………………………………………………………………… 59
Организация кода внутри компонента…………………………………………………………………………………….. 60
Вывод списка элементов в компонентах…………………………………………………………………………………. 63
Глава 3. Общие компоненты, параметры и обработка событий…………….. 69
Создание общих компонентов………………………………………………………………………………………………….. 69
Параметры компонента…………………………………………………………………………………………………………….. 70
Настройка отрисовки флажков………………………………………………………………………………………………… 73
Обработка обратного вызова…………………………………………………………………………………………………… 74
Глава 4. Отрисовка компонентов…………………………………………………………… 83
Понятие RenderFragment…………………………………………………………………………………………………………… 83
Настройка обратного вызова…………………………………………………………………………………………………… 86
Управление отрисовкой различных фрагментов……………………………………………………………………. 88
Настройка доступа к дочернему компоненту…………………………………………………………………………. 91
Создание шаблонных компонентов…………………………………………………………………………………………. 93
Глава 5. Атрибуты и каскадные параметры…………………………………………… 97
Управление атрибутами……………………………………………………………………………………………………………. 97
Сплаттинг атрибутов………………………………………………………………………………………………………………… 99
Прием атрибутов……………………………………………………………………………………………………………………… 102
Передача параметров через несколько уровней вложенности……………………………………………. 103
Каскадные параметры…………………………………………………………………………………………………………….. 106
Каскадная передача нескольких значений…………………………………………………………………………… 111
Глава 6. Маршрутизация……………………………………………………………………… 115
Базовая маршрутизация………………………………………………………………………………………………………….. 116
Параметры запроса…………………………………………………………………………………………………………………. 118
Навигация с помощью NavigationManager…………………………………………………………………………… 121
Ограничения параметров………………………………………………………………………………………………………… 123
Необязательные параметры…………………………………………………………………………………………………… 124
Обработка строки запроса с помощью [SupplyParameterFromQuery]……………………………….. 124
Обработка отсутствующих маршрутов………………………………………………………………………………… 126
Глава 7. Взаимодействие с JavaScript…………………………………………………… 129
Настройка подтверждений с использованием confirm…………………………………………………………. 129
Стилизованные уведомления Notyf……………………………………………………………………………………….. 132
Использование расширений для IJSRuntime…………………………………………………………………………. 136
Стилизованные уведомления SweetAlert2……………………………………………………………………………… 138
Настройка доступа к компонентам через директиву @ref………………………………………………….. 140
Глава 8. Жизненный цикл компонентов………………………………………………. 143
Методы OnInitialized и OnInitializedAsync…………………………………………………………………………….. 143
Методы OnParametersSet и OnParametersSetAsync………………………………………………………………. 148
Методы OnAfterRender и OnAfterRenderAsync………………………………………………………………………. 150
Метод StateHasChanged………………………………………………………………………………………………………….. 153
Метод ShouldRender………………………………………………………………………………………………………………… 155
Глава 9. Управление состоянием………………………………………………………….. 157
Использование каскадных параметров…………………………………………………………………………………. 158
Служба управления состоянием…………………………………………………………………………………………….. 161
Хранилище браузера………………………………………………………………………………………………………………. 165
Глава 10. Библиотека компонентов и виртуализация…………………………… 173
Создание библиотеки компонентов……………………………………………………………………………………….. 173
Компонент Virtualize……………………………………………………………………………………………………………….. 178
Получение объектов по мере необходимости……………………………………………………………………….. 182
Глава 11. Работа с формами и визуальным интерфейсом……………………… 185
Создание моделей предметной области………………………………………………………………………………… 186
Создание интерфейса для репозитория…………………………………………………………………………………. 188
Создание репозитория и реализация методов работы с данными……………………………………… 190
Настройка доступа к репозиторию……………………………………………………………………………………….. 193
Создание компонента для визуализации справочника………………………………………………………… 195
Настройка формы для ввода данных…………………………………………………………………………………….. 196
Настройка валидации……………………………………………………………………………………………………………… 200
Создание нового элемента справочника……………………………………………………………………………….. 204
Настройка вывода списка данных из справочника……………………………………………………………… 205
Настройка анимации загрузки компонента………………………………………………………………………….. 208
Настройка загрузки страницы изменения элемента справочника……………………………………… 210
Настройка редактирования элемента справочника…………………………………………………………….. 213
Обработка форм при статическом рендеринге на сервере………………………………………………….. 214
Настройка компонента для подтверждения удаления…………………………………………………………. 216
Удаление элемента из справочника………………………………………………………………………………………. 221
Определение интерфейса для удаления элемента………………………………………………………………… 222
Использование асинхронных методов для работы с репозиторием…………………………………… 226
Глава 12. Реализация CRUD-операций в Blazor Server…………………………. 231
Создание компонента для вывода списка элементов модели……………………………………………… 232
Настройка компонента для создания и обновления экземпляра модели…………………………… 239
Определение выпадающего списка……………………………………………………………………………………….. 245
Создание сервиса работы с файлами…………………………………………………………………………………….. 248
Загрузка файлов изображений……………………………………………………………………………………………….. 252
Настройка добавления……………………………………………………………………………………………………………. 254
Настройка обновления……………………………………………………………………………………………………………. 256
Настройка удаления……………………………………………………………………………………………………………….. 257
Глава 13. Использование сторонних компонентов……………………………….. 261
Интеграция компонента Radzen для редактирования текста……………………………………………… 261
Настройка репозитория для работы с данными подчиненной таблицы……………………………. 264
Создание компонента для работы с подчиненными данными……………………………………………. 269
Настройка вывода сводной информации………………………………………………………………………………. 271
Добавление компонента RadzenDataGrid……………………………………………………………………………… 273
Настройка редактирования для RadzenDataGrid…………………………………………………………………. 274
Настройка добавления для RadzenDataGrid…………………………………………………………………………. 280
Настройка удаления для RadzenDataGrid…………………………………………………………………………….. 284
Настройка фильтрации, сортировки и пагинации………………………………………………………………… 286
Глава 14. Интеграция MS SQL Server и Entity Framework Core……………. 291
Настройка контекста базы данных……………………………………………………………………………………….. 291
Добавление доступа к базе данных в контейнере для внедрения зависимостей……………….. 293
Подготовка моделей………………………………………………………………………………………………………………… 296
Создание таблиц базы данных………………………………………………………………………………………………. 298
Создание репозиториев…………………………………………………………………………………………………………… 302
Добавление доступа к репозиториям…………………………………………………………………………………….. 308
Отслеживание изменений………………………………………………………………………………………………………… 309
Применение миграций……………………………………………………………………………………………………………… 312
Использование DbContextFactory………………………………………………………………………………………….. 313
Глава 15. Аутентификация в Blazor Server…………………………………………… 317
Создание Web API……………………………………………………………………………………………………………………. 317
Функции JavaScript для вызова Web API……………………………………………………………………………….. 320
Настройка входа и выхода…………………………………………………………………………………………………….. 321
Внедрение сервисов аутентификации……………………………………………………………………………………. 325
Защита страниц и компонентов……………………………………………………………………………………………… 327
Настройка проверки………………………………………………………………………………………………………………… 328
Глава 16. Особенности работы с Blazor WebAssembly…………………………… 331
Определение таблицы в базе данных для CRUD-операций………………………………………………… 332
Создание модели из таблицы базы данных………………………………………………………………………….. 333
Определение репозитория для работы с данными……………………………………………………………….. 336
Настройка Web API…………………………………………………………………………………………………………………. 337
Настройка проекта приложения Blazor WebAssembly…………………………………………………………. 343
Определение компонента для вывода списка……………………………………………………………………….. 345
Определение компонента для добавления элемента……………………………………………………………. 348
Определение компонента для редактирования элемента……………………………………………………. 351
Определение компонента для удаления элемента……………………………………………………………….. 353
Выполнение HTTP-запросов с помощью IHttpClientFactory………………………………………………. 356
Создание защищенных страниц…………………………………………………………………………………………….. 360
Размещение приложения Blazor WebAssembly……………………………………………………………………… 373
Глава 17. Развертывание приложений………………………………………………….. 375
Развертывание приложения с помощью IIS………………………………………………………………………….. 375
Развертывание приложения с помощью nginx под Linux…………………………………………………….. 383
Автономное развертывание приложения Blazor WebAssembly на сервере IIS………………….. 389
Заключение………………………………………………………………………………………….. 392
Приложение. Описание электронного архива………………………………………. 394
Предметный указатель…………………………………………………………………………. 396
Умрихин Евгений Дмитриевич, кандидат технических наук, инженер-программист в крупной региональной страховой компании. Имеет многолетний опыт разработки и внедрения распределенных IT-решений с использованием веб-сервисов ASP.NET и мобильных платформ Android и iOS. Обладатель ряда авторских свидетельств об официальной регистрации программ для ЭВМ.