Blazor c что это

Введение в Blazor

Blazor представляет UI-фреймворк для создания интерактивных приложений, которые могут работать как на стороне сервера, так и на стороне клиента, на платформе .NET. В своем развитии фреймворк Blazor испытал большое влияние современных фреймворков для создания клиентских приложений — Angular, React, VueJS. В частности, это проявляется в роли компонентов при построении пользовательского интерфейса. В то же время и на стороне клиента, и на стороне сервера при определении кода в качестве языка программирования применяется C#, вместо JavaScript. А для описания визуального интерфейса используются стандартные HTML и CSS.

Фреймворк Blazor развивается как opensource-проект, исходный код которого можно найти в репозитории на github: https://github.com/dotnet/aspnetcore/tree/master/src/Components

Blazor предоставляет разработчикам следующие преимущества:

• Написание кода веб-приложений с помощью C# вместо JavaScript
• Использование возможностей экосистемы .NET, в частности, библиотек .NET при создании приложений, безопасности и производительности платформы .NET
• Клиентская и серверная части приложения могут использовать общую логику
• Использование Visual Studio в качестве инструмента для разработки, который имет встроенные шаблоны для упрощения создания приложения

Функционально на текущий момент Blazor подразделяется на несколько подсистем:

• Blazor Server : позволяет создавать серверные приложения и поддерживается ASP.NET
• Blazor WebAssembly : позволяет создавать одностраничные интерактивные приложения клиентской стороны, которые запускаются в браузере пользователя и работают с помощью технологии WebAssembly
• Blazor Hybrid : позволяет создавать десткопные и мобильные приложения поверх технологии .NET MAUI

Первая превью-вервия Blazor вышла в 22 марта 2018 года. В полненоценный релиз Blazor Server вышел в сентябре 2019 года, а Blazor WebAssembly — в мае 2020 года, и обе эти платформы включены в .NET и полноценно могут использоваться для создания серверных приложений и клиентских приложений. То есть фактически Blazor покрывает потребности в веб-приложениях как на стороне сервера, так и на стороне клиента.

Blazor WebAssembly

Долгое время написание клиентских веб-приложений было уделом языка JavaScript. Внедрение поддержки WebAssembly изменио ситуацию. И технология Blazor WebAssembly позволяет создавать интерактивные приложения на языке C#, которые запускаются и отрабатывают в браузере пользователя с помощью технологии WebAssembly. При построении и запуске приложения Blazor WebAssembly файлы с кодом C# и Razor компилируются в сборки .NET. Затем Blazor WebAssembly (а если точнее скрипт blazor.webassembly.js ) загружает среду выполнения .NET, сборки и их зависимости и настраивает среду выполнения .NET для выполнения сборок. Посредством взаимодействия с JavaScript фреймворк Blazor WebAssembly может обращаться к DOM и API браузера.

Такая модель выполнения имеет ряд преимуществ. Так, Blazor WebAssembly не зависит от сервера. Все необходимые файлы среды выполнения .NET и загружаемых сборок могут кэшироваться в браузере и работать без доступа к сети. По большому счету нам может быть достаточно статического сервера, на котором размещены все файлы приложения.

Поскольку приложение работает полностью на стороне браузера и совершенно не зависит от сервера, то снижается нагрузка на сервер.

В то же время Blazor WebAssembly имеет ряд ограничений. Например, браузер должен поддерживать технологию WebAssembly — на данный момент последние версии распространенных браузеров (Google Chrome, Mozilla Firefox, Opera, Microsoft Edge, Yandex Browser) поддерживают эту технологию. Однако более старые версии, либо Internet Explorer не имеют подобной подобной поддержки. Также браузеру необходимо загрузить файлы большого размера, так как приложение полностью отрабатывает на стороне клиента, что увеличиваает нагрузку на сеть и время загрузки. Также, поскольку все файлы приложения доступны пользователю, то нивелируется возможность скрыть какой-нибудь код, который представляет коммерческую ценность. Ну и кроме того, в этом случае возможности приложения ограничены браузером, в котором запускается приложение.

Blazor Server

В Blazor Server приложение отрабатывает на стороне сервера. Обновление элементов пользовательского интерфейса, обработка событий, вызовы JavaScript на клиентской стороне осуществляются посредством взаимодействия сервера и клиента через SignalR.

То есть когда пользователь взаимодействует с приложением в браузере, вызывает события пользовательского интерфейса (например, нажимает на кнопку), то клиентская сторона посылает на сервер информацию о событии, сервер обрабатывает полученную информацию и посылает клиенту в ответ инструкции, как необходимо обновить элементы интерфейса. В какой-то степени это похоже на подход, применявшийся в ASP.NET WebForms.

Поскольку большая часть логики приложения сосредоточена на стороне сервера, то все загружаемые клиентом файлы имею гораздо меньший размер по сравнению с Blazor WebAssembly. Приложение не ограничено браузером и может воспользоваться возможностями серверной обработки. Кроме того, приложение может работать с устаревшими браузерами, которые не поддерживают WebAssembly.

В то же время для работы приложения необходима постоянная поддержка сетевого подключения. Если количество пользователей велико, что увеличивается нагрузка на сервер. Также задержки в сети могут оказать негативное воздействие. В частности, при задержках в более чем 200 миллисекунд интерфейс становится гораздо менее отзывчивым, начинает тормозить.

Blazor Web + Server

