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

О платформе Blazor

Платформа 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 внизу веб страницы

<script src="_framework/blazor.server.js"></script>

HTML and C#

<td style="padding:1px;"> 
    <input @bind-value="@tv.Brand" @bind-value:event="onchange" @onfocusout="() =>  WriteToDB()" 
        class="rounded-0 border-0 form-control" type="text"> 
</td> 
...
<td>
    <button class="btn btn-danger btn-sm" @onclick="() => RemoveTV(tv)">
            <span class="oi oi-delete" aria-hidden="false"></span></button>
</td>

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

События HTML элементов также легко интегрируются с кодом C#: нажатие на кнопку будет отслеживаться программной конструкцией @onclick="() => RemoveTV(tv)". Уже в методе класса 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<ControlDB>(); 
}

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

База данных в исходнике текстовый файл 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 List<TV> ListTVs { get; set; } = new List<TV>();
}

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

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

Просмотр демо 🔎