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

发布时间：2020-12-16 09:20:31 所属栏目：asp.Net 来源：网络整理

导读：例如,我有这个PrimitiveViewComponent： button type="button" onClick="sayHello"/buttonscript function sayHello() { console.log("Hello") }/script 如果我不止一次调用它们,就像这样： div@await Component.InvokeAsync("Primitive")/divdiv@await Comp

例如,我有这个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>

希望能帮助到你

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!