В .NET 8, который вышел в ноябре 2023 года, модель приложения Blazor получила дальнейшее развитие. Обе модели — Blazor Server и Blazor WebAssembly были объединены в одну модель, которая сочетает рендеринг на сервере и интерактивность Blazor WebAssembly. При необходимости мы можем использовать либо рендеринг на стороне сервера, либо рендеринг на стороне клиента, либо совмещать оба вида рендеринга. Таким образом, объединенная модель применяет следующие способы рендеринга:

• Статический рендеринг на стороне сервера : выполняет код на стороне сервера, как это делают Razor Pages и MVC. Полный ответ затем отправляется в браузеру для отображения, и дальнейшее взаимодействие между сервером и клиентом прекращается до тех пор, пока браузер не выполнит новый HTTP-запрос.
• Потоковый рендеринг : код выполняется на стороне сервера. Подходит, когда данные формируются в результате асинхронной операции. Пока асинхронная операция выполдняется, в браузере отображается одна HTML-разметка. Когда асинхронная операция завершена, сервер отправляет окончательную разметку для обновления содержимого страницы. Это улучшает взаимодействие с пользователем, поскольку он видит некоторый контент, например, сообщение «Загрузка…», ожидая финального результата.
• Интерактивный рендеринг на сервере : во время интерактивного взаимодействия пользователя с компонентом на веб-странице с помощью SignalR выполняются запросы к серверу. Сервер обрабатывает запрос и присылает в ответ клиенту результат, который отображается на веб-странице. Подобные интерактивные запросы с помощью SignalR более эффективны, чем полноценные HTTP-запросы. Тем не менее между браузером и сервером необходимо постоянное соединение SignalR, что ограничивает масштабируемость. Наиболее подходит для веб-приложений, запущенных во внутренней сети/интранете, с ограниченным числом клиентов и высокой пропускной способностью сети.
• Интерактивный рендеринг WebAssembly : код целиком выполняется на стороне клиента, что означает, что код имеет доступ только к ресурсам в браузере. Это может усложнить реализацию, поскольку если потребуется новая порция данных, то необходимо будет выполнять новый запрос к серверу. Наиболее подходит для веб-приложений, где потенциально имеется большое количество клиентов и соединения с некоторыми из них характеризуются низкой пропускной способностью.
• Интерактивный автоматический рендеринг : начинается с рендеринга на сервере для более быстрого первоначального отображения, загружает компоненты WebAssembly в фоновом режиме, а затем переключается на WebAssembly для последующей интерактивности.

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

Blazor Hybrid

С выходом .NET 6 вышел также Blazor Hybrid , который работает поверх фрейворка .NET Multi-platform App UI (MAUI) подобно технологии Electron. Содержимое приложения Blazor запускается через специальный элемент — BlazorWebView . Blazor Hybrid позволяет запускать те же компоненты, что используются в Blazor WebAssembly или Blazor Server практически без изменений. Таким образом, Blazor покрыл и серверный веб, и клиентский веб, и десктоп и мобайл. Но в данном руководстве мы сделам акцент на создание именно веб-приложений с помощью Blazor.

Компоненты

Ключевым элементом приложения Blazor являются компоненты. Кто работал с фреймворками клиентской стороны, такими как Angular, React, VueJS, то сталкивался с компонентами, которые по сути структурируют приложение. В Blazor применяется похожая концепция. Здесь компонент представляет элемент интерфейса, например, какое-то определенное содержание, меню, диалоговое окно, форма ввода данных или даже целая страница. Все есть компонент.

Компоненты определяют логику рендеринга элементов интерфейса, а также логику обработки пользовательского ввода. Компоненты могут быть вложенными в другие компоненты. Компоненты можно повторно использовать в других проектах и переносить в виде библиотеки классов Razor. Обычно класс компонента располагается в файле с расширением .razor , а для их определения применяется синтаксис Razor, который позволяет объединить разметку HTML с кодом на C#.

Благодаря компонентам уменьшается количество повторяющегося кода и упрощается поддержки и обновление приложения.

Преимущества использования Blazor

• Blazor прост и легок в обучении
• Наличие инструментария, в частности, среды Visual Studio, которые облегчают разработку с Blazor.
• Развитая экосистема разработчиков, благодаря чему в сети проще найти ответ на интересующий вопрос. Наличие большого количества различных компонентов и библиотек от других разработчиков, которые можно использовать в своих приложениях.
• Использование Blazor не навязывает использование определенных стандартов для архитектуры приложения. Кому-то нравится MVVM (model-view-viewmodel), кому нравится другой паттерн — выбор всецело ложится на разработчика.
• Мы можем использовать для построения приложений сервера и клиента один и тот же язык — C#, для создания клиентского браузерного приложения использовать и знать JavaScritpt необязательно. Кроме того, можно определять некоторую бизнес-логику на C# и использовать ее в как в приложениях Blazor, так и в приложениях, построенных с помощью других технологий — WinForms, WPF, MAUI, ASP.NET и т.д.
• Если говорить о клиентских приложениях на Blazor WebAssembly, то для них даже не нужен установленных .NET на компьютере клиента, так как приложение разворачивается в браузере. Даже не нужен сервер на .NET.

ASP.NET Core Blazor

Это не последняя версия этой статьи. В текущем выпуске см . версию .NET 8 этой статьи.

[!IMPORTANT] > This information relates to a pre-release product that may be substantially modified before it’s commercially released. Microsoft makes no warranties, express or implied, with respect to the information provided here. > > For the current release, see the [.NET 8 version of this article](?view=aspnetcore-8.0&preserve-view=true). . moniker-end —>

Добро пожаловать в Blazor!

Blazor— это интерфейсная веб-платформа .NET, которая поддерживает отрисовку на стороне сервера и взаимодействие клиента в одной модели программирования:

Платформа Blazor предназначена для создания интерактивного веб-интерфейса на стороне клиента с использованием .NET и предоставляет следующие возможности:

• Создание расширенных интерактивных интерфейсов пользовательского интерфейса с помощью C#.
• совместное использование серверной и клиентской логик приложений, написанных с помощью .NET;
• отображение пользовательского интерфейса в виде HTML-страницы с CSS для широкой поддержки браузеров, в том числе для мобильных устройств.
• создание гибридных классических и мобильных приложений с помощью .NET и Blazor;

• Создание расширенных интерактивных интерфейсов пользовательского интерфейса с помощью C#.
• совместное использование серверной и клиентской логик приложений, написанных с помощью .NET;
• отображение пользовательского интерфейса в виде HTML-страницы с CSS для широкой поддержки браузеров, в том числе для мобильных устройств.

Использование .NET для разработки веб-приложений на стороне клиента предоставляет следующие преимущества:

• Напишите код в C#, который может повысить производительность разработки и обслуживания приложений.
• возможность использовать существующую экосистему .NET с библиотеками .NET;
• высокая производительность, надежность и безопасность платформы .NET;
• Сохраняйте продуктивность в Windows, Linux или macOS с помощью среды разработки, такой как Visual Studio или Visual Studio Code. интеграция с современными платформами размещения, такими как Docker.
• создавайте приложения на основе распространенных языков, платформ и инструментов, которые отличаются стабильностью, широким набором функций и простотой в использовании.

Краткое руководство по Blazor см. в статье Создание первого приложения Blazor.

Компоненты

Приложения Blazor основаны на компонентах. Компонентом Blazor называется любой элемент пользовательского интерфейса, например страница, диалоговое окно или форма ввода данных.

Компоненты являются классами C# .NET, встроенными в сборки .NET, которые:

• определяют гибкую логику визуализации пользовательского интерфейса;
• обрабатывают действия пользователя;
• можно вкладывать друг в друга и использовать повторно;
• можно совместно использовать и распространять в виде библиотек классов Razor или пакетов NuGet.

Класс компонента обычно записывается в виде страницы разметки Razor с расширением файла .razor . Компоненты в Blazor обычно называются компонентами Razor (или компонентами Blazor). Синтаксис Razor сочетает разметку HTML с кодом C#, позволяя повысить производительность разработчиков. Razor позволяет переключаться между разметкой HTML и кодом C# в одном файле благодаря программной поддержке IntelliSense в Visual Studio.

Blazor использует естественные теги HTML для компоновки пользовательского интерфейса. Razor Следующая разметка демонстрирует компонент, который увеличивает счетчик, когда пользователь выбирает кнопку.

Counter 
Counter
 
Current count: @currentCount
 Click me @code < private int currentCount = 0; private void IncrementCount() < currentCount++; >> 

Компоненты преобразуются в хранящееся в памяти представление модели DOM для браузера, которое называется деревом отображения, позволяя гибко и эффективно обновлять пользовательский интерфейс.

Создание веб-приложения с полным стеком с помощью Blazor

Blazorвеб-приложения обеспечить архитектуру на основе компонентов с отрисовкой на стороне сервера и полной взаимодействием на стороне клиента в одном решении, где можно переключаться между режимами отрисовки на стороне сервера и клиентом и даже смешивать их на одной странице.

Blazorвеб-приложения может быстро доставлять пользовательский интерфейс в браузер, отрисовав HTML-содержимое с сервера в ответ на запросы. Страница загружается быстро, так как отрисовка пользовательского интерфейса выполняется быстро на сервере без необходимости скачать большой пакет JavaScript. Blazor также может улучшить взаимодействие с пользователем с различными прогрессивными улучшениями для отрисовки сервера, таких как улучшенная навигация с записями форм и потоковой отрисовкой асинхронного содержимого.

Blazor поддерживает интерактивную отрисовку на стороне сервера (интерактивная служба SSR), где взаимодействие пользовательского интерфейса обрабатывается с сервера через подключение к браузеру в режиме реального времени. Интерактивная служба SSR обеспечивает широкий пользовательский интерфейс, например от клиентского приложения, но без необходимости создавать конечные точки API для доступа к ресурсам сервера. Содержимое страниц для интерактивных страниц предварительно отображается, где содержимое на сервере изначально создается и отправляется клиенту без включения обработчиков событий для отрисованных элементов управления. Сервер выводит HTML-интерфейс страницы как можно скорее в ответ на первоначальный запрос, что делает приложение более адаптивным к пользователям.

Blazorвеб-приложения поддерживать взаимодействие с отрисовкой на стороне клиента (CSR), которая зависит от среды выполнения .NET, созданной с помощьюWebAssembly, который можно скачать с помощью приложения. При запуске Blazor в WebAssembly код .NET может получить доступ к полной функциональности браузера и взаимодействия с JavaScript. Код .NET выполняется в песочнице безопасности браузера с защитой, которую песочница предоставляет от вредоносных действий на клиентском компьютере.

Blazor приложения могут полностью нацелиться на webAssembly в браузере без участия сервера. Для автономного Blazor WebAssembly приложения ресурсы развертываются как статические файлы на веб-сервере или службе, способных обслуживать статичное содержимое клиентам. После скачивания автономные Blazor WebAssembly приложения можно кэшировать и выполнять в автономном режиме как прогрессивное веб-приложение (PWA).

Создание собственного клиентского приложения с помощью Blazor Hybrid

