Взаимодействие JavaScript с Blazor

5 мин

Blazor использует компоненты C# вместо JavaScript для создания веб-страниц или разделов HTML с динамическим содержимым. Но вы можете использовать взаимодействие Blazor JavaScript (JS-взаимодействие) для вызова библиотек JavaScript в приложениях Blazor и вызова функций JavaScript из кода .NET C#.

В этом уроке вы узнаете, как вызывать JavaScript из кода C# на странице Blazor и как вызывать методы C# из функций JavaScript. В следующем уроке вы используете компонент оповещения из библиотеки JavaScript для обновления веб-сайта доставки пиццы Blazor.

Использование взаимодействия Blazor JavaScript

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

Однако иногда необходимо использовать существующую библиотеку JavaScript. Например, некоторые библиотеки JavaScript с открытым кодом обрабатывают компоненты и обрабатывают элементы пользовательского интерфейса специализированным образом. Кроме того, вы можете попробовать и протестировать код JavaScript, который вы хотите повторно использовать, а не преобразовать его в C#.

Библиотеки JavaScript можно интегрировать в приложения с помощью взаимодействия с JavaScript в Blazor или JS interop. Взаимодействие JS используется для вызова функций JavaScript из методов .NET и вызова методов .NET из функций JavaScript. Взаимодействие JS обрабатывает маршалинг данных и ссылок на объекты между Blazor и JavaScript, чтобы упростить переход между ними.

Загрузка кода JavaScript в приложении Blazor

Вы добавляете JavaScript в приложение Blazor так же, как и в стандартное веб-приложение HTML, используя элемент HTML <script> . Вы добавляете <script> тег после существующего <script src="_framework/blazor.*.js"></script> тега в файле Pages/_Host.cshtml или файле wwwroot/index.html в зависимости от модели размещения Blazor. Дополнительные сведения см. в разделе модели размещения ASP.NET Core Blazor.

Лучше не размещать скрипты в <head> элементе страницы. Blazor управляет только содержимым в <body> элементе HTML-страницы, поэтому взаимодействие JS может завершиться ошибкой, если скрипты зависят от Blazor. Кроме того, страница может отображаться медленнее из-за времени, необходимого для анализа кода JavaScript.

Тег <script> работает так же, как и в веб-приложении HTML. Можно написать код непосредственно в тексте тега или ссылаться на существующий файл JavaScript. Дополнительные сведения см. в разделе ASP.NET Core Blazor взаимодействие с JavaScript: расположение JavaScript.

Внимание

Поместите файлы JavaScript в папку wwwroot проекта Blazor.

Другим вариантом является внедрение <script> элемента, ссылающегося на файл JavaScript, в страницу Pages/_Host.cshtml динамически. Этот подход полезен, если необходимо загрузить различные сценарии в зависимости от условий, которые можно определить только во время выполнения. Этот подход также может ускорить начальную загрузку приложения, если вы активируете логику с событием, которое запускается после отрисовки страницы. Дополнительные сведения см. в разделе о запуске ASP.NET Core Blazor.

Вызов JavaScript из кода .NET

Вы используете IJSRuntime для вызова функции JavaScript из кода .NET. Чтобы сделать среду выполнения взаимодействия JS доступной, вставьте экземпляр IJSRuntime абстракции на страницу Blazor после @page директивы в начале файла.

Интерфейс IJSRuntime предоставляет InvokeAsync методы и InvokeVoidAsync методы для вызова кода JavaScript. Используется InvokeAsync<TValue> для вызова функции JavaScript, возвращающей значение. В противном случае вызовите InvokeVoidAsync. В качестве предлагаемых имен оба метода являются асинхронными, поэтому для записи результатов используется оператор C# await .

Параметр или InvokeAsyncInvokeVoidAsync метод — это имя вызываемой функции JavaScript, за которой следует использовать любые аргументы, необходимые функции. Функция JavaScript должна быть частью window области или подмоскопа window. Аргументы должны быть сериализуемыми в формате JSON.

Примечание.

Взаимодействие JS доступно только в том случае, если соединение SignalR устанавливается между приложением Blazor Server и браузером. Невозможно выполнить вызовы interop до завершения отрисовки. Чтобы определить, завершена ли отрисовка, используйте OnAfterRender или OnAfterRenderAsync событие в коде Blazor.

Использование объекта ElementReference для обновления DOM

Blazor поддерживает представление объектной модели документа (DOM) в виде виртуального дерева отрисовки. При изменении структуры страницы Blazor создает новое дерево преобразования, которое содержит изменения. По завершении изменений Blazor выполняет итерацию различий, чтобы обновить отображение пользовательского интерфейса браузера и версию браузера DOM, которую использует JavaScript.

Многие сторонние библиотеки JavaScript доступны для отрисовки элементов на странице, и эти библиотеки могут обновить DOM. Если код JavaScript изменяет элементы DOM, копия Blazor DOM больше не соответствует текущему состоянию. Эта ситуация может привести к неожиданному поведению и, возможно, привести к рискам безопасности. Важно не вносить изменения, которые могут привести к повреждению представления Blazor DOM.

Самый простой способ обработки этой ситуации — создать элемент заполнителя в компоненте Blazor, как правило, пустой <div @ref="placeHolder"></div> элемент. Код Blazor интерпретирует этот код как пустое пространство, и дерево отрисовки Blazor не пытается отслеживать его содержимое. Вы можете свободно добавлять в него <div>элементы кода JavaScript, и Blazor не пытается изменить его.

Код приложения Blazor определяет поле типа ElementReference для хранения ссылки на <div> элемент. Атрибут @ref элемента <div> задает значение поля. Затем ElementReference объект передается в функцию JavaScript, которая может использовать ссылку для добавления содержимого <div> в элемент.

Вызов кода .NET из JavaScript

Код JavaScript может запускать метод .NET, определяющий код Blazor с помощью DotNet класса служебной программы, части библиотеки взаимодействия JS. Класс DotNet предоставляет вспомогательные invokeMethod функции и invokeMethodAsync функции. Используется invokeMethod для выполнения метода и ожидания результата или invokeMethodAsync вызова метода асинхронно. Метод invokeMethodAsync возвращает JavaScript Promise.

Совет

Чтобы обеспечить скорость реагирования в приложениях, определите метод .NET как asyncи вызовите его с помощью invokeMethodAsync JavaScript.

Необходимо пометить вызываемый метод .NET с JSInvokableAttributeпомощью метода . Метод должен быть, и все параметры должны быть publicсериализуемыми в формате JSON. Кроме того, для асинхронного метода возвращаемый тип должен быть void, или Taskуниверсальный Task<T> объект, где T является сериализуемый тип JSON.

Чтобы вызвать static метод, укажите имя сборки .NET, содержащей класс, идентификатор метода и все параметры, которые метод принимает в качестве аргументов для invokeMethod или invokeMethodAsync функций. По умолчанию идентификатор метода совпадает с именем метода, но можно указать другое значение с помощью атрибута JSInvokable .

Вызов метода экземпляра .NET из JavaScript

Для выполнения метода экземпляра языку JavaScript необходима ссылка на объект, указывающая на экземпляр. Взаимодействие JS предоставляет универсальный DotNetObjectReference тип, который можно использовать для создания ссылки на объект в коде .NET. Код должен сделать эту ссылку на объект доступным для JavaScript.

Затем код JavaScript может вызываться invokeMethodAsync с именем метода .NET и любыми параметрами, которыми требуется метод. Чтобы избежать утечки памяти, код .NET должен удалить ссылку на объект, когда она больше не нужна.