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

【问题标题】：Use a JS <script> just in one razor page仅在一个剃须刀页面中使用 JS <script>
【发布时间】：2021-11-23 08:58:44
【问题描述】：

使用 blazor 和 .Net 5，我需要知道是否可以在特定剃须刀页面内使用 .js 文件？

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

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

然后将其添加到_host.cshtml：

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

现在当我输入localhost:1212 或localhost:1212/counter 或其他剃须刀页面时，它会在第一次访问浏览器时加载.js 文件并在页面之间切换，我的网络应用程序中的所有剃须刀页面，知道@987654330 @ 文件，我可以使用 IJSRuntime 在所有剃须刀页面中调用 myfunction。我想知道我是否可以拥有一个特定的 .js 文件，该文件仅适用于 mypage.razor 页面，而不是对我所有的剃须刀页面公开。这可能吗？

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

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

【问题讨论】：

是的。只把它放在你需要它的地方。要更详细，请仅将其放在 mypage.razor 中。
简单地说，以不同的方式命名函数，并且只在 mypage.razor 中调用它。
感谢您的回复。检查上面的更新 1。显然，我们不能将标签放在组件中

标签： javascript blazor-server-side

【解决方案1】：

从你的屏幕截图看来你快到了——你需要通过IJSRuntimeimport the js module，然后通过IJSObjectReference正常调用该函数。确保你的 js 文件函数有 export 关键字。

我从上面链接中的文档中提取这个以便于参考，但对于 .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();
        }
    }
}

【讨论】：