Blazor Hybrid позволяет использовать компоненты в собственном клиентском приложении с сочетанием Razor собственных и веб-технологий для веб-, мобильных и классических платформ. Код выполняется в собственном коде в процессе .NET и отображает веб-интерфейс в внедренном Web View элементе управления с помощью локального канала взаимодействия. WebAssembly не используется в гибридных приложениях. Гибридные приложения создаются с помощью .NET Multi-platform App UI (.NET MAUI), которая является кроссплатформенной платформой для создания собственных мобильных и классических приложений с помощью C# и XAML.

Blazor Server

Blazor Server поддерживает размещение компонентов Razor на сервере в приложении ASP.NET Core. Обновления пользовательского интерфейса передаются через подключение SignalR.

Среда выполнения остается на сервере и обрабатывает следующие операции:

• выполнение кода приложения на языке C#;
• отправка событий пользовательского интерфейса из браузера на сервер;
• применение полученных с сервера обновлений пользовательского интерфейса к отображаемому компоненту.

Подключение, используемое Blazor Server для обмена данными с браузером, также применяется для обработки вызовов взаимодействия JavaScript.

Приложения Blazor Server отрисовывают содержимое по-другому, чем традиционные модели для отрисовки пользовательского интерфейса в приложениях ASP.NET Core с помощью представлений Razor или Razor Pages. В обеих моделях используется язык Razor для описания отрисовываемого содержимого HTML, но они значительно отличаются по способу отрисовки разметки.

При отрисовке страницы или представления Razor каждая строка кода Razor выдает HTML в виде текста. После отрисовки сервер удаляет экземпляр страницы или представления, включая все созданные состояния. При поступлении другого запроса страницы вся страница снова перерисовывается в HTML и отправляется клиенту.

Blazor Server создает граф компонентов для отображения, аналогичного HTML или XML DOM. Граф компонента включает в себя состояние, содержащееся в свойствах и полях. Blazor оценивает граф компонентов для создания двоичного представления разметки, отправляемого в клиент для отрисовки. После соединения между клиентом и сервером статические предварительно отрисованные элементы компонента заменяются интерактивными элементами. Предварительное отображение содержимого на сервере для быстрой загрузки HTML-содержимого на клиенте делает приложение более адаптивным к клиенту.

Когда компоненты становятся интерактивными в клиенте, обновления пользовательского интерфейса запускаются за счет взаимодействия с пользователем и событий приложения. При обновлении граф компонентов перерисовывается, и в пользовательском интерфейсе вычисляется разница (различия). Эта разница является наименьшим набором изменений DOM, необходимых для обновления пользовательского интерфейса на клиенте. Разница отправляется клиенту в двоичном формате и применяется в браузере.

Компонент уничтожается после того, как пользователь выходит из него.

Blazor WebAssembly

Blazor WebAssembly — это платформа одностраничных приложений (SPA) для создания интерактивных клиентских веб-приложений с использованием .NET.

Выполнение кода .NET в веб-браузерах становится возможным благодаря технологии WebAssembly (сокращенно wasm ). WebAssembly — это компактный формат байт-кода, оптимизированный для быстрой загрузки и максимального быстродействия. WebAssembly — это открытый веб-стандарт, который поддерживается в веб-браузерах без подключаемых модулей. WebAssembly работает во всех современных веб-браузерах, включая мобильные браузеры.

Код WebAssembly может обращаться к любым функциям браузера через JavaScript благодаря поддержке взаимодействия с JavaScript (сокращенно JavaScript interop или JS interop). Код .NET, который обрабатывается через WebAssembly в браузере, выполняется в песочнице для JavaScript этого браузера, которая включает средства защиты от вредоносных действий на клиентском компьютере.

Blazor WebAssembly При создании и запуске приложения:

• Файлы кода C# и файлы Razor компилируются в сборки .NET.
• Сборки и среда выполнения .NET загружаются в браузер.
• Blazor WebAssembly осуществляет начальную загрузку среды выполнения .NET и настраивает ее для загрузки сборок для приложения. Среда выполнения Blazor WebAssembly использует взаимодействие с JavaScript для обработки операций с моделью DOM и вызовов API браузера.

Размер опубликованного приложения, также называемый размером полезных данных, является критически важным фактором для удобства работы с приложением, влияющим на производительность. Крупное приложение скачивается в браузере довольно долго, что ухудшает взаимодействие с пользователем. Blazor WebAssembly оптимизирует размер полезных данных, чтобы сократить время скачивания:

• При публикации неиспользуемый код исключается из приложения средством обрезки для промежуточного языка.
• HTTP-ответы сжимаются;
• среда выполнения и сборки .NET кэшируются в браузере.

Blazor Hybrid

Гибридные приложения используют смесь нативных и веб-технологий. Приложение Blazor Hybrid использует Blazor в нативном клиентском приложении. Компоненты Razor выполняются изначально в процессе .NET и отрисовывают веб-интерфейс во встроенном элементе управления Web View с помощью локального канала взаимодействия. WebAssembly не используется в гибридных приложениях. Гибридные приложения используют следующие технологии:

• .NET Multi-platform App UI (.NET MAUI): кросс-платформенная платформа для создания собственных мобильных и классических приложений с помощью C# и XAML.
• Windows Presentation Foundation (WPF) —это платформа пользовательского интерфейса, которая не зависит от разрешения и использует векторный механизм визуализации, способный использовать все преимущества современного графического оборудования.
• Windows Forms — это платформа пользовательского интерфейса для создания многофункциональных клиентских классических приложений для Windows. Платформа разработки Windows Forms поддерживает широкий набор функций для разработки приложений, включая элементы управления, графику, привязку данных и ввод пользователя.

