Question

我正在开发MVC 5应用程序，其中我想以2秒的时间间隔显示所有相关图像。图像路径存储在数据库中。我知道我可以使用 setInterval javascript函数。我能够遍历前两个图像（索引是硬编码的），但是想要逐个显示所有图像

以下是我的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中使用它

在脚本中添加此逻辑

   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

请注意，图像路径在服务器端（在ViewModel中）可用，但在客户端进行切换（使用setInterval）。现在你有（至少）两个选项：

1）将整个列表保存在JavaScript数组中，setInterval()回调将简单地遍历它。

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

关于C＃数组到JavaScript数组的一个注意事项：不要使用（即使它被广泛鼓励，也在Stack Overflow上）Json.Encode()。 JavaScript和JSON的转义规则是不同的，有一个小的交集，但有效的JSON字符串可能不是有效的JavaScript字符串。例如， / 可以在JSON中转义为\/，但在JavaScript中，它是无效的转义序列（即使大多数浏览器接受它）。考虑一下：http://www.example.com/images/01.png，Json.Encode()实际上做什么并不重要，它可能会改变其行为仍然尊重其接口（将对象编码为有效的JSON字符串......）

2）不要在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
    }
}

MVC 5中的图像滑块

2 个答案: