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

За последние несколько месяцев я работал над интересным проектом по внедрению компонентов blazor в качестве повторно используемого компонента в приложение Knockout .Net Framework MVC.

Почему?

За последние пару лет моя команда на моем рабочем месте пыталась перейти от старой нокаутирующей библиотеки к чему-то новому, например, Angular или React. Это означало наем совершенно новой команды с опытом работы с этими фреймворками/библиотеками. Наша команда действительно пыталась продвигаться вперед с angular, но каждый раз мы сталкивались с различными проблемами, а влияние пандемии меняло структуру компании, цели, и многие из наших проектов были закрыты.

Члены нашей основной команды — это бэкэнд-разработчики с опытом работы с C# и .Net. Когда мы вышли из пандемии, мы начали получать множество запросов на новые функции в нашем устаревшем приложении, и нам было просто необходимо двигаться дальше и обрабатывать эти новые запросы в новой структуре/библиотеке внешнего интерфейса. Но проблема, с которой мы столкнулись, заключалась в том, что создание этих новых функций должно быть быстрым, и эти функции должны быть доступны из существующего приложения.

Учитывая наши сильные стороны в .Net и C#, мы решили попробовать Blazor. Мы решили следовать подходу, основанному на компонентах, когда мы создаем каждый компонент и переносим его в существующее приложение mvc. Мы начали с POC, чтобы увидеть, можем ли мы экспортировать компонент в blazor и использовать его в нашем существующем приложении Knockout.

Два месяца работы над этой задачей, мы, наконец, смогли заставить ее работать, и мы готовы начать жить с этим. Итак, давайте посмотрим, как это было сделано.

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

Шаг 1. Загрузите новый проект blazor webassembly.

Для простоты мы рассмотрим базовый проект блазорной плиты и поработаем с компонентом счетчика.

Откройте Visual Studio и нажмите «Создать новый проект».

Щелкните приложение Blazor WebAssembly.

Target Framework должна быть .NET 5.0 и нажмите «Создать».

Шаг 2. Измените приложение blazor, чтобы компонент счетчика загружался только при запуске приложения

Перейдите на свой _Imports.razor и добавьте папку pages в импорт.

@using BlazorComponents.Pages

Измените свой MainLayout.razor , чтобы загружать только компонент счетчика.

После запуска приложения вы должны увидеть только загрузку компонента счетчика

Шаг 3. Создайте экземпляр компонента и внедрите его в объект окна браузера

В компоненте счетчика в приложении blazor добавьте эти строки вверху компонента.

Counter.razor

@inherits LayoutComponentBase
@inject IJSRuntime js

В разделе кода компонента добавьте следующую строку кода, чтобы создать экземпляр компонента.

private DotNetObjectReference<Counter> jsToDotNetBridgeReference;
protected override async Task OnInitializedAsync()
{
jsToDotNetBridgeReference = DotNetObjectReference.Create(this);
await js.InvokeVoidAsync(“SetDotNetReference”, jsToDotNetBridgeReference);
}

Теперь ваш компонент счетчика должен выглядеть примерно так

Теперь перейдите к вашему index.html в папке wwwroot вашего приложения blazor.

Добавьте эти строки в index.html перед концом тела

<script>
window.SetDotNetReference = function (pDotNetReference) {
DotNetReference = pDotNetReference;
}
</script>

Это должно понравиться вашему index.html сейчас

Здесь мы сделали следующее: когда приложение blazor загружается, мы создаем экземпляр компонента счетчика и устанавливаем его в объекте окна браузера в переменной с именем DotNetReference.

Шаг 4. Измените program.cs и index.html для поиска компонента счетчика

Это не обязательный шаг, но для того, чтобы сохранить чистоту процесса, мне нравится менять идентификатор загружаемого элемента div на имя компонента.

Измените свой Program.cs, чтобы найти div с идентификатором, называемым счетчиком, например:

Затем следует добавить ту же ссылку в index.html

Шаг 5. Опубликуйте приложение blazor

Далее нам нужно опубликовать приложение blazor в локальной папке!

Конфигурация публикации должна выглядеть примерно так:

Нажмите «Сохранить» и опубликуйте приложение в нужной папке.

Шаг 6. Скопируйте опубликованное приложение Blazor в корень приложения MVC.

Перейдите в опубликованную папку и выберите _framework

Скопируйте _framework в корень вашего приложения MVC.

Это все, что нам нужно сделать на фронте blazor. Теперь мы должны перейти к нашему приложению MVC.

Шаг 7. Обратитесь к библиотеке blazor в своем приложении MVC

Здесь для простоты я использую базовое шаблонное приложение MVC .Net Framework.

Перейдите к вам Layout.csthml в вашем приложении MVC и добавьте ссылку на blazor.webassembly.js

<script src=”~/_framework/blazor.webassembly.js”></script>

Шаг 8. Измените Index.cshtml

Здесь мы должны изменить Index.cshtml и создать div для установки компонента blazor.

<div class=”jumbotron”>
<div class=”row”>
<div id=”counter”></div>
</div>
</div>

Шаг 9. Измените Web.config