Взаимодействие с JavaScript

Для приложений, которым требуются сторонние библиотеки JavaScript и доступ к API браузера, компоненты взаимодействуют с JavaScript. Компоненты могут использовать любую библиотеку или API, которые может использовать JavaScript. Код C# может вызывать код JavaScript, а код JavaScript — код C#.

Совместное использование кода и .NET Standard

Blazor реализует .NET Standard, что позволяет проектам Blazor ссылаться на библиотеки, которые соответствуют спецификациям .NET Standard. .NET Standard — это формальная спецификация API-интерфейсов .NET, которые доступны во всех реализациях .NET. Библиотеки классов .NET Standard можно использовать на разных платформах .NET, таких как Blazor, .NET Framework, .NET Core, Xamarin, Mono и Unity.

API, которые не используются в веб-браузере (например, для доступа к файловой системе, открытия сокетов и работы с потоками), создают исключение PlatformNotSupportedException.

Blazor — интерактивные страницы без JavaScript

Платформа Blazor предназначена для создания одностраничных (один HTML документ для нескольких веб страниц) интерактивных веб приложений. Веб приложение Blazor может быть полностью написано на языке C# обеспечивая единую логику сервера и клиента.

Расширение .NET Blazor позволяет C# программистам использовать свой накопленный опыт для веб разработок. Расширение не предназначено для замены MVC или Razor Pages. Blazor для того, чтобы предоставить решение, где AJAX технологии и JavaScript программирование заменяются кодированием на C#.

Blazor обеспечивает повторное использование кода и возможность переноса устаревшего кода в современные веб-приложения. Технология не только позволяет разработчикам создавать код C# на стороне клиента, но и запускать существующие библиотеки .NET Standard в браузере без плагина.

Веб стандарты

Технология Blazor строго поддерживает веб стандарты. Нет никаких плагинов и дополнительных надстроек для браузеров. Выходной код Blazor это веб страницы с HTML, CSS и JavaScript. Приложения Blazor работают во всех современных веб браузерах на устройствах с различными операционными системами (компьютеры, планшеты, смартфоны, телевизоры).

Это нисколько не похоже на Microsoft Silverlight и Adobe Flash, использующие обязательные к установке в браузер плагины. Ради справедливости надо сказать, что Silverlight и Adobe Flash отличнейшие технологии с недостижимыми возможностями для текстовых кодов браузеров.

Без внедрения двоичного кода сложно повышать возможности браузерных приложений. Кроме того, огромный потенциал творчества прикладных программистов отсеивается от веб области из-за необходимости изучения javascript. Тенденция внедрения в браузерные приложения двоичного кода видится в решении под названием WebAssembly. Формат WebAssembly должен уравнять возможности программистов создающих свои творения на различных языках.

Запуск приложений Blazor на IIS

Веб приложения Blazor работают в среде .NET Core. Для запуска веб приложений на сервере IIS необходимо установить пакет ASP.NET Core Hosting Bundle для соответствующей операционной системы. В комплект пакета входит среда выполнения .NET Core, ASP.NET Core и модуль ASP.NET Core IIS. Загрузить установщик модулей можно по адресу: .NET Core Runtime »» . После установки пакета необходимо перезапустить сервер IIS.

Blazor Server

Платформа Blazor анонсирована в двух видах: Blazor Server и Blazor WebAssembly. Blazor Server объединяет логику приложения и обновления интерфейса на стороне сервера. Обновления пользовательского интерфейса сайта происходят посредством подключения SignalR. ASP.NET Core SignalR — это библиотека с открытым исходным кодом, обеспечивающая обмен данными между сервером и клиентом в режиме реального времени. Код SignalR инкапсулирован в базу Blazor Server. В прикрепленном исходнике пример работы с базой данных в серверном приложении.

Blazor WebAssembly загружает байт-код в браузер, и работа приложения происходит на стороне клиента. Выполнение кода .NET в веб-браузерах становится возможным благодаря технологии WebAssembly (сокращенно wasm).

Описание исходника

Исходник построен на платформе Blazor Server и представляет собой веб приложение редактирования содержимого базы данных. При запуске исходника формируется сайт с 3-мя веб страницами. На странице Table редактируется таблица с данными находящимися на сервере.

В таблицы данных вводятся наименования и характеристики технических объектов. Введенная информация тут же сохраняется в базе данных. В качестве баз данных используются текстовые файлы формата Json. При редактировании таблиц можно заметить, что ввод проверяется на соответствие типам. Т.е. где тип string вводить можно только текст. Где тип int вводить можно только число. Эта полезность уже встроена в каркас приложений Blazor. Встроенный интеллект отличает даже целые числа от чисел с запятой.

Программный код исходника

Исходник веб приложения Blazor полностью написан на языке программирования C#. Код клиентского взаимодействия с элементами форм HTML также на C#, программирование частей клиента и сервера происходит без погружения в технологию AJAX.

Конечно же, внутри каркаса Blazor, для взаимодействия клиентской и серверной сторон, используется код на Javascript, но он инкапсулирован в программном коде платформы и автоматически формируется программной логикой на C#. Данная инкапсуляция обеспечивает целостный принцип программирования веб приложения, без разделения на серверную и клиентскую часть.

Подключение сформированного кода на JavaScript внизу веб страницы

HTML and C#

   WriteToDB()" type="text"> .    

