AIKraft/AI/Войти
AIKraft/Skills/Использование JS-интеропа

Использование JS-интеропа

Add, review, or fix JavaScript interop in Blazor components. USE FOR: calling JavaScript from Blazor, calling .NET from JavaScript, collocated .razor.js modules, IJSRuntime, IJSObjectReference lifecycle, DotNetObjectReference, ElementReference, timing rules for when JS is available, IAsyncDisposable disposal of JS references, server-side JS interop safety. DO NOT USE FOR: general Blazor component

dotnet official Разработка

Что делает навык

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

Когда применять

  • Вызов JavaScript-функций из кода Blazor-компонента
  • Вызов методов .NET из JavaScript с использованием DotNetObjectReference
  • Использование совмещённых модулей (.razor.js) для инкапсуляции JS-логики
  • Освобождение ресурсов JS через реализацию IAsyncDisposable
  • Работа с ElementReference для доступа к DOM-элементам

Как работает

  1. Создайте файл .razor.js рядом с компонентом .razor и экспортируйте необходимые функции.
  2. Импортируйте JS-модуль в компонент, используя правильные пути (относительные для того же проекта или _content/ для RCL).
  3. Выполняйте все вызовы JS Interop только в OnAfterRenderAsync или обработчиках событий, избегая OnInitialized и конструкторов.
  4. Передавайте DotNetObjectReference в JS-функции для обратных вызовов .NET.
  5. Реализуйте IJSObjectReference и IAsyncDisposable для корректного освобождения ссылок на JS-объекты.
  6. Используйте IJSRuntime для асинхронных вызовов JS-методов.

Примеры запросов агенту

Как правильно вызвать JS-функцию из Blazor-компонента?
Как реализовать обратный вызов из JavaScript в .NET через DotNetObjectReference?
Как освободить ресурсы JS-модуля при уничтожении компонента Blazor?

Описание составлено по SKILL.md навыка, сверено 05.10.2026.

Как подключить

1Скачать навык
# возьмите папку навыка «use-js-interop» из репозитория: # https://github.com/dotnet/skills
2Положить папку с SKILL.md к навыкам ассистента
# положите папку навыка туда, где ассистент ищет skills: cp -r use-js-interop/ ~/.claude/skills/use-js-interop/

Навык — папка с файлом SKILL.md (описание + инструкции) и опциональными скриптами. Ассистент (Claude, Claude Code и совместимые) подхватывает его по описанию и следует шагам.