[英]Partial View Works with JQuery Partially, But Not Completely C# ASP.Net MVC 5
This is an ASP.Net MVC 5
Project. 这是一个
ASP.Net MVC 5
项目。
I have a simple jQuery
to fade in and fade out HTML
elements on mouse hovering as shown: 我有一个简单的
jQuery
可以在鼠标悬停时淡入和淡出HTML
元素,如下所示:
@Scripts.Render("~/bundles/jquery")
<script>
$('.entrisButton').hover(function ()
{ $(this).fadeTo(1, 1); },
function ()
{ $(this).fadeTo(1, 0.1); }
);
</script>
Used in the following partial MyPartialView.cshtml
View
(the jQuery
script is in the same MyPartialView.cshtml
file): 在以下部分
MyPartialView.cshtml
View
( 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>
And here is the effect of the jQuery
: 这是
jQuery
的效果:
Which is OK... however, the partial MyPartialView.cshtml
above is called multiple times in another cshtml
file like this: 可以...但是,上面的部分
MyPartialView.cshtml
在另一个cshtml
文件中多次调用,如下所示:
@if (Model != null) {
<hr/>
if (Model.Any()) {
foreach (var item in Model) { //do something foreach item
@Html.Partial("MyPartialView", item);
}
}
}
Resulting in a page rendered like this: 结果页面呈现如下:
As you can see, there are three different results for letter "a" (one MyPartialView.cshtml
is rendered per result) and each of them have the three glyphicons right beside the query results - faded out. 如您所见,字母“ a”有三个不同的结果(每个结果呈现一个
MyPartialView.cshtml
),并且每个查询结果旁边都有三个字形-淡出了。
Now, the first two "a" show expected behavior when the mouse is hover over: 现在,前两个“ a”显示鼠标悬停时的预期行为:
OK 好
But the last "a" does not show the expected behavior, the fade-in fade-out does not work though the mouse has hovered over it: 但是最后一个“ a”未显示预期的行为,尽管鼠标悬停在其上,但淡入淡出功能不起作用:
NOT OK 不好
I notice the problem occurs, whenever the above query result (in this case is the second "a") has the ordered list (as in 1, 2, 3 above), then the below MyPartialView.cshtml
does not show the desired behavior. 我注意到,每当上面的查询结果(在这种情况下是第二个“ a”)具有有序列表(如上面的1、2、3)时,就会发生问题,则下面的
MyPartialView.cshtml
不会显示所需的行为。 As you notice in my example, the first "a" does not have ordered list - so the fade-in and out works. 您在我的示例中注意到,第一个“ a”没有排序列表-因此淡入和淡出有效。 The second "a" has an ordered list - the fade-in and out also works.
第二个“ a” 具有有序列表-淡入和淡出也有效。 But the third "a" is after the query result with an ordered list - it doesn't work.
但是第三个“ a”是在查询结果后的有序列表-它不起作用 。
The behavior is consistent when the query result is, let say, only two and the first one has the ordered list, then the fade-in and out in the second one does not show up. 当查询结果为仅两个且第一个具有排序列表时,行为是一致的,然后第二个中的淡入和淡出不显示。
Hence, I suspect the problem with the ordered list, but I cannot figure out why. 因此,我怀疑有序列表存在问题,但我不知道为什么。 Here is my
MyPartialView.cshtml
: 这是我的
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>
}
What could go wrong here? 这里可能出什么问题?
That is why your JavaScript code runs before
your Html Dom
was loaded. 这就是为什么您的JavaScript代码
before
加载Html Dom
before
运行的原因。 In order to avoid such behavior you need to enclose your javascript code inside $(document).ready(function(){ yourCodeHere })
or inside $(function(){ yourCodeHere }
(shorthand version). You can check the documentation here: https://learn.jquery.com/using-jquery-core/document-ready/ 为了避免这种行为,您需要将javascript代码放在
$(document).ready(function(){ yourCodeHere })
或$(function(){ yourCodeHere }
(简写版本)内。您可以检查文档此处: https : //learn.jquery.com/using-jquery-core/document-ready/
So your code needs a minor change: 因此,您的代码需要稍作更改:
$(function(){
$('.entrisButton').hover(function ()
{ $(this).fadeTo(1, 1); },
function ()
{ $(this).fadeTo(1, 0.1);
});
});
Since you are placing your hover script in MyPartialView.cshtml
, it will bind the hover event to the elements multiple times when you call the partial method multiple time if you just wrap the code in $(function(){...}
. 由于您将悬停脚本放置在
MyPartialView.cshtml
,因此,如果只是将代码包装在$(function(){...}
则多次调用局部方法时,它将悬停事件多次绑定到元素。
Check this jsFiddle Demo . 检查此jsFiddle演示 。 You can see in console that when the mouse hovers over the div in console two lines are printed because two events are fired.
您可以在控制台中看到,当鼠标悬停在控制台中的div上时,会打印两行,因为会触发两个事件。
You should move the hover script outside of the MyPartialView.cshtml
, or check before binding the hover event. 您应该将悬停脚本移至
MyPartialView.cshtml
之外,或者在绑定悬停事件之前进行检查。 Check this SO Answer or check this updated jsfiddle Demo (notice that here2
is not printed in the console) 检查此SO Answer或检查此更新的jsfiddle演示 (注意,
here2
中未打印here2
)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.