Привязка значений HTML форм к переменным класса C# осуществляется небольшой конструкцией @bind-value=»@tv.Brand» . И вот уже значение поля будет присваиваться переменной tv.Brand . И обратно: изменение значения tv.Brand будет отражено в элементе формы .

События HTML элементов также легко интегрируются с кодом C#: нажатие на кнопку будет отслеживаться программной конструкцией @onclick . Уже в методе класса RemoveTV(tv) можно обработать событие нажатия на кнопку HTML.

Использование собственных классов

Внедряя собственные типы в компоненты Blazor, можно бесконечно расширять их функциональность. Для того чтобы в компонентах использовать пользовательские классы необходимо внедрить их с помощью записи: @inject MyClass objMyClass . Во-вторых, собственный тип необходимо зарегистрировать на уровне приложения. Для этого в классе Startup добавляем службу на основе нашего класса: services.AddSingleton ();

Одноэлементные службы времени существования (добавляются через AddSingleton(. ) ) создаются при первом запросе. Однажды созданный экземпляр используют все последующие запросы. Рекомендуется именно такой способ управления временем существования служб.

Создание службы экземпляров собственных классов. Регистрируются в классе Startup.cs

public void ConfigureServices(IServiceCollection services) < // Добавленные шаблоном приложения стандартные службы services.AddRazorPages(); services.AddServerSideBlazor(); // Службы по умолчанию не требуют регистрации. // Пользовательские службы (классы) регистрировать необходимо. // Регистрируем пользовательский классы ControlDB // для совместного использования в компонентах приложения. // В компонентах в которых необходима служба экземпляра // класса ControlDB применяют такую инструкцию в файле компонента: // @inject ControlDB controlDB. // В компонент они поступают уже инициализированные. services.AddSingleton(); > 

Модель приложения

База данных в исходнике текстовый файл Json. Сделано это для облегчения понимания основного кода приложения Blazor, абстрагируя от работы с SQL-подобной базой данных. Для сериализации модели приложения в формат Json используется статический класс JsonSerializer пространства имен System.Text.Json . Обновленная библиотека System.Text.Json фокусируется на производительности, безопасности и соответствие стандартам. По умолчанию библиотека интегрирована с проектами ASP.NET Core 3. При редактировании значений базы данных создается впечатление что вся работа происходит в браузере, а не на сервере «где-то там».

 // Класс-родитель для ограничения длины строковых переменных в базе данных. // Если новую таблицу добавить в базу данных можно // наследовать этот класс для упрощения кода. public class LimitLenStringItem < private string brand; public string Brand < get < return brand; >set < if (value != null && value.Length < Constants.MaxLengthString) < brand = value; >> > private string model; public string Model < get < return model; >set < if (value != null && value.Length < Constants.MaxLengthString) < model = value; >> > > // Модель телевизоров public class TV : LimitLenStringItem < public int Diagonal < get; set; >public int ProductionYear < get; set; >> public class TVs < public ListListTVs < get; set; >= new List(); > 

Прикреплённый исходник

Исходный код приложения Blazor Server создан в среде программирования MS Visual Studio 2019 .NET Core 3.1.

Скачать исходник

Тема: «Blazor — интерактивные страницы без JavaScript»

BlazorApp31012020.zip Размер: 2825 Кбайт Загрузки: 551

Blazor c что это

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

Создание проекта в Visual Studio

Для создания проекта Blazor WebAssembly Visual Studio предоставляет тип шаблона проекта Blazor WebAssembly Standalone App . Выберем данный тип проекта:

Далее установим для проекта имя (например, в моем случае проект будет называться BlazorWasmApp ) и установим каталог проекта:

Затем нам надо настроить ряд опций для проекта:

Здесь мы можем указать версию фреймворка .NET, которую будет использовать проект

Также здесь можно установить тип аутентификации. Нам этот параметр не важен, поэтому оставим значение по умолчанию — None

И также можно установить ряд флажков:

• Configure for HTTPS (надо ли использовать протокол HTTPS)
• Progressive Web Application (будет ли приложение Blazor представлять приложение PWA)
• Include sample pages (будут ли при создании проекта добавляться некоторый набор базовой функциональности)
• Do not use top-level statements (будут ли использоваться инструкции верхнего уровня)

Отметим опцию Include sample pages , а все остальные оставим по умолчанию и нажнем на кнопку создания проекта.

Создание проекта через .NET CLI

Также можно создать проект Blazor WebAssembly через .NET Cli, используя шаблон blazorwasm :

dotnet new blazorwasm -o BlazorWebApp

Также можно указать дополнительные опции, в частности, надо ли включать базовую функциональность (если не надо, то применяется опция -e ) и будет ли это PWA-приложение (опция —pwa ):

dotnet new blazorwasm -o BlazorWebAssemblyApp --pwa –e

Структура проекта

После создания проекта он будет иметь следующую структуру:

• Папка wwwroot содержит статические файлы приложения.
  • Подпапка css хранит определения стилей css, например, файл стилей фреймворка bootstrap.
  • Подпапка sample-data хранит файл weather.json , который представляет некоторые типовые данные в формате json, используемые приложением.
  • Файл index.html представляет главную страницу, на которую и будет загружаться приложение Blazor
• Папка Pages содержит компоненты Razor.
  • Counter.razor хранит код компонента Counter, суть которого в определение счетчика, значение которого увеличивается при нажатии на кнопку.
  • Weather.razor хранит код компонента Weather, который с помощью HttpClient получает некоторые данные и выводит их на веб-страницу
  • Home.razor хранит код компонента Home.
