防止在 Asp.Net Core ViewComponents 中加载多个 JavaScript 脚本

Question

例如，我有这个PrimitiveViewComponent：

<button type="button" onClick="sayHello"></button>
<script>
    function sayHello() {
        console.log("Hello")
    }
</script>

如果我不止一次调用它们，像这样：

<div>@await Component.InvokeAsync("Primitive")</div>
<div>@await Component.InvokeAsync("Primitive")</div>
<div>@await Component.InvokeAsync("Primitive")</div>

这会产生歧义，因为函数 sayHello 会被包含 3 次，这不是必需的。

我应该如何为 ViewComponents 定义 JavaScript 函数，如何防止它们被多次包含，以及将它们存储在哪里？

Answer 1

我认为你应该定义一个类似ScriptIncluded的属性来指定脚本是否包含在模型中，并在服务器端维护属性状态；每次调用组件时检查 ScriptIncluded 属性是否为真：

<button type="button" onClick="sayHello">&lt/button&gt
@if(model.ScriptIncluded){
    <script&gt
        function sayHello(){
        }
    </script&gt
}

在你的组件类定义中，如果组件不是第一次被调用，你应该设置model.ScriptIncluded = True;。您可以在HttpContext.Items 中保留一个布尔值。

Answer 2

我认为服务器端没有办法解决这个问题。但是使用 Javascript 和 JQuery 可以解决这个问题。

在这段代码中，我将脚本移动到 wwwroot 中 js 文件夹下的文件 scripts.js 中。在加载页面时，我正在检查 SayHello 是函数还是未定义，如果是函数，则表示它已加载到页面，如果未定义，我正在使用 JQuery getscript 方法加载脚本。

这是视图组件代码。

<button type="button" onClick="sayHello()">Hello</button>
<script>
    if (typeof sayHello !== 'function') {
        $.getScript( "/js/scripts.js" ).done(function( script, textStatus ) {
            console.log( textStatus );
        });
    }
</script>

希望对你有帮助