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将被包含三次，这是不必要的。

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

Answer 1

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

希望有所帮助

Answer 2

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

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

在组件类定义中，如果第一次未调用组件，则应设置model.ScriptIncluded = True;。您可以在HttpContext.Items中保留bool值。

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

2 个答案: