Добрый день! Сегодня я хотел бы поговорить о технологии Blazor.
Я не хочу вдаваться в подробности этой технологии, о ней написано уже много, озвучу лишь 2 основных для меня преимущества.
1) Позволяет писать скрипты сайта на языке C# вместо JS.
2) Позволяет не плодить разные классы, описывающие модели (ранее например в Angular нужно было писать модель данных на C# для backend и её буквально дублировать на TypeScript, чтобы вывести на сайте).
Но, тем не менее, технология Blazor позволяет использовать JS скрипты. И вроде бы не так уж и нужны эти скрипты, если время на разработку есть и нужно выполнять не такие уж и сложные действия для динамики на сайте.
А вот если нужно выводить какую-то крутую 3D графику?
Тут как раз проще и целесообразнее использовать уже существующие решения. Так например для визуализации 3D объектов можно использовать Three.js. Можно так же запустить Unity и собрать простую игру в ней для платформы WebGL, где при генерации тоже создаётся скрипт. Поэтому в таких задачах без использования JS никак.
На самом деле, очень грубо говоря, Blazor работает на JS framework, который компилирует сод C# в IL (тут по классике, как и везде), а далее преобразует в WebAssembly код, который поддерживается практически во всех актуальный браузерах.
WebGL - платформа, которая позволяет выполнять WebAssembly код на клиенте и использовать его вычислительные мощности, в том числе видеокарту, что позволяет работать с 3D графикой. Это в грубой форме объяснение. Ну и конечно ресурсы всё равно ограничены и полностью использовать мощности клиентского устройства не представляется возможным. Подробнее ознакомится предлагаю самим, об этом тоже много чего написано.
Сейчас же приступим к использованию самого JS скрипта в Blazor приложении.
Я буду создавать приложение Blazor WebAssembly, так как оно как раз заточено под выполнение кода на клиенте. Доступно по ссылке: https://github.com/Morgfrimen/BlazorWASM
Мои ожидания в том, что читатель уже отчасти знаком с веб разработкой на ASP.NET Core и владеет некоторыми навыками верстки страниц.
Для целей статьи я создал TheeJS.razor страницу, которая состоит из перечисления:
1) Three.JS пример.
2) Unity WebGL пример.
Three.JS - описывается JS скриптом, находящийся тут.
Тоже самое и с Unity, вот тут.
Код страницы:
@inject IJSRuntime jsRuntime - добавляет зависимость IJSRuntime через встроенный DI контейнер. Данные интерфейс позволяет запускать JS код из кода C# .
Далее в блоке @code есть переопределённый асинхронный метод OnAfterRenderAsync. В нём при первом рендеринге запускаются JS скрипты для Three.JS и Unity по средству метода InvokeVoidAsync в jsRuntime. Данный в качестве входных параметров принимает название скрипта и необходимые параметры в качестве входных параметров. То есть входные данные самой функции скрипта.
Проверить работу можно по ссылке BlazorWASM (morgfrimen.github.io) и перейти в меню во вкладку WebGL. Приложение с кручащими кубами - Three.JS, а ниже приложение - Unity WebGL.
Вывод: Для работы с любым JS кодом в Blazor необходимо выполнить всего 2 действий:
1) @inject IJSRuntime jsRuntime внедрить зависимость.
2) Выполнить один из методов вызова в jsRuntime, например InvokeVoidAsync и указать необходимые параметры. (Как и в любом веб приложении, заранее добавив в index.html (как правило, в этом файле присутствуют все ссылки на стили и скрипты в приложении) ссылку на Ваш скрипт).
Отступление:
Поскольку Blazor WebAssembly запускается полностью на клиенткой машине, данный сайт можно использовать как статичный сайт. И произведя некоторые манипуляции с github.actions можно опубликовать его на этом сайте.