День 1437. #ЗаметкиНаПолях #Blazor
Вызываем Код JavaScript из Blazor WebAssembly
Одна из серьезных проблем модернизации существующего или «устаревшего» кода заключается в том, насколько сложно начать работу, потому что код слишком сложен или объёмен. Рефакторинг и переписывание может стать проще, если вы можете интегрировать новый код с существующим устаревшим кодом, а затем медленно и итеративно мигрировать с течением времени.
Сегодня рассмотрим, как из кода Blazor WASM вызвать JavaScript-функцию, которая будет примером некоторого существующего устаревшего кода.
Допустим, у нас есть какая-то функция на Javascript:
var arg = 0;
function legacyFunction(arg) {
var nxt = arg + 1;
console.log(arg + ' > ' + nxt);
return nxt;
}
Чтобы вызвать её в проекте Blazor WASM, нам потребуются 3 простых шага:
1) Добавить тег script со ссылкой на файл Javascript кода в файл шаблона страниц (например, index.html):
<script src="legacysample.js"></script>
2) На странице Razor-компонента внедрить JSRuntime:
@inject IJSRuntime JSRuntime
3) На странице Razor-компонента написать Blazor-функцию с вызовом Javascript кода с помощью JSRuntime:
var currentCount = 0;
...
async void IncrementCount()
{
currentCount = await
JSRuntime.InvokeAsync<int>(
"legacyFunction", currentCount);
}
На этом третьем и последнем шаге вы можете видеть, что currentCount использует вызов JSRuntime.InvokeAsync с целочисленным типом результата, возвращаемого JavaScript-функцией «legacyFunction», и currentCount, передаваемого в качестве аргумента. Обратите внимание, что метод был изменён на асинхронный для использования await, чтобы JSRuntime мог завершить InvokeAsync, прежде чем вернуть управление Razor-компоненту.
Источник: https://dev.to/aztecconsulting/invoking-legacy-javascript-from-blazor-webassembly-using-the-jsruntime-1df3
