如何防止部分视图中的脚本多次加载并在同一页面中多次使用部分视图时导致错误

Question

在 ASP.NET MVC 中工作，我创建了一个在同一页面上呈现 2 次的局部视图。我的问题是 JavaScript 被包含的次数与部分视图 一样多，并且 JavaScript 不喜欢类被重新定义。

我的问题是：如何在部分视图中包含 JavaScript 以使其保持模块化，但只在页面中包含一次？我对需要将 .js 文件与部分视图的内容分开的解决方案不感兴趣，例如

<script src="some.js"></script>
@Html.Partial("some/partial.cshtml")
@Html.Partial("some/partial.cshtml")

但我可以接受包含在局部视图中的单独的 .js 文件。部分视图应包含使其工作所需的一切。

我的代码结构如下：

<div id=@ViewBag.id></div>
<script>
    class MyClass{ 
        constructor(divName){
            this._divId = divId;
        }

        doSomething(){
            /* do stuff with element that has id of divId */ 
        }
    }
</script>

然后，在调用文件中，我有

<body>
    @Html.Partial("/Views/MyPartial.cshtml", new ViewDataDictionary() { { "id", "id_1"} })
    @Html.Partial("/Views/MyPartial.cshtml", new ViewDataDictionary() { { "id", "id_2"} })
</body>
<script>
    $().ready(function(){
        id1Functionality = new MyClass("id_1"); // please forgive the poor naming :-)
        id2Functionality = new MyClass("id_2");

        id1Functionality.doSomething();
        id2Functionality.doSomething();
    })
</script>

Answer 1

一个解决方案是实现一个 Html 辅助扩展函数，它只会加载一个脚本一次。见下文。（这也适用于 CSS 和其他包含的文件）。

为 HtmlHelper class 和私人支持 class 作为每个 HttpContext 的单例实施扩展。

public static class YourHtmlHelperExtensionClass 
{
    private class TagSrcAttrTracker
    {
        private TagSrcAttrTracker() { }

        public Dictionary<string, string> sources { get; } = new Dictionary<string, string>();

        public static TagSrcAttrTrackerInstance {
            get {
                IDictionary items = HttpContext.Current.Items;
                const string instanceName = "YourClassInstanceNameMakeSureItIsUniqueInThisDictionary";

                if(!items.Contains(instanceName)) 
                    items[instanceName] = new TagSrcAttrTracker();

                return items[instanceName] as TagSrcAttrTracker;
            }
        }
    }

    public static MvcHtmlString IncludeScriptOnlyOnce(this HtmlHelper helper, string urlOfScript) 
    {
        if(TagSrcAttrTracker.Instance.sources.ContainsKey(urlOfScript))
            return null;

        TagSrcAttrTracker.Instance.sources[urlOfScript] = urlOfScript;

        TagBuilder script = new TagBuilder("script");
        scriptTag.MergeAttribute("src", urlOfScript);

        return MvcHtmlString.Create(script.ToString());
    }
}

然后，将 JavaScript 和其他代码分开到单独的文件中。

.js 文件内容示例

class MyClass{
    myFunction() {
        constructor(divId){
            this._divId = divId
        }

        doSomething() {
            // do something with a div with id == divId
        }
    }
}

部分视图的示例 .cshtml 文件内容

<link rel="stylesheet" type="text/css" href="~/Content/CustomCSS/MyPartialView.css"/>

<div id="@ViewBag.id">
    Some content!  Yay!
</div>

@Html.IncludeScriptOnlyOnce("/Scripts/CustomScripts/MyPartialView.js")

使用局部视图的示例 .cshtml 文件

...
<body>
    <h1>Here is some content!</h1>
    @Html.Partial("/Views/MyPartial.cshtml", new ViewDataDictionary() { { "id", "id_1"} })
    @Html.Partial("/Views/MyPartial.cshtml", new ViewDataDictionary() { { "id", "id_2"} })
    @Html.Partial("/Views/MyPartial.cshtml", new ViewDataDictionary() { { "id", "id_3"} })
</body>
<script>
$().ready(
    const id1Functionality = new MyClass("id_1") // forgive the poor naming :-)
    const id2Functionality = new MyClass("id_3")
    const id3Functionality = new MyClass("id_2")

    id1Functionality.doSomething();
    id2Functionality.doSomething();
    id3Functionality.doSomething();
)
</script>

局部视图可能被多次包含，JavaScript与局部视图打包在一起，但是.js文件只包含在页面中一次，因此浏览器不会抱怨MyClass被声明了不止一次。

如何防止部分视图中的脚本多次加载并在同一页面中多次使用部分视图时导致错误

How to keep script in partial view from loading more than once and causing errors when partial is used more than once in the same page

javascript

c#

razor

asp.net-mvc-5