В этой статье мы посмотрим на Blazor, одностраничный веб-каркас для веб-приложений, построенной на .NET Это работает в браузере с webassembly. Мы получим понимание того, как Blazor обрабатывает звонки JavaScript, почему это необходимо, и как он используется.
Как WebAssembly (сокращенное WASM) набирает импульс, важно понимать текущие возможности. WebAsseSembly не хватает возможности напрямую доступа к API браузера DOM, однако он может создавать звонки на JavaScript. Из-за этого недостатка JavaScript по-прежнему очень большая часть веб-разработки.
Blazor, Mono и Webassembly
WebAssembly (WASM) – это формат бинарного обучения, который предназначен для обеспечения цели компиляции для языков высокого уровня, такими как C #. Недавно Microsoft начал экспериментировать с WebAssembly к принесите .NET в браузер, используя моно-время выполнения Отказ MONO предоставляет базовую сантехника, позволяющую .NET библиотеки (.dls) работать на webassembly.
Блок-схема отношения Blazor & Browser
Blazor оснащен компонентной архитектурой, маршрутизацией, виртуальным DOM и API JavaScript (Interop) API. Через JavaScript Interop Blazor приложение может вызывать функции JavaScript из методов .NET и C # из кода JavaScript.
Чтобы позвонить в JavaScript из .NET Ijsruntime абстракция используется. Текущий экземпляр ijsruntime разрешен, позвонив на Jsruntime. Текущий Отказ Из этого экземпляра мы можем позвонить в Invokeasync Метод, проходящий в первом аргументе в качестве идентификатора соответствующей функции JavaScript, мы хотели бы вызывать, эта функция должна быть доступна в глобальном объеме окно Отказ Дополнительные аргументы могут быть переданы в функцию JavaScript при условии, что они являются JSON Serialize, могут, а также тип возврата Задача Отказ
using Microsoft.JSInterop;
public class ExampleJsInterop
{
public static Task MethodName(TArgs args)
{
// Implemented in exampleJsInterop.js
return JSRuntime.Current.InvokeAsync("scope.jsMethod", args);
}
}
JavaScript Interop
Поскольку Blazor построен на моно- и WebAssembly и, следовательно, не имеет прямого доступа к API браузера DOM, оно должно быть маршала зазывает через JavaScript, когда ему нужен доступ DOM. Включение JavaScript в стеке не только выгодно с точки зрения необходимости, но и гибкости.
Обратная совместимость
Включение JavaScript в стеке позволяет приложениям Blazor используйте существующие библиотеки JavaScript. Это включает в себя библиотеки пользовательских интерфейсов, такие как Bootstrap , Toastr.js библиотека тоста уведомления и Chart.js Для простых компонентов Charting.
Кроме того, полнофункциональные коммерческие пользовательские библиотеки, такие как Kendo Ui потенциально может быть портирован в Blazor. Эти «порты» по существу предоставляют поверхность API C # для взаимодействия с базовым JavaScript при предоставлении пути миграции для пользователей.
Разумейте разрыв
Поскольку Blazor – это новый и экспериментальный, интерпретация позволяет разработчикам отступать на JavaScript, когда есть недостатки сама WebAsseMbly, или потому, что каркас Blazor пока не созревает.
Например, если мы хотели использовать стандартное окно Подскажите () Метод, нет народной поддержки в Blazor, чтобы сделать это. Однако может быть создан простые API с помощью JavaScript Interop, чтобы добавить поддержку этой функциональности.
Мы начнем с создания файла JavaScript с методом, который мы хотели бы вызвать из нашего приложения.
Для видимой функции для Blazor нам нужно будет добавить его в объем окно Отказ В качестве наилучшей практики дополнительные пространства имен могут быть добавлены с помощью модульного шаблона, это защищает наши методы от конфликтующих с другим кодом по объему окно Отказ В нашем пространстве имен мы определяем функцию, чтобы позвонить на родное окно Подскажите () метод.
window.myNamespace = {
showPrompt: function (message) {
return prompt(message, 'Type anything here');
},
anotherFunction: function(args) {
// do stuff
}
};
Далее нам нужно вызовить JavaScript ShowPrompt Функция из в C # Использование Jsruntime. Текущий. Invokeasync метод. C # функция PrompaSync Предоставляет хорошую абстракцию, которую можно использовать в приложении Blazor. Разработчики с использованием абстракции не должны понимать базовую реализацию JavaScript.
using Microsoft.JSInterop;
public class PromptInterop
{
///
/// Invokes a browser prompt and returns the user's input.
///
public static Task PromptAsync(string message) {
return JSRuntime.Current.InvokeAsync("myNamespace.showPrompt",message);
}
}
Поскольку процесс UI Blazor способен работать на отдельной резьбе из приложения Invokeasync следует использовать по умолчанию.
Тем не менее, если необходимо призывать метод JavaScript синхронно, мы можем предоставить эту функциональность путем нагрузки Jsruntime к Ijsinprocessruntime. . Добавление . Подскажите Метод в дополнение к PrompaSync Предоставляет альтернативное API, когда асинхронное поведение недоступно.
using Microsoft.JSInterop;
public class PromptInterop
{
///
/// Invokes a browser prompt and returns the user's input.
///
public static Task PromptAsync(string message) {
return JSRuntime.Current.InvokeAsync("myNamespace.showPrompt",message);
}
///
/// Syncronously invokes a browser prompt and returns the user's input. Use for in-process-senarios only.
///
public static string Prompt(string message) {
return ((IJSInProcessRuntime)JSRuntime.Current).Invoke("myNamespace.showPrompt",message);
}
}
ShowPrompt Способ теперь доступен для использования в приложении. Мы можем позвонить PrompaSync из компонента Blazor, позвонив методу и ожидаю результата.
В следующем примере мы проверим подсказку браузера, когда пользователь нажимает на компонент. Когда подсказка закрыта, результат возвращается в компонент Сообщение поле, которое является связанным с данными и отображена компонентом. Чтобы обеспечить обновление нового значения при включении привязки данных, мы позвоним UndhasChanged проинструктировать Blazor перенаправить компонент.
@Message@functions { string Message = "Click to change"; async void HandleClick() { Message = await PromptInterop.PromptAsync("Type a message"); StateHasChanged(); } }
Blazor JavaScript Interop предоставляет подсказку браузера
Заключение
В то время как Blazor и WebAssembly не хватает способности напрямую получить доступ к API браузера DOM, Interops JavaScript предоставляет средство заполнения зазора. Включа позволяет мигрировать существующие библиотеки JavaScript в Blazor. Через разработчики взаимодействия могут создавать абстракции вокруг функций браузера, обеспечивающие методы C # для добавления функциональности на уровне приложения.
Будучи популярностью Blazor выиграть, разумно предположить, что появится экосистема взаимодействующих библиотек. По мере того, как более доступные библиотеки взаимодействия, то застройщики Blazor могут потратить меньше времени, написания JavaScript и больше времени в C #.
Plug: Logrocket, DVR для веб-приложений
https://logrocket.com/signup/
Logrocket Это инструмент для ведения журнала Frontend, который позволяет вам повторить проблемы, как если бы они произошли в вашем браузере. Вместо того, чтобы угадать, почему случаются ошибки, или просят пользователей на скриншоты и журнал свалки, Lognocket позволяет воспроизвести сеанс, чтобы быстро понять, что пошло не так. Он отлично работает с любым приложением, независимо от основ и имеет плагины для регистрации дополнительного контекста из Redux, Vuex и @ Ngrx/Store.
В дополнение к регистрации действий и состояния Redux, Lognocket Records Console Logs, ошибки JavaScript, Stacktraces, Networks/Ответы с заголовками + тел, метаданные браузера и пользовательские журналы. Он также привлекает инструменты DOM для записи HTML и CSS на странице, воссоздая Pixel-Perfect видео даже самых сложных приложений для одной страницы.
Попробуйте бесплатно.
Пост Работа с Blazor JavaScript Interop появился первым на Logocket blog Отказ
Оригинал: “https://dev.to/bnevilleoneill/working-with-the-blazor-javascript-interop-52op”