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

Posted 2023-02-22

【中文标题】防止在 Asp.Net Core ViewComponents 中加载多个 JavaScript 脚本

【英文标题】：Preventing multiple JavaScript scripts loading in Asp.Net Core ViewComponents

【发布时间】：2016-12-21 14:41:42

【问题描述】：

例如，我有这个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 函数，如何防止它们被多次包含，以及将它们存储在哪里？

【参考方案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 中保留一个布尔值。

【参考方案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>

希望对你有帮助

【讨论】：

$.getScript( "/js/scripts.js" )可能是我的 Web 应用程序中的潜在安全漏洞吗？如果是，我们如何保护它？