MVCパーシャルビューでjQuery関数が動作しない

Question

パーシャルビューの.hide関数は、第2人と第3人のためにレンダリングされていないため、遅延.hideと.fadeinは動作しません。私はjsとjqueryを初めて使っているので、明らかに何かが欠落しています...なぜこのjsスクリプトが部分的なビューの中で動作しないのでしょうか？

すべてがメインビューにあるときに機能しますが、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> 
} 

すべてのヘルプは素晴らしいだろうと感謝！

Answer 1

ここでは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> 

Answer 2

部分ビュー内からセクションを呼び出すことはできません。 Layout = nullでアクションとして呼び出すことができます。同様の結果を達成する。

Answer 3

1）@section Scripts{を削除し、あなたのコードは動作します。

---

2）あなたはhide()とfadeIn()のコールバック地獄を避ける必要があります。 10 divsがある場合は、そのコードを10層追加する必要があります。以下のアプローチは、部分ビューでdivsをいくつでも使用できます。

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); 
     ----- 
     ---- 
     } 

これは、コールバックを使用するよりはるかにクリーンで拡張性があります。 は、ここでは、部分的なビューを使用するための

---

3）window.setInterval("loadScrollListPV()", 15000)がwindow.setInterval(loadScrollListPV, 15000)