Blazor в действии

Крис Сэйнти
Blazor в действии

Blazor in Action
CHRIS SAINTY

Blazor в действии
КРИС СЭЙНТИ
Москва, 2023

УДК	 004.041
ББК	 32.372
С97
Сэйнти К.
С97	
Blazor в действии / пер. с англ. Д. А. Беликова. – М.: ДМК Пресс, 2023. – 380 с.: 
ил. 
ISBN 978-5-93700-179-5
«Blazor в действии» — это практическое руководство по созданию прекрасных 
пользовательских интерфейсов и клиентских приложений с помощью C# и .NET. 
Благодаря этой книге вы освоите ключевые возможности фреймворка Blazor (в частности, маршрутизацию, формы и валидацию, а также динамические и повторно 
используемые компоненты), создавая веб-приложение для построения пешеходных 
маршрутов. По итогу обучения вы сможете разрабатывать красивые сайты и приложения, которые выполняют код C# непосредственно в браузере. 
Издание адресовано веб-разработчикам с опытом работы в C# и .NET.
УДК  004.041
ББК  32.372
Copyright © DMK Press 2023. Authorized translation of the English edition. 
© 2023 Manning Publications. This translation is published and sold by permission of Manning 
Publications, the owner of all rights to publish and sell the same.
Все права защищены. Любая часть этой книги не может быть воспроизведена в какой 
бы то ни было форме и какими бы то ни было средствами без письменного разрешения владельцев авторских прав.
ISBN 978-1-6172-9864-6 (англ.)	
©  Manning Publications, 2022
ISBN 978-5-93700-179-5 (рус.)	
©  Перевод, оформление, издание, ДМК Пресс, 2023

Эта книга посвящается моему сыну Арчи

Оглавление
	 1	   Начинаем путешествие в Blazor......................................................................... 22
	 2	   Наше первое приложение Blazor........................................................................ 43
	 3	   Работа с компонентной моделью Blazor.......................................................... 78
	 4	   Маршрутизация.....................................................................................................116
	 5	   Формы и валидация. Часть 1: основы..............................................................143
	 6	   Формы и валидация. Часть 2: не только основы...........................................178
	 7	   Создание часто используемых компонентов.................................................223
	 8	   Интеграция с библиотеками JavaScript............................................................238
	 9	   Защита приложений Blazor.................................................................................266
	10	   Управление состоянием......................................................................................304
	11	   Тестирование приложения.................................................................................326

Содержание
Оглавление............................................................................................................ 6
Предисловие........................................................................................................ 12
Благодарности................................................................................................... 14
О книге................................................................................................................. 16
Об авторе........................................................................................................... 20
Об иллюстрации на обложке............................................................................ 21
1	
Начинаем путешествие в Blazor.................................................. 22
1.1	
Почему стоит выбрать Blazor для создания приложения?.............. 23
1.2	
Компоненты как более эффективный способ создания  
	
пользовательского интерфейса........................................................... 25
1.2.1	
Что такое компонент?............................................................... 25
1.2.2	
Преимущества пользовательского интерфейса  
	
на основе компонентов................................................................ 26
1.2.3	
Структура компонента Blazor................................................... 27
1.3	
Blazor – фреймворк для создания современных  
	
пользовательских интерфейсов с помощью C#................................ 28
1.3.1	
Модели размещения..................................................................... 29
1.3.2	
Blazor WebAssembly...................................................................... 30
1.3.3	
Blazor Server.................................................................................. 35
1.3.4	
Другие модели размещения.......................................................... 40
Резюме................................................................................................................ 42
2	
Наше первое приложение Blazor.................................................... 43
2.1	
Настройка приложения......................................................................... 44
2.1.1	
Конфигурации шаблонов Blazor WebAssembly.............................. 45
2.1.2	
Создание приложения................................................................... 46
2.2	
Сборка и запуск приложения............................................................... 49
2.3	
Ключевые компоненты приложения Blazor...................................... 51
2.3.1	
Файл Index.html............................................................................ 51

