如何在 Blazor 组件中引用本地 JS 模块？

Question

两周前在 Dotnetconf 上，我听说现在可以在 Blazor 组件中包含本地 Javascript 文件。听起来很有趣。我猜的做法还是使用 JSIniterop 并引用模块文件。

但是你如何引用JS文件？？？我已经尝试了所有可能的创意变体，但到目前为止还没有成功。

我很惊讶谷歌无处不在，但还没有找到这方面的指南或样本。感谢所有提示。

Answer 1

您可以在 .razor.cs 文件旁边创建 .js 代码文件并在运行时加载该文件。 here对此进行了描述。我还发现了此功能的介绍here和github存储库here。

假设您在

ComponentA

文件夹中有

ComponentA.razor

以及

ComponentA.razor.cs

、

ComponentA.razor.js

和

Pages

文件。您可以在组件初始化期间加载此模块，如下所示：

[Inject]
public IJSRuntime JS { get; set; }

private IJSObjectReference module { get; set; }

protected override async Task OnInitializedAsync()
{
    module = await JS.InvokeAsync<IJSObjectReference>("import", "./Pages/ComponentA.razor.js");
}

但是如果您的组件是在组件库项目中定义的，那么您必须使用不同的文件路径。例如，如果您的项目名为

AppComponents

那么此路径将为

./_content/AppComponents/ComponentA.razor.js

。

Answer 2

给定一个

ComponentLibrary.Blazor

项目和

MyComponent.razor

文件夹中名为

Components

的组件。您可以通过在文件

MyComponent.razor.js

后面创建 JavaScript 代码并使用正确的路径

./_content/ComponentLibrary.Blazor/Component/MyComponent.razor.js

导入文件来包含并置的 JavaScript 文件。

我的组件.razor

<div @ref="_elementReference">Hello world!</div>

MyComponent.razor.cs：

public partial class MyComponent {
    private IJSObjectReference? _collocatedJs;
    private ElementReference _elementReference;

    [Inject]
    public required IJSRuntime JsRuntime { get; set; }

    protected override async Task OnAfterRenderAsync(bool firstRender) {
        await base.OnAfterRenderAsync(firstRender);
        _collocatedJs ??= await JsRuntime.InvokeAsync<IJSObjectReference>(
            "import",
            "./_content/ComponentLibrary.Blazor/Component/MyComponent.razor.js");
    }

    public async Task InvokeJavaScriptFunction() {
        if (_collocatedJs != null) {
            await _collocatedJs.InvokeVoidAsync("doJavaScriptWork", _elementReference);
        }
    }
}

MyComponent.razor.js

export function doJavaScriptWork(elementReference) {
    console.log(elementReference);
}

Answer 3

问题是关于 Blazor，但我看到答案提到 .razor.cs 文件，该文件存在于其他 ASP.NET 应用程序中，但不存在于 Blazor 中，您只有 .razor 文件。我在这里找到了一个示例从与组件并置的外部 JavaScript 文件 (.js) 加载脚本，但发现该示例有点难以理解，因为它并不完全具体，当我按照所示操作时，我的应用程序无法找到 JavaScript 文件。这是我对这个例子的解释。我建议完全遵循它，然后根据需要进行修改以满足您的需求。

1. 在 wwwroot/bootstrap 下添加一个名为“JsCollocation1.js”的文件。
2. 将以下 JavaScript 代码添加到文件中：

function showPrompt1(message) {
    return prompt(message, 'Type your name here');
}

3. 在您的 Web 项目中，打开文件 App.razor。你应该看到这样一行代码

<script src="_framework/blazor.web.js"></script>

在该行下方添加以下行：

<script src="./bootstrap/JsCollocation1.js"></script>

4. 在您的 .razor 页面中添加以下代码：

@inject IJSRuntime JS

<button @onclick="ShowPrompt">Call showPrompt1</button>

@if (!string.IsNullOrEmpty(result))
{
    <p>
        Hello @result!
    </p>
}

@code {
    private string? result;

    public async void ShowPrompt()
    {
        result = await JS.InvokeAsync<string>(
            "showPrompt1", "What's your name?");
        StateHasChanged();
    }
}

这样您应该能够运行您的应用程序，单击按钮，然后看到弹出的提示。