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局部視圖中不起作用

回答

相關問題