MVC 5の画像スライダ

Question

私は2秒の時間間隔ですべての関連画像を表示したいMVC 5アプリケーションを開発中です。イメージパスはデータベースに格納されます。私は同じことのためにsetIntervalのjavascript機能を使用できることを知っています。私は最初の2つのイメージ（インデックスはハードコードされています）をループすることはできますが、すべてのイメージを1つずつ表示したいです。

以下は同じjqueryです。動的にインデックスを設定する方法を教えてください。

$(document).ready(function() { 
     var curImg = 0; 
     setInterval(function() { 
      var path = '@Model.lstImage[1].image_path' 
      $('#memImg').attr("src",path); 

     }, 2000); 

Answer 1

まず、モデルから画像リンクの配列を作成し、それを設定した間隔で使用する必要があります。このロジックを使用します。

これをあなたの視点に入れてください。

@{ 
    var imageLinks = @Model.lstImage.Select(x => x.image_path).ToList(); 
} 

ここでは、imageLinksのリストがあります。 jQueryの

での使用、これは画像のパスが（あなたのViewModelに）サーバー側でご利用いただけますが、切り替えは（setIntervalで）クライアント側で行われていることを、あなたのスクリプトで

var imageArray = @Html.Raw(Json.Encode(imageLinks)); // assign the c# variable data into jquery variable. 

    $(document).ready(function() { 
     var curImg = 0; 
     var index = 0; 
     setInterval(function() { 
      if(index > imageArray.length){ 
       index = 0; // set back index to zero when the last index is reached. 
      } 
      var path = imageArray[index]; 
      $('#memImg').attr("src",path); 
      index++; //increment the index for next image display. 
     }, 2000); 
    }); 

Answer 2

注このロジックを追加してみましょう。今では、少なくとも2つのオプションがあります：

1）JavaScript配列にリスト全体を保存すると、コールバックは単にループバックします。 JavaScriptの配列にC＃の配列について

<script type = "text/javascript"> 
    var currentImage = 0; 
    var images = @("[" + String.Join(",", Model.lstImage.Select(x => 
     String.Format("\"{0}\"", HttpUtility.JavaScriptStringEncode(x.image_path)) + "]"); 

    $(document).ready(function() { 
     setInterval(function() { 
      currentImage = (currentImage === images.length - 1) ? 0 : currentImage + 1; 
      document.getElementById("memImg").src = images[currentImage]; 
     }, 2000); 
    }); 
</script> 

ワンノート：Json.Encode()（それは広くもここでスタックオーバーフロー上、奨励いても）は使用しないでください。 JavaScriptとJSONのエスケープルールは異なりますが、小さな交差点がありますが、有効なJSON文字列は有効なJavaScript文字列ではありません。例えば/は\/としてJSONにエスケープすることができるが、JavaScriptでそれが無効なエスケープシーケンス（ほとんどのブラウザがそれを受け入れる場合でも）です。

2に

（...有効なJSON文字列としてオブジェクトをコードしている）、それが実際に何をするか Json.Encode()重要ではありません、それはまだそのインタフェースを尊重し、その動作を変更することができ、 http://www.example.com/images/01.png）あなたのViewModelに画像のURLを保存しないでください。考えてみて、ちょうどその長さ。クライアント側のJavaScriptコードは、たとえば http://www.example.com/images/1を使用してサーバーにクエリを実行し、コントローラメソッドはIDからイメージを解決し、 File()で返します。または応答ストリームに直接書き込みます。この制御方法によれ

<script type = "text/javascript"> 
    var currentImage = 0, imageCount = @Model.lstImage.Count; 

    $(document).ready(function() { 
     setInterval(function() { 
      currentImage = (currentImage === imageCount - 1) ? 0 : currentImage + 1; 
      document.getElementById("memImg").src = 
       @Url.Action("Read", "Images") + "?id=" + currentImage; 
     }, 2000); 
    }); 
</script> 

：

public class ImagesController : Controller { 
    public ActionResult Read(int id) { 
     return ... // your code here 
    } 
}