добавить файл JS и использовать ссылку в html файле в проекте Blazor Assembly

Question

это файл по умолчанию в проекте Blazor Assembly, который используется как-то пытаюсь следовать их примеру

<script>navigator.serviceWorker.register('service-worker.js');</script>

...добавила файл js рядом с файлом в проекте готового решения blazor, теперь пытаюсь указать путь и возможно ещё что-то надо где-то прописать, чтоб файл использовался

<script>ТУТ ЧТО ПРОПИСАТЬ ('MOYFAYL.js');</script> или так <script src="dragtable.js"></script>

как понимать navigator.serviceWorker.register

моя ошибка на выходе

MOYFAYL.js:403 Uncaught ReferenceError: jQuery is not defined
at MOYFAYL.js:403:4

jQuery is not defined а где его нужно defined ?

Answer 1

<script src="_framework/blazor.webassembly.js" autostart="false"></script>
<script>
    Blazor.start().then(function () {
        var customScript = document.createElement('script');
        customScript.setAttribute('src', 'test.js');
        document.head.appendChild(customScript);
    });
</script>

в файл index.html в <body> я добавляю Blazor.start().then(function () в скрипт и атрибут autostart="false"

в папку wwwroot добавляю мой файл джаваскрипт test.js

и затем в .razor-е использую

<button onclick="testFunc()">change color</button> 
<div class="block">Red color</div>
<!--testFunc меняет цвет в файле test.js-->

в документации говорится, что лучше не использовать js в assembly Blazor, но если есть необходимость, то предлагают этот вариант. Проверила, работает

Answer 2

@code {
[Inject]
protected IJSRuntime JSRuntime { get; set; }

protected override async Task OnAfterRenderAsync(bool firstRender)
{
    if (firstRender)
    {
        var jQuery = await JSRuntime.InvokeAsync<IJSObjectReference>("$", ".defaultTable"); //класс таблицы

        await jQuery.InvokeVoidAsync("dragtable"); //функция в .js
    }
}

вот как можно повесить действие на класс в .razor

Answer 3

предложу еще способ, данный способ в Блазор Сервер использую

в Import добавляю зависимость Js

@inject IJSRuntime JsRuntime

некий event используемый у тега на странице разор

public async Task OpenHandler()
{
    await JsRuntime.InvokeVoidAsync("JSMethod");
}

и в _Layout.cshtml добавляю script

 <script>
     function JSMethod() {
        do somethink....
     }
 </script>

такой метод можно использовать для таких задач, как например показать тултип те что то визуальное

Answer 4

Вот еще один рекомендуемый способ после способа IJSObjectReference

Усложним, создаем обертку сервис куда внедряем зависимость IJSRuntime и импортируем оттуда js

в этом примере сервис сам dispose, то разор страница не делает этого

public class JavaScriptService : IAsyncDisposable
{
    private readonly IJSRuntime _jsRuntime;
    private IJSObjectReference _module;

    public JavaScriptService(IJSRuntime jsRuntime)
    {
        _jsRuntime = jsRuntime;
    }

    public async Task MyJsForMyRazorPage()
    {
        _module = await _jsRuntime.InvokeAsync<IJSObjectReference>("import", "./js/myJsFile.js");
        await _module.InvokeVoidAsync("MyFunctionFromJs");
    }

    public async ValueTask DisposeAsync()
    {
        if (_module != null)
        {
            await _module.DisposeAsync();
            _module = null;
        }
    }
}

Program.cs

builder.Services.AddScoped<JavaScriptService>();

.razor

@page "/example"

@inject JavaScriptService JsService

<button @onclick="CallJavaScript">Call JavaScript</button>

@code {
    private async Task CallJavaScript()
    {
        await JsService.MyJsForMyRazorPage();
    }
}

БЛОГ НА HUSL

добавить файл JS и использовать ссылку в html файле в проекте Blazor Assembly

Ответы (4 шт):