Содержание
2.3.2	
Файл Program.cs........................................................................... 53
2.3.3	
Файл App.razor............................................................................. 56
2.3.4	
Папка wwwroot и _Imports.razor................................................... 56
2.4	
Создаем первые компоненты.............................................................. 57
2.4.1	
Организация файлов с разделением по функциональности.......... 58
2.4.2	
Настройка стилей....................................................................... 61
2.4.3	
Определение макета.................................................................... 63
2.4.4	
Домашняя страница Blazing Trails.............................................. 66
Резюме................................................................................................................ 76
3	
Работа с компонентной моделью Blazor................................ 78
3.1	
Структурирование компонентов........................................................ 80
3.1.1	
Единый файл................................................................................. 80
3.1.2	
Частичный (раздельный) класс.................................................... 82
3.2	
Методы жизненного цикла компонентов.......................................... 84
3.2.1	
Первая отрисовка........................................................................ 87
3.2.2	
Жизненный цикл и асинхронность.............................................. 88
3.2.3	
Dispose: дополнительный метод жизненного цикла................... 90
3.3	
Работа с родительскими и дочерними компонентами................... 92
3.3.1	
Передача значений от родительского компонента  
	
дочернему компоненту................................................................ 94
3.3.2	
Передача данных от дочернего компонента родительскому......... 99
3.4	
Стили компонентов..............................................................................102
3.4.1	
Глобальные стили.......................................................................103
3.4.2	
Стили с локальной областью видимости..................................104
3.4.3	
Использование препроцессоров CSS............................................107
Резюме...............................................................................................................115
4	
Маршрутизация......................................................................................116
4.1	
Маршрутизация на стороне клиента.................................................117
4.1.1	
Маршрутизатор Blazor..............................................................117
4.1.2	
Определение компонентов-страниц..........................................120
4.2	
Навигация между страницами программными средствами.........121
4.3	
Передача данных между страницами с использованием  
	
параметров маршрутов.......................................................................125
4.4	
Обработка нескольких маршрутов с помощью одного  
	
компонента............................................................................................128
4.5	
Работа со строками запросов..............................................................135
4.5.1	
Задаем значения строк запросов................................................135
4.5.2	
Получение значений строки запроса с помощью атрибута  
	
SupplyParameterFromQuery.........................................................137
Резюме...............................................................................................................141
5	
Формы и валидация. Часть 1: основы......................................143
5.1	
Улучшаем работу форм с помощью компонентов..........................144
5.1.1	
Создание модели..........................................................................147
5.1.2	
Базовая конфигурация EditForm.................................................147
5.1.3	
Сбор данных с помощью компонентов ввода данных.................151
5.1.4	
Создание полей ввода по запросу................................................156

Содержание
5.2	
Валидация модели................................................................................159
5.2.1	
Настройка правил валидации с помощью Fluent Validation..........160
5.2.2	
Настройка Blazor для использования Fluent Validation..............162
5.3	
Отправка данных на сервер................................................................167
5.3.1	
Добавление MediatR в проект Blazor..........................................168
5.3.2	
Создание запроса и обработчика для отправки данных  
	
формы в API................................................................................169
5.3.3	
Настройка конечной точки........................................................174
Резюме...............................................................................................................177
6	
Формы и валидация. Часть 2: не только основы..............178
6.1	
Настройка классов валидации............................................................179
6.1.1	
Создание класса FieldCssClassProvider........................................179
6.1.2	
Использование класса BootstrapCssClassProvider с EditForm......180
6.2	
Создание собственных компонентов ввода с помощью  
	