Здесь мы изменим Web.config и добавим требуемые типы mime для обслуживания статического содержимого при запуске приложения.

<system.webServer>
<staticContent>
<remove fileExtension=”.blat” />
<remove fileExtension=”.dat” />
<remove fileExtension=”.dll” />
<remove fileExtension=”.json” />
<remove fileExtension=”.wasm” />
<remove fileExtension=”.woff” />
<remove fileExtension=”.woff2" />
<mimeMap fileExtension=”.blat” mimeType=”application/octet-stream” />
<mimeMap fileExtension=”.dll” mimeType=”application/octet-stream” />
<mimeMap fileExtension=”.dat” mimeType=”application/octet-stream” />
<mimeMap fileExtension=”.json” mimeType=”application/json” />
<mimeMap fileExtension=”.wasm” mimeType=”application/wasm” />
<mimeMap fileExtension=”.woff” mimeType=”application/font-woff” />
<mimeMap fileExtension=”.woff2" mimeType=”application/font-woff” />
</staticContent>
</system.webServer>

Шаг 10 — BlazorInterop.js

Создайте новый файл js в приложении mvc с именем BlazorInterop.js и укажите ссылку на него из Layout.cshtml.

Добавьте следующие строки кода в BlazorInterop.js

SetDotNetReference = function (pDotNetReference) {
DotNetReference = pDotNetReference;
};

Шаг 11. Запустите приложение .Net Framework MVC

Нажмите F5 и запустите приложение, и вы должны увидеть компонент Blazor, загруженный в представлении.

Именно так вы загружаете компонент blazor из приложения blazor в приложение .Net Framework MVC.

Это самый простой способ загрузки компонентов Blazor, однако в действительности существует много сложных требований, таких как загрузка компонента по требованию.

Теперь давайте посмотрим, как мы можем вывести это на следующий уровень, загрузив компонент по запросу и выполнив некоторые сложные операции, такие как передача данных из хост-приложения в компонент blazor.

Шаг 12. Отключите автозапуск

К счастью, blazor.webassembly.js имеет свойство, называемое автозапуском, и для него можно установить значение true или false. Теперь мы установим его в false.

Перейдите к своему Layout.cshtml и там, где мы ссылались на blazor.webassembly.js, добавьте свойство автозапуска, подобное этому.

Если для автозапуска установлено значение false, компонент blazor не будет загружаться, если его не попросят.

Шаг 13. Загрузка компонента blazor по запросу

Теперь мы установили для автозапуска значение false, нам нужно будет сообщить компоненту blazor, когда загружать, чтобы сделать это, мы теперь добавим новую кнопку в наш Index.cshtml с привязкой onclick, подобной этой:

Теперь давайте создадим новую функцию в Blazorinterop.js с именем LoadBlazorComponent и вызовем функцию Blazor.start().

В свой Blazorinterop.js добавьте следующий код.

LoadBlazorComponent = function () {
Blazor.start().then(() => {
console.log(‘Blazor Initialized’);
})
}

Теперь, когда вы нажимаете кнопку Показать компонент счетчика, только тогда он загружает компонент blazor

Шаг 14. Вызов методов .net из javascript

Теперь давайте посмотрим, как мы можем вызывать методы в blazor из вашего хост-приложения, и посмотрим, как можно передавать данные.

В приложении blazor создайте новый метод с именем CustomIncrement, этот метод будет увеличивать счетчик на значение, введенное пользователем. В свой компонент Counter.razor добавьте следующий код.

Counter.razor

[JSInvokable]
public void CustomIncrement(int counter)
{
currentCount = currentCount + counter;
StateHasChanged();
}

Здесь [JSInvokable] — это способ сообщить объекту DotNetReference, что этот метод можно вызвать из JS.

Как только это будет сделано, выполните шаг 6.

Шаг 15. Вызов метода из JS

Теперь вернитесь в свое приложение MVC, и внутри Index.cshtml мы добавим новую кнопку рядом с кнопкой отображения компонента счетчика.

Index.cshtml

<button class=”btn btn-primary” onclick=”CustomIncrement(2)”> Custom Increment (2) </button>

Теперь внутри нашего BlazorInterop.js мы добавим функцию, которая будет вызывать метод Blazor CustomIncrement

BlazorInterop.js

CustomIncrement = function (counter) {
DotNetReference.invokeMethod(‘CustomIncrement’, counter);
}

invokeMethod принимает здесь два параметра: первый — это имя метода, а второй — параметр для метода.

И все, запустите приложение mvc, нажмите на Show Counter Component, а затем нажмите на Custom Increment (2)

Заключение

Это все, что нужно сделать для создания повторно используемых компонентов, мы сделали это в то время, когда Microsoft не поддерживала повторно используемые компоненты Blazor на нашей стороне приложения Blazor. С выпуском .Net 6.0 разработчики тестировали подобную функцию.

Этот подход может очень помочь разработчикам .net, которые хотят поддерживать существующие устаревшие приложения, продолжая создавать новые функции в новой среде без необходимости нанимать новых разработчиков с основным опытом работы с интерфейсными средами на основе JS.

Надеюсь, эта статья поможет разработчикам, оказавшимся в похожей ситуации.

Спасибо.