• Папка Shared хранит дополнительные компоненты Razor
  • MainLayout.razor хранит код компонента MainLayout, который определяет структуру или компоновку приложения blazor.
  • NavMenu.razor хранит код компонента NavMenu, который определяет элементы навигации
  • ServeyPrompt.razor представляет дополнительный типовой компонент, который не выполняет особых функций
• _Imports.razor содержит подключения пространств имен с помощью директивы using, которые будут подключаться в компоненты Razor.
• App.razor содержит определение корневого компонента приложения, который позволяет установить маршрутизацию между вложенными компонентами с помощью другого встроенного компонента Router.
• Файл Program.cs содержит класс Program, который представляет точку входа в приложение. В данном случае это стандартный для приложения ASP.NET Core класс Program, который запускает и конфигурирует хост, в рамках которого разворачивается приложение с Blazor.

Процесс загрузки приложения в Blazor WebAssembly

Рассмотрим в целом, как происходит запуск приложения на Blazor WebAssembly. Сначала браузер делает запрос к веб-серверу, который возвращает набор файлов, необходимых для загрузки приложения — главная страница приложения (обычно index.html), статические ресурсы (изображения, файлы CSS и JavaScript), а также специальный файл blazor.webassembly.js , который подключен на главной странице приложения. Все это статические файлы.

В проекте главная страница index.html располагается в папке wwwroot и выглядит следующим образом:

            
  
 
An unhandled error has occurred. Reload �� 
    

Когда браузер загрузил эту страницу, начинает выполняться подключаемый внизу страницы скрипт blazor.webassembly.js . Он загружает файл с именем blazor.boot.json , который содержит список всех файлов фреймворка и приложения, необходимых для запуска приложения. В основном это сборки .NET. И все эти файлы, указанные в blazor.boot.json , также загружаются в коде javascript.

Также blazor.webassembly.js загружает еще один специальный файл — dotnet.wasm . Этот файл представляет собой среду выполнения Mono .NET, скомпилированную в WebAssembly.

После загрузки всех файлов из blazor.boot.json код из файла blazor.webassembly.js инициализирует среду выполнения WebAssembly .NET, которая загружает инфраструктуру Blazor и само приложение.

Принцип работы приложения

Непосредственно работа приложения Blazor начинается с класса Program :

using BlazorWasmApp; using Microsoft.AspNetCore.Components.Web; using Microsoft.AspNetCore.Components.WebAssembly.Hosting; var builder = WebAssemblyHostBuilder.CreateDefault(args); builder.RootComponents.Add("#app"); builder.RootComponents.Add("head::after"); builder.Services.AddScoped(sp => new HttpClient < BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) >); await builder.Build().RunAsync();

Основная задача класса Program — настроить и запустить хост, который представлен классом WebAssemblyHost . Для этого у класса билдера хоста — WebAssemblyHostBuilder вызывается метод Build() . А для запуска хоста вызывается метод RunAsync() .

Кроме этого, с помощью свойства RootComponents и его свойства Add() добавляется класс корневого компонента и его селектор:

builder.RootComponents.Add("#app");

В то есть в данном случае класс компонента называется App, а для его рендеринга на веб-странице используется элемент c css-селектором #app , то есть такой элемент, у которого id=app .

Также добавляется компонент HeadOutlet — он позволяет вносить изменения в элемент на html-странице (например, обновлять мета-теги или заголовок страницы).

Ну и кроме того, здесь в приложение внедряется в качестве сервиса HttpClient, который используется в компонентах Blazor для отправки http-запросов:

builder.Services.AddTransient(sp => new HttpClient < BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) >);

Класс App

Класс компонента App из файла App.razor в корне проекта представляет основной компонент приложения, в рамках которого будут запускаться все другие компоненты и функциональность приложения Blazor WebAssembly.

     Not found 
Sorry, there's nothing at this address.
    

Компонент App, как и в проекте Blazor Server, с помощью встроенного компонента Router добавляет возможность маршрутизации по вложенным компонентам. Его атрибут AppAssembly указывает на сборку, в которой следует искать запрошенные вложенные компоненты.

При запросе компонентов может быть две ситуации: запрошенный ресурс (компонент) найден и ресурс не найден. Соответственно для каждой из этих ситуаций определены соответственно два элемента: Found и NotFound

Компонент Found содержит другой компонент — RouteView . Через атрибут RouteData он получает контекст маршрутизации, который будут использоваться при обработке запроса. А другой атрибут — DefaultLayout устанавливает компонент, который будет определять компоновку (layout) содержимого — в данном случае это компонент MainLayout.

Комопонент NotFound определяет, как будет рендерится ответ, если компонент для обработки запроса не найден. С помощью вложенного компонента LayoutView определяется компонент, который будет задавать компоновку. В данном случае это опять же компонент MainLayout.

MainLayout

В обоих случаях в компоненте App для определения компоновки приложения используется компонент MainLayout , который определен в файле MainLayout.razor в папке Layout:

@inherits LayoutComponentBase 
 
 
 
 
About 
 
@Body
 
 
 

Компонент наследуется от класса LayoutComponentBase, который определяет базовую функциональность для компоновки. Например, с помощью свойства Body в определенном месте разметки будет добавляться выбранный компонент. То есть на место вызова @Body будет добавляться контент компонентов Home, Counter и Weather из папки Pages.

С помощью элемента добавляется компонент NavMenu из файла Layout/NavMenu.razor , который создает систему навигации. Благодаря этому мы можем переходить к различным компонентам внутри приложения по набору ссылок. При этом при обращении по ссылке никаких запросов на сервер не идет. Все запросы обрабатываются локально.

