部分视图部分适用于 JQuery，但不完全适用于 C# ASP.Net MVC 5

Posted 2023-02-22

【中文标题】部分视图部分适用于 JQuery，但不完全适用于 C# ASP.Net MVC 5

【英文标题】：Partial View Works with JQuery Partially, But Not Completely C# ASP.Net MVC 5

【发布时间】：2016-12-23 07:31:29

【问题描述】：

这是一个ASP.Net MVC 5 项目。

我有一个简单的jQuery 在鼠标悬停时淡入淡出html 元素，如图所示：

@Scripts.Render("~/bundles/jquery")
<script>
  $('.entrisButton').hover(function ()
     $(this).fadeTo(1, 1); ,
    function ()
     $(this).fadeTo(1, 0.1); 
  );
</script>

用于以下部分MyPartialView.cshtmlView（jQuery 脚本在同一个MyPartialView.cshtml 文件中）：

<h2>
  @Html.Raw(Model.GetHeaderHtml())  
    <span class="entrisButton">
      <small>
        <span title="Add new entry" class="glyphicon glyphicon-plus-sign text-success"></span>
        <span title="Change this entry" class="glyphicon glyphicon-edit text-primary"></span>
        <span title="Delete this entry" class="glyphicon glyphicon-remove-circle text-danger"></span>
      </small>
    </span>
</h2>

这是jQuery的效果：

这没关系...但是，上面的部分MyPartialView.cshtml 在另一个cshtml 文件中被多次调用，如下所示：

@if (Model != null) 
  <hr/>
  if (Model.Any()) 
    foreach (var item in Model)  //do something foreach item
      @Html.Partial("MyPartialView", item);
    
  

导致页面呈现如下：

---

---

如您所见，字母“a”有三个不同的结果（每个结果呈现一个 MyPartialView.cshtml），每个结果旁边都有三个字形图标 - 已淡出。

现在，前两个“a”显示鼠标悬停时的预期行为：

好的

---

---

但最后一个“a”没有显示预期的行为，虽然鼠标悬停在它上面，但淡入淡出不起作用：

不行

---

---

我注意到问题发生了，只要上面的查询结果（在这种情况下是第二个“a”）有有序列表（如上面的 1、2、3），那么下面的MyPartialView.cshtml 不显示期望的行为。正如您在我的示例中注意到的那样，第一个“a”没有有序列表 - 因此淡入和淡出有效。第二个“a”有有序列表 - 淡入和淡出也可以。但是第三个“a”是在带有有序列表的查询结果之后 - 它不起作用。

当查询结果只有两个并且第一个具有有序列表时，行为是一致的，然后第二个中的淡入和淡出不显示。

因此，我怀疑有序列表有问题，但我不知道为什么。这是我的MyPartialView.cshtml：

@using MyProject.Models
@using System.Linq;
@model ResultPerPhrase

@Scripts.Render("~/bundles/jquery")
<script>
  $('.entrisButton').hover(function ()
     $(this).fadeTo(1, 1); ,
    function ()
     $(this).fadeTo(1, 0.1); 
  );
</script>

<h2>
  @Html.Raw(Model.GetHeaderHtml())  
    <span class="entrisButton">
      <small>
        <span title="Add new entry" class="glyphicon glyphicon-plus-sign text-success"></span>
        <span title="Change this entry" class="glyphicon glyphicon-edit text-primary"></span>
        <span title="Delete this entry" class="glyphicon glyphicon-remove-circle text-danger"></span>
      </small>
    </span>
</h2>

@if (Model.results.Count() > 1) 
  <ol>
    @foreach (var result in Model.results) 
      <li>@Html.Raw(result.ToString())
        <span class="entrisButton">
          <span title="Add new entry" class="glyphicon glyphicon-plus-sign text-success"></span>
          <span title="Change this entry" class="glyphicon glyphicon-edit text-primary"></span>
          <span title="Delete this entry" class="glyphicon glyphicon-remove-circle text-danger"></span>
        </span>
      </li>
    
  </ol>
 else 
  <ul style="list-style: none;" class="adjusted-par">
    @foreach (var result in Model.results) 
      <li>@Html.Raw(result.ToString())
        <span class="entrisButton">
          <small>
            <span title="Add new entry" class="glyphicon glyphicon-plus-sign text-success"></span>
            <span title="Change this entry" class="glyphicon glyphicon-edit text-primary"></span>
            <span title="Delete this entry" class="glyphicon glyphicon-remove-circle text-danger"></span>
          </small>
        </span>
      </li>
    
  </ul>

这里可能出了什么问题？

【问题讨论】：

也许你只需要把你的javascript代码放在$(document).ready(function() yourCodeHere )或者$(function() yourCodeHere )里面...两者是等价的。

你成功了！而已！非常感谢，朋友！ :D 但是为什么呢？

我要发布一个答案:)

【参考方案1】：

这就是为什么您的 JavaScript 代码运行 before 而您的 Html Dom 已加载。为了避免这种行为，您需要将您的 JavaScript 代码包含在 $(document).ready(f‌​unction() yourCodeHere ) 或 $(function() yourCodeHere （速记版本）内。你可以在这里查看文档：https://learn.jquery.com/using-jquery-core/document-ready/

所以您的代码需要稍作改动：

 $(function()
     $('.entrisButton').hover(function ()
          $(this).fadeTo(1, 1); ,
         function ()
          $(this).fadeTo(1, 0.1); 
     );
 );

【讨论】：

谢谢！而已！ ;)

【参考方案2】：

由于您将悬停脚本放在MyPartialView.cshtml 中，如果您只是将代码包装在$(function()... 中，那么当您多次调用部分方法时，它将多次将悬停事件绑定到元素。

检查此jsFiddle Demo。您可以在控制台中看到，当鼠标悬停在控制台中的 div 上时，会打印两行，因为触发了两个事件。

您应该将悬停脚本移到MyPartialView.cshtml 之外，或者在绑定悬停事件之前进行检查。检查此SO Answer 或检查此更新jsfiddle Demo（注意here2 未打印在控制台中）