jQuery功能在MVC局部视图中不起作用

我的局部视图中的.hide函数最初不是为第二个和第三个人渲染，那么延迟.hide和.fadein也不起作用。我是js和jquery的新手，所以我可能会错过某些明显的东西......为什么这个js脚本不能在局部视图中工作？jQuery功能在MVC局部视图中不起作用

当它全部在主视图中时一切正常，但我需要局部视图的原因是因为我不想每15秒重新加载整个页面。我已经做了一些研究，并且可能有错误的获取html数据类型？

主视图：

@model IEnumerable<project.Models.MyList> 

<div id="scrolllist"> 
    @Html.Partial("_ScrollList") 
</div> 

@section Scripts{ 
<script> 
function loadScrollListPV() { 
    $.ajax({ 
    url: "@Url.Action("ScrollList")", 
    type: 'GET', // <-- make a async request by GET 
    dataType: 'html', // <-- to expect an html response 
    success: function(result) { 
       $('#scrolllist').html(result); 
      } 
    }); 
} 
$(function() { 
    loadScrollListPV(); 
    // re-call the functions each 15 seconds 
    window.setInterval("loadScrollListPV()", 15000); 
}); 
</script> 
}

控制器动作：

public ActionResult ScrollList() 
    { 
     return PartialView("_ScrollList", db.MyList.ToList()); 
    }

管窥：

@model IEnumerable<project.Models.MyList> 


<div id="firstperson"> 
@*Get lastest record and display.*@ 
@foreach (var donor in Model.OrderByDescending(p => p.ProcessTime).Take(1)) 
{ 
} 
</div> 

<div id="secondperson"> 
@*Get second lastest record and display.*@ 
@foreach (var donor in Model.OrderByDescending(p => p.ProcessTime).Skip(1).Take(1)) 
{  
} 
</div> 

<div id="thirdperson"> 
@*Get third lastest record and display.*@ 
@foreach (var donor in Model.OrderByDescending(p => p.ProcessTime).Skip(2).Take(1)) 
{   
} 
</div> 

@section Scripts{ 
<script> 
$("#secondperson").hide(); 
$("#thirdperson").hide(); 
function person() { 
    $("#firstperson").delay(5000).hide(0, function() { 
     $("#secondperson").fadeIn(); 
     $("#secondperson").delay(5000).hide(0, function() { 
      $("#thirdperson").fadeIn(); 
      $("#thirdperson").delay(5000).hide(0, function() { 
       $("#firstperson").fadeIn(); 
       person(); 
      }); 
     }); 
    }); 
} 
</script> 
}

任何帮助将是真棒，在此先感谢！

来源

2017-09-14 Alex

你之所以使用的局部视图是有缺陷的。您的ajax成功处理程序仅替换'＃scrolllist'的内容，因此无论是否带有“部分视图”，都不会重新加载页面。另外，部分视图被渲染（插入）到html流中。就浏览器而言，标记没有区别。也许你正在将MVC的Partial View与WebForm的UpdatePanel混淆起来。 –

@adiga谢谢你！我已经实施并且效果很好。 – Alex

脚本永远不会偏执。 '@section Scripts {'在部分中不受支持 –

我不是100％确定在这里，但我认为根据这个answer在部分视图中渲染@script节可能会出现问题。有人提到，部分视图默认情况下不能使用@section元素。

试着在脚本部分去除剃刀语法，只需使用：

<script type="text/javascript"> 
    $("#secondperson").hide(); 
    $("#thirdperson").hide(); 
    function person() { 
    $("#firstperson").delay(5000).hide(0, function() { 
     $("#secondperson").fadeIn(); 
     $("#secondperson").delay(5000).hide(0, function() { 
     $("#thirdperson").fadeIn(); 
     $("#thirdperson").delay(5000).hide(0, function() { 
      $("#firstperson").fadeIn(); 
      person(); 
     }); 
    }); 
}); 
} 
</script>

来源

2017-09-14 19:00:06 MUlferts

因此，这用于隐藏这些div，但延迟.hide和.fadein仍然不起作用。是否有可能需要为功能人员提供document.ready标识符？ – Alex

我只是在想，你可以试着用$（function（）{}）来包装jquery。除此之外，你在哪里调用命名函数“person”？ – MUlferts

添加$（document）.ready（在函数完成之前并在工作结束时完成）。这节省了我的一天，谢谢！ – Alex

您不能在局部视图内调用某个节。您可以将其作为Layout = null的操作进行调用;达到类似的结果。

来源

2017-09-14 18:58:03

1）拆下@section Scripts{，你的代码将工作。

2）你应该避免的hide()和fadeIn()回调地狱。如果有10 divs，则必须添加10层该代码。下面的方法可以在局部视图中使用任意数量的divs：

您可以为您的div分配一个class。使默认情况下只显示第一个div。创建一个将每5秒调用一次的函数。

<div class="content-div">first content</div> 
<div class="content-div" style="display:none">second content</div> 
<div class="content-div" style="display:none">third content</div> 

<script> 
    partialIntervalRef = setInterval(incremental, 5000); 

    // gets the currently visible div. Hides it. 
    // If this is last content `div`, shows the first div, else shows the next div 
    function incremental() { 
     $visible = $(".content-div:visible"); 
     $visible.hide(); 

     $visible.next().is('.content-div') 
      ? $visible.next().fadeIn() 
      : $(".content-div").first().fadeIn(); 
    } 
</script>

这partialIntervalRef变量将在global范围（主视图）来定义。每次在加载你的部分视图之前，你应该清除它。

<script> 
    var partialIntervalRef; 

    function loadScrollListPV() { 
     clearInterval(partialIntervalRef); 
     ----- 
     ---- 
     }

这比使用回调更清洁和可扩展。这里有一个FIDDLE如果你想测试一下

3）window.setInterval("loadScrollListPV()", 15000)应改为window.setInterval(loadScrollListPV, 15000)

来源

2017-09-14 19:44:28 adiga

jQuery功能在MVC局部视图中不起作用

回答

相关问题