Выбор компонентов

Основные комопненты, которые представляют отдельные ресурсы и к которым пользователь может осуществлять запросы, раплагаются в папке Pages — это компоненты Home, Counter, Weather. Чтобы они могли быть сопоставлены с определенными маршрутами, в начале каждого подобного компонента указывается директива @page с указанием маршрута. Например, компонент Counter:

@page "/counter" Counter 
Counter
 
Current count: @currentCount
 Click me @code < private int currentCount = 0; private void IncrementCount() < currentCount++; >>

Данный компонент будет сопоставляться с запросами по пути «/counter», например, https://localhost:44304/counter .

Стоит отметить, что данный компонент обрабатывает события пользовательского интерфейса. Если в приложении происходит какое-либо событие графического интерфейса, например, нажатие пользователя на кнопку, то это событие перехватывается кодом blazor.webassembly.js. Далее это событие передается фреймворку Blazor, который работает поверх среды выполнения dotnet.wasm , и обрабатывается компонентом маршрутизации Blazor. А компонент маршрутизации или роутер в таблице маршрутизации выбирает компонент для обработки события. Создается объект данного компонента, который обрабатывает событие.

Затем Blazor вычисляет минимально необходимое количество изменений для обновления DOM, чтобы DOM соответствовал изменившемуся состоянию компоеннта. После завершения информация об изменениях передается обратно — коду из файла blazor.webassembly.js , который применяет изменения к реальному DOM. Соответственно происходит обновление html-страницы.

Запуск проекта

Этот проект уже представляет готовый функционал, и мы можем запустить проект и опробовать его типовую функциональность:

Через инструменты разработчика мы можем увидеть, что среди прочих файлов загружается файл blazor.boot.json , о котором выше шла речь и который будет иметь содержание типа следующего:

< "mainAssemblyName": "BlazorWasmApp", "resources": < "hash": "sha256-+DjjbS9bPw2T2LbRSJceAH1BygJbGpVlpnDZGrprqkw=", "jsModuleNative": < "dotnet.native.8.0.0.6861x3atex.js": "sha256-LjLDIz9+J7uuiwMlQ4HbNx2BnSpphOtO2MwkoI28vdI=" >, "jsModuleRuntime": < "dotnet.runtime.8.0.0.nv2fjwutuz.js": "sha256-WdSX3HQvnBYF0KJLZoOyHvTzMHetaob6PV0Kn2K+QXw=" >, "wasmNative": < "dotnet.native.wasm": "sha256-Vr6ZXKoP77zgabrMIxQ1GbOkrxfx5XGqHO0odLhUIMY=" >, "icu": < "icudt_CJK.dat": "sha256-SZLtQnRc0JkwqHab0VUVP7T3uBPSeYzxzDnpxPpUnHk=", "icudt_EFIGS.dat": "sha256-8fItetYY8kQ0ww6oxwTLiT3oXlBwHKumbeP2pRF4yTc=", "icudt_no_CJK.dat": "sha256-L7sV7NEYP37/Qr2FPCePo5cJqRgTXRwGHuwF5Q+0Nfs=" >, "assembly": < "Microsoft.AspNetCore.Authorization.wasm": "sha256-j29bzsbGr0GXbz3saSOBqDtWxNOK08Or3b1HgnZ+pvA=", "Microsoft.AspNetCore.Components.wasm": "sha256-0SRqG4hZOVUUFxERmD93PJWBJR6d4gCf5UB9vF6jB9A=", "Microsoft.AspNetCore.Components.Forms.wasm": "sha256-v5x7jiwdpMdHj54wA/JoDsrCrnr89XklOokSoWNJzF0=", "Microsoft.AspNetCore.Components.Web.wasm": "sha256-H1qHk5Kqn+R+8t/eTsZzQ5/5ZvgjmC8+ZPyuEp5nals=", . "System.wasm": "sha256-cMSi3CkR4f0ANPSwi7X/T6NvBS6QMlbFtcvKQrCeG6I=", "WindowsBase.wasm": "sha256-ydADyJcM/JrxGU0lPCIn9utGtPieXB+ubXRN7TJls5Y=", "mscorlib.wasm": "sha256-cDuLeL3OCtVtiid/dyex1MVgbuzDSRwZxKzuP2Dp4mg=", "netstandard.wasm": "sha256-A0h86SDieTMoU/wU2JTszWCsUmMuguDcbap0b0BzsmI=", "System.Private.CoreLib.wasm": "sha256-/0DNIm/T0C07X7Tuz5uR8JvVCoAfEE2MnfPUSjyS9xc=", "BlazorWasmApp.wasm": "sha256-rZjrh07jSGIYAY2VA6lpd6Ip/p+N9es5g0tTXyYoYMM=" >, "pdb": < "BlazorWasmApp.pdb": "sha256-71Sd7nJUDTYJyBkxaOzqB3nUMXBTo+u/ZkoZ4dfNMfE=" >>, "cacheBootResources": true, "debugLevel": -1, "globalizationMode": "sharded", "extensions": < "blazor": <>> >

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

Кроме того, в инструментах браузера мы можем увидеть, что также загружается еще ряд файлов. В частности,

• dotnet.js : это точка входа («загрузчик»), который содержит общедоступный API для взаимодействия со средой выполнения .NET.
• dotnet.native.js : содержит Emscripten API и загружается загрузчиком.
• dotnet.runtime.js : содержит остальную часть среды выполнения .NET.