ASP.NET MVC在部分视图中加载脚本

Question

我的整个网站都是一个Ajax网站，所以我的所有观点（除了布局）都可以正常加载或通过ajax actionlink加载。 如果我将Javascipt文件放入部分视图中，那么所有代码​​都按预期工作，但脚本会多次加载（从而使用户下载更多脚本，所有这些脚本都不会因某种原因被缓存）。

如果我将脚本文件放在我的Layout中，那么它们只会加载一次，但是如果部分视图被加载，那么该部分视图的JS代码显然不起作用，因为脚本已经加载了部分视图没有呈现。

我的问题是，如何让脚本只加载一次，但也会以某种方式影响部分视图？

索引视图：

<script src="/Scripts/Build/module.min.js"></script>
<script src="/Scripts/Build/upload-index.min.js"></script>

布局：

<li>
    @Ajax.ActionLink("Upload", "Index", "Upload", new {Area = "Music"}, new AjaxOptions {HttpMethod = "GET", UpdateTargetId = "body-wrapper", InsertionMode = InsertionMode.Replace, OnSuccess = "updateHistory", AllowCache = true }, new {@class = "nav-link"})
</li>

如果脚本位于局部视图中，您可以看到多次加载的脚本：

Answer 1

脚本不应该是部分视图，只能是主视图或其布局。您不仅有自己确定的重复问题，而且还可能导致其他问题，例如使现有脚本无效。

如果您需要处理与动态添加的项目相关联的事件，请使用.on()函数使用事件委派。例如

$.(container).on('click', '.someclass', function() { .... }

将处理class="someclass"元素的click事件，这些元素已添加为container的子元素，即使它们是在最初加载DOM之后添加的。

如果您需要将插件附加到动态添加的元素，则在将元素添加到DOM后附加它，例如

$.get(url, function(html) {
    $(container).append(html); // append the partial view
    $(container).find('someclass:last')..dropzone({ .... }); // attach plugin
});