типа InputBase.......................................................................................183
6.2.1	
Наследование от InputBase<T>...................................................184
6.2.2	
Стили для собственного компонента........................................188
6.2.3	
Использование собственного компонента ввода.......................189
6.3	
Работа с файлами..................................................................................190
6.3.1	
Настройка компонента InputFile...............................................191
6.3.2	
Загрузка файлов при отправке содержимого формы.................192
6.4	
Обновление формы для возможности редактирования................199
6.4.1	
Превращение формы в автономный компонент.......................200
6.4.2	
Рефакторинг файла AddTrailPage.razor ....................................202
6.4.3	
Добавляем возможность редактирования тропы.....................206
6.4.4	
Тестируем возможность редактирования................................220
Резюме...............................................................................................................221
7	
Создание часто используемых компонентов......................223
7.1	
Определение шаблонов.......................................................................224
7.2	
Улучшение шаблонов с помощью обобщенных типов...................228
7.3	
Совместное использование компонентов с библиотеками  
	
классов Razor.........................................................................................233
Резюме...............................................................................................................237
8	
Интеграция с библиотеками JavaScript..................................238
8.1	
Создание модуля Java-Script и доступ к нему через компонент.....240
8.1.1	
Тестирование компонента RouteMap........................................243
8.1.2	
Вызов функций Java-Script из C# и возврат ответа....................244
8.2	
Вызов методов C# из Java-Script..........................................................248
8.3	
Интеграция компонента RouteMap в TrailForm...............................250
8.4	
Отображение компонента RouteMap в окне TrailDetails................260
Резюме...............................................................................................................264
9	
Защита приложений Blazor............................................................266
9.1	
Интеграция с поставщиком идентификационной  
	
информации: Auth0..............................................................................268

Содержание
9.1.1	
Регистрация приложений в Auth0..............................................269
9.1.2	
Настройка токенов от Auth0....................................................270
9.1.3	
Настройка Blazor WebAssembly для использования Auth0.........272
9.1.4	
Настройка веб-API для использования Auth0............................276
9.2	
Отображение различных фрагментов пользовательского  
	
интерфейса  в зависимости от статуса аутентификации................277
9.2.1	
Обновление папки Home..............................................................280
9.3	
Предотвращение доступа к странице неавторизованных  
	
пользователей.......................................................................................285
9.3.1	
Защита конечных точек API......................................................288
9.3.2	
Вызов защищенных конечных точек API из Blazor.....................291
9.4	
Авторизация пользователей по ролям..............................................295
9.4.1	
Добавление ролей в Auth0...........................................................295
9.4.2	
Использование ролей Auth0 в Blazor WebAssembly.....................297
9.4.3	
Реализация логики на основе ролей.............................................300
Резюме...............................................................................................................303
10	
Управление состоянием.....................................................................304
10.1	
Простое управление состоянием с помощью хранилища  
	
в памяти.................................................................................................305
10.1.1	 Создание и регистрация хранилища состояний.........................306
10.1.2	 Сохранение данных, введенных в форму, в AppState...................307
10.2	
Улучшение дизайна класса AppState для обработки  
	
дополнительных состояний................................................................310
10.3	
Создание постоянного состояния с локальным хранилищем  
	
браузера..................................................................................................312
10.3.1	 Определение дополнительного хранилища состояний..............313
10.3.2	 Добавление и удаление троп из списка избранных.....................317
10.3.3	 Отображение текущего числа избранных троп........................318
10.3.4	 Реорганизация и рефакторинг....................................................320
10.3.5	 Отображение избранных троп..................................................322
10.3.6	 Инициализация AppState.............................................................323
Резюме...............................................................................................................325
11	
Тестирование приложения..............................................................326
11.1	
Представляем bUnit..............................................................................328
11.2	
Добавление тестового проекта bUnit.................................................329
11.3	
Тестирование компонентов с помощью bUnit.................................331
11.3.1	 Тестирование отображаемой разметки...................................333
11.3.2	 Вызов обработчиков событий....................................................337
11.3.3	 Имитация аутентификации и авторизации............................338
11.3.4	 Эмуляция взаимодействия с JavaScript.......................................340
11.3.5	 Тестирование нескольких компонентов.....................................343
Резюме...............................................................................................................346
Приложение A. Добавление серверной части ASP.NET Core  
в приложение Blazor WebAssembly...................................................................347
Приложение B. Обновление существующих областей  
для использования API......................................................................................363
Предметный указатель....................................................................................374