Image Slider in MVC 5

Question

Ich entwickle MVC 5 Anwendung, in der ich alle verwandten Bilder im Zeitintervall von 2 Sek. Anzeigen möchte. Der Bildpfad wird in der Datenbank gespeichert. Ich weiß, dass ich setInterval JavaScript-Funktion für die gleiche verwenden kann. Ich bin in der Lage, die ersten zwei Bilder (Index ist hart-codiert), aber alle Bilder nacheinander anzeigen zu müssen

Unten ist meine Jquery für das gleiche. Bitte lassen Sie mich wissen, wie ich Index dynamisch

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

     }, 2000); 

Answer 1

Sie müssen festlegen können eine Reihe von Bild-Links aus dem Modell erstellen zuerst und dann in dem eingestellten Intervall verwenden. benutze diese Logik.

Setzen Sie dies in Ihre Sicht.

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

Jetzt haben wir die Liste der imageLinks. diese lassen verwenden in JQuery

diese Logik in Ihrem Skript hinzufügen

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

Beachten Sie, dass Bildpfade auf Server-Seite zur Verfügung stehen (in Ihrem Viewmodel), aber Umschaltung wird auf Client-Seite (mit setInterval) hergestellt. Jetzt haben Sie (mindestens) zwei Optionen:

1) Speichern Sie die gesamte Liste in einem JavaScript-Array, setInterval() Callback wird dann einfach durchlaufen.

<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> 

Eine Anmerkung über C# Array JavaScript-Array: nicht verwenden (auch wenn es weit gefördert ist, auch hier auf Stack-Überlauf) Json.Encode(). Die Regeln zum Escaping für JavaScript und JSON unterscheiden sich, es gibt einen kleinen Schnittpunkt, aber eine gültige JSON-Zeichenfolge ist möglicherweise keine gültige JavaScript-Zeichenfolge. Beispiel: /kann in JSON als \/ maskiert werden, aber in JavaScript ist es eine ungültige Escape-Sequenz (auch wenn die meisten Browser es akzeptieren). Denkanstöße: http://www.example.com/images/01.png, spielt es keine Rolle, was Json.Encode() tatsächlich der Fall ist, kann es sein Verhalten ändern noch seine Schnittstelle zu respektieren (Codieren eines Objekts als gültige JSON-String ...)

2) nicht Bild-URLs in Ihrem Ansichtsmodell speichern , nur seine Länge. Client-seitiger JavaScript-Code fragt dann den Server ab (z. B.): http://www.example.com/images/1 und Ihre Controller-Methode löst das Bild von seiner ID auf und gibt es mit File() zurück oder schreibt es direkt in den Antwort-Stream.

<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> 

mit dieser Controller Methode:

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