防止在 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 将被包含三次，这是没有必要的。

如何为 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 属性是否为真：

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

在您的组件 class 定义中，如果组件不是第一次调用，您应该设置 model.ScriptIncluded = True;。您可以在 HttpContext.Items.

中保留一个 bool 值

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

Preventing multiple JavaScript scripts loading in Asp.Net Core ViewComponents

javascript

c#

asp.net-core

asp.net-core-viewcomponent