Одним из нововведений в Blazor .NET 6 стала возможность использовать динамические компоненты (DynamicComponent). Стандартный подход к созданию пользовательского интерфейса в Blazor состоит в том, чтобы разбить интерфейс на части (компоненты) и, в зависимости от потребностей пользователя составлять из этих компонентов всё содержимое той или иной страницы. DynamicComponent расширяет возможности по построению пользовательского интерфейса в Blazor.
blazor
Использование параметров URL в Blazor
При разработке приложений в Blazor бывает необходимым получать значения свойств компонентов не только из параметров маршрута, но и использовать для сохранения/передачи состояния компонента параметры запроса (URL Query Parameters). Например, использование параметров URL в Blazor может потребоваться для фильтрации данных перед выводом их на экран. В этом случае, URL может выглядеть, например, так http://localhost:5001/component/1?filter=a&filter2=b… Рассмотрим, как использовать параметры URL в Blazor.
Управление состоянием в Blazor Server. Использование хранилища браузера sessionStorage
При разработке приложений Blazor часто бывает необходимо сохранять какие-либо данные, введенные пользователем. Например, такое сохранение может потребоваться, если пользователь заполняет большую форму или добавляет в корзину какие-либо покупки. Если начнутся проблемы с соединением, например, у пользователя пропадет связь, то в итоге все введенные данные после обновления страницы приложения будут утеряны. Поэтому, для хранения временных данных, создаваемых пользователем, обычно используются коллекции браузера localStorage и sessionStorage .
Code-behind в Blazor
Обычно, компонент Blazor создается в одном файле с расширением .razor. В этом файле содержится и HTML-разметка компонента с необходимыми привязками данных и код программной части — обработка событий, бизнес-логика и т.д. С одной стороны, такой подход к разработке довольно привычный (особенно, если до этого вы разрабатывали приложения с использованием .NET Framework), а, с другой стороны, не совсем (а, точнее, совсем) не удобен в том случае, если над разметкой и логикой компонента работают разные люди. В этом случае, Blazor позволяет разделить разметку и код программной части компонента.
Жизненный цикл компонента Blazor
Компоненты Blazor имеют четко определенный жизненный цикл. Жизненный цикл компонента можно использовать для инициализации состояния компонента и/или реализации расширенного поведения компонентов. Компонент обрабатывает события своего жизненного цикла в наборе синхронных и асинхронных методов. Эти методы, при желании, можно переопределить для выполнения дополнительных операций с компонентом.
Навигация в ASP.NET Core Blazor. NavigationManager
При разработке приложений Blazor бывает необходимо перенаправить пользователя на другой URL без каких-либо действий со стороны самого пользователя. Например, такое поведение приложения может потребоваться в случае, когда у вас предусмотрена отдельная страница добавления пользователем каких-либо данных в приложение. После заполнения формы пользователь жмет кнопку «Добавить», срабатывает событие OnSubmit формы и в этот момент вам может потребоваться, чтобы пользователь вернулся, например, на главную страницу приложения. В этом случае нам поможет класс C# Navigation.
Проект Blazor WebAssembly «Open Ecology». База данных и постраничный вывод результатов
В предыдущей части мы написали небольшой компонент Razor для парсинга открытых данных Росприроднадзора. При этом, сложность заключалась в двух моментах: 1) сам по себе файл имел большой размер (более 600 Мб), а структура данных в файле, с точки зрения десериализации, оказалась неверной (отсутствие запятых, разделяющих json-объекты, сами объекты не заключены в массив и т.д.). В итоге нам удалось разобрать этот файл достаточно большой ценой в плане времени — более 316 000 записей десериализуются очень и очень долго. Сегодня мы продолжим дорабатывать наш проект «Open Ecology» и запишем все полученные данные из файла в базу данных MySql.
Проект Blazor WebAssembly «Open Ecology». Работа с большим JSON
В шаблонном приложении Blazor WebAssembly мы можем найти по сути «псевдо» сервис для работы с метеоданными. В этой части работы над проектом «Open Ecology» мы создадим свой компонент для загрузки данных из JSON.
Проект Blazor WebAssembly «Open Ecology». Шаблон приложения
В этой серии статей я буду постепенно разрабатывать приложение Blazor WebAssembly под названием «Open Ecology». Это приложение будет предоставлять нам информацию из открытых источников о загрязнении окружающей среды в тех или иных районах нашей необъятной Родины. Весь процесс разработки я буду описывать здесь от «А» до «Я». Для работы над проектом нам потребуются все полученные ранее знания как по языку C# в общем, так и по работе с Blazor в частности. Разработка будет вестись в Visual Studio 2022 с использованием .NET 6.0
Валидация форм в Blazor Server
Мы уже частично познакомились с тем, как происходит валидация форм в Blazor, а также рассмотрели основные компоненты ввода для форм в Blazor. Сегодня мы более подробно рассмотрим процессы валидации форм с использованием компонентов Blazor, таких как DataAnnotationsValidator, ValidationSummary и ValidationMessage.