在一个剃须刀页面中使用 JS <script>

Question

使用 blazor 和 .Net 5，我需要知道是否可以在特定的 razor 页面中使用 .js 文件？

更多信息：我制作了一个简单的脚本并将其保存到文件中 MyJavaScript.js:

function myfunction()
  {
    alert("Hello");
  }

然后将其添加到 _host.cshtml:

<script src="/MyJavaScript.js"></script>

现在，当我键入 localhost:1212 或 localhost:1212/counter 或其他 razor 页面时，它会在第一次访问浏览器时加载 .js 文件并在页面之间切换，所有 razor 页面都在我的网络应用程序知道 .js 文件，我可以使用 IJSRuntime 在所有 razor 页面中调用 myfunction。我想知道我是否可以为 mypage.razor 页面提供一个特定的 .js 文件，只为 limited/specialized，而不是为我的所有剃刀页面提供 public。这可能吗？

另一方面，我只希望地址 localhost:1212/mypage 显示警报并知道 myfunction 而不是所有剃刀页面。那么我应该把 MyJavaScript.js 文件放在哪里呢？

更新 1：显然，我们不能将 <script></script> 标签放在组件中。

Answer 1

从您的屏幕截图来看，您似乎快完成了 - 您需要通过 IJSRuntime import the js module，然后通过 IJSObjectReference 正常调用函数。确保您的 js 文件函数具有 export 关键字。

为了便于参考，我从上面 link 的文档中提取了这个，但是对于 .NET 5，它看起来像这样：

// wwwroot/scripts.js
export function showPrompt(message) {
  return prompt(message, 'Type anything here');
}

@page "/call-js-example-6"
@implements IAsyncDisposable
@inject IJSRuntime JS

<h1>Call JS Example 6</h1>

<p>
    <button @onclick="TriggerPrompt">Trigger browser window prompt</button>
</p>

<p>
    @result
</p>

@code {
    private IJSObjectReference module;
    private string result;

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            module = await JS.InvokeAsync<IJSObjectReference>("import", 
                "./scripts.js");
        }
    }

    private async Task TriggerPrompt()
    {
        result = await Prompt("Provide some text");
    }

    public async ValueTask<string> Prompt(string message)
    {
        return await module.InvokeAsync<string>("showPrompt", message);
    }

    async ValueTask IAsyncDisposable.DisposeAsync()
    {
        if (module is not null)
        {
            await module.DisposeAsync();
        }
    }
}

在一个剃须刀页面中使用 JS <script>

Use a JS <script> just in one razor page

javascript

blazor-server-side