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

Question

我的整个网站是一个 Ajax 网站，所以我的所有视图（除了布局）都可以正常加载或通过 ajax 操作链接加载。如果我将 Javascipt 文件与部分视图放在一起，那么所有代码都会按预期工作，但脚本会被多次加载（因此使用户下载更多脚本，但由于某种原因它们都不会被缓存）。

如果我将脚本文件放在我的布局中，那么它们只会加载一次，但如果加载了局部视图，那么该局部视图的 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() { .... }

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

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

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

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

ASP.NET MVC Loading scripts in partial views

ajax

asp.net-mvc

partial-views