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

例如,我有这个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将被包括三次,这是没有必要的.

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

解决方法

我不认为服务器端有办法管理这个问题.但是使用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>

希望能帮助到你