@ Html.Action导致javascript多次加载

Question

我继承了一个应用程序，试图找出选项卡上的scripts加载不止一次的方式。

这是一个基本的引导选项卡功能，可加载部分视图。

<ul class="nav nav-tabs" id="myTab">
  <li class="active"><a data-target="#home" data-toggle="tab">Home</a></li>
  <li><a data-target="#reputation" data-toggle="tab">Reputation</a></li>
</ul>
<div class="tab-content">
  <div class="tab-pane active" id="home">
     @Html.Action("SocialConfig", "Admin", new {area = "Admin", accountID = ViewBag.AccountID})
  </div>
  <div class="tab-pane" id="reputation">
      @Html.Action("ReputationConfig", "Admin", new { area = "Admin", accountID = ViewBag.AccountID })
     </div>
</div>

每个局部视图中都包含一个JavaScript文件。 每个脚本的加载次数与@Html.Action一样多，因此，例如，我有2个@Html.Action因此， SocialConfig视图上的脚本将加载两次，而ReputationConfig上的脚本也将加载两次。

我该如何阻止这种愚蠢的行为。

Answer 1

使用partialview时，请避免加载脚本，而应在主视图中添加脚本。 为什么不只是在当前视图中添加它呢？

Answer 2

如果使用jQuery添加一些事件处理程序，则检查选择器是否正在过滤两个局部视图的元素。 如果是这样，您应该更改选择器，使其与上下文关联到局部视图。

例如：

局部视图1

<div>
    <button class="button" type="button">Click me</button>
</div>
<script>
     $(".button").click(function () { alert("click on button") });
</script>

局部视图2

<div>
    <a class="button">Click me</a>
</div>
<script>
     $(".button").click(function () { alert("click on link") });
</script>

上下文事件的示例：

局部视图1

<div id="my-partial-view-1-container">
    <button class="button" type="button">Click me</button>
</div>
<script>
     $("#my-partial-view-1-container").find(".button").click(function () { alert("click on button") });
</script>

局部视图2

<div id="my-partial-view-2-container">
    <a class="button">Click me</a>
</div>
<script>
     $("#my-partial-view-2-container").find(".button").click(function () { alert("click on link") });
</script>