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

Question

整个网站都是一个Ajax网站，因此我的视图（除了Layout）可以通过标准方式加载或通过ajax actionlink加载。如果我将Javascipt文件与部分视图放在一起，那么所有代码都将按预期工作，但脚本会被多次加载（因此使用户下载更多脚本，所有这些脚本都没有被缓存）。

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

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

Index视图：

<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>

如果脚本在局部视图中，您会看到它们被多次加载：

- Martin Dawson

---

不要在部分视图中放置脚本。如果您在页面呈现后动态加载部分，则需要使用事件委托（使用.on()处理部分中的元素事件）。 - user3559349

你是什么意思说“影响局部视图”？ - Balde

@StephenMuecke 我不能使用 .on()。我正在我的视图中使用dropzone插件，并且它在加载时就会绑定。我需要另一种方法。 - Martin Dawson

正如我在之前的评论中指出的那样，在成功回调函数中，当你将局部视图添加到DOM中后，请再附加插件。您还没有显示任何关于局部视图的内容，但它应该像这样：$(someElementYouJustAdded).dropzone({ .... });。 - user3559349

只需确保不要重新连接插件到现有元素上 - 例如，如果元素具有 class="dropzone"，则使用 $('.dropone:last').dropzone();。 - user3559349

Answer 1

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

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

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

即使在DOM初始加载后添加，也会处理作为container的子元素添加的具有class="someclass"的元素的点击事件。

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

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

- user3559349