Исходные коды программ и игр

Программирование - работа и хобби

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

Язык программирования C#

Кратко о платформе Blazor

Платформа Blazor предназначена для создания интерактивных веб приложений и позволяет создавать взаимодействие с клиентом без кодирования на языке JavaScript. Веб приложение может быть полностью написано на языке C#, тем самым обеспечивая единую логику кода для сервера и клиента. Приложения Blazor представляют собой компоненты с кодом на C#, разметкой HTML и языком таблиц стилей CSS. Компоненты - это веб страницы с расширением .razor. Хотя приложение может быть полностью написано на языке C#, без проблем можно использовать скрипты и библиотеки основе Javascript для расширения разнообразия веб страниц. Приложения Blazor работают в среде ASP.NET Core и, соответственно этому факту, являются кроссплатформенными.

Запуск приложений 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 WebAssembly и Blazor Server

Платформа Blazor анонсирована в двух видах: Blazor WebAssembly и Blazor Server.

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

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

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

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

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

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

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

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

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

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


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

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

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

Платформа .NET Core берет на себя создание экземпляра зависимости и его удаление, когда он больше не нужен. Зависимость - это любой объект, который требуется другому объекту. Метод расширения services.AddSingleton(...) добавляет и настраивает службы. Например, services.AddMvc() добавляет службы, которые нужны для работы шаблона MVC.

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

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

public void ConfigureServices(IServiceCollection services)
{
    // Добавленные шаблоном приложения стандартные службы
    services.AddRazorPages();
    services.AddServerSideBlazor();

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

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

Базы данных в исходнике это текстовые файлы. Для каждой веб страницы отдельная модель и база данных. Редактируя одну таблицу, мы не затрагиваем другие базы данных. Всё как в «настоящей» базе. Отдельная модель для каждой страницы усиливает визуальность быстрых переходов между веб страницами и обеспечивает наглядность мгновенного сохранения информации в таблицах. Примечание: в веб приложениях Blazor обновление интерфейса происходит без перезагрузки самих страниц.

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


// Модель базы автомобилей
public class Car
{
    public string Brand { get; set; }
    public string Model { get; set; }
    public int Speed { get; set; }
    public int Weight { get; set; }
}


//  Класс исполняющий обязанности таблицы автомобилей
public class Cars
{
    // В Json сериализуются только свойства, но не поля.
    // Поле и свойство только для примера.
    public int ExamleNotJson = 9999;
    public int ExampleJson { get; set; }

    // Начиная с C# 6.0 версии свойства можно инициализировать таким образом.
    public List<Car> ListCars { get; set; } = new List<Car>();


    public Cars()
    {
        // До C# 6.0 инициализация свойства была 
        // возможна только в конструкторе.
        // ListCars = new List<Car>();

        ExampleJson = 100;
    }
}

Асинхронные операции

Класс ControlDBAsync в исходнике использует для чтения данных из базы асинхронный метод. Асинхронность позволяет работать интерфейсу сайту во время длительной операции. Очень желательно чтобы пользовательский интерфейс реагировал на ввод данных пользователем в любых случаях. Например, при длительных операциях получения информации из различных источников или затяжных математических вычислениях.

Для демонстрации удобства асинхронности в метод чтения Task Read() искусственно добавлена задержка работы функции чтения на несколько секунд. Во время «длительной загрузки» информации из базы происходит отвлекающая анимация процесса, при этом можно свободно пользоваться интерфейсом сайта.

Метод Task Read() только позволяет запускать задачу асинхронной работы, но для фактической асинхронности он должен обязательно запускаться в паре с оператором await и модификатором async. Оператор await запускает ожидание получения результата и позволяет обойтись без блокировки главного потока, затем работа процесса продолжает выполнение с того же места, где началось ожидание.

Асинхронная операция чтения запускается при инициализации компонента TableASync следующим способом:

private async Task Update()
{
    cars = await controlDBAsync.Read();
}

// Асинхронная инициализация таблицы при загрузке данной страницы
protected override async Task OnInitializedAsync()
{
    await Update();
}

Техпроцесс асинхронной работы

При вызове метода async Task Update() запускается задача чтения базы данных в отдельном потоке. Оператор await приостанавливает работу вызвавшего метода async Task OnInitializedAsync() и передает управление главному методу приложения static void Main(string[] args). После окончания задачи await возвращает результат и запускает продолжение работы метода async Task OnInitializedAsync() с того же места где началось ожидание.

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

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

Файл загрузки Размер Кол-во загрузок
BlazorApp31012020.zip 💾 686Кбайт 22