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>

@ Html.Action导致javascript加载多次

2 个答案: