0

这是一个 MVC 应用程序。我有一个传递给局部视图的 IEnumberable(Of T) 视图模型。会有下一个和上一个。页面下方的图像按钮。这个想法很简单。当用户单击下一个按钮时，它显示下一个图像，当他们单击上一个时。按钮它显示上一个图像。我已经开始研究下面的 javascript 来实现这一点。但是，由于我对 javascript 完全陌生，我觉得我在这里遗漏了一些东西。

<script type="text/javascript">
    var c = 0;
      function PreviousImage() {
         c -= 1;
         if (!c < 0) {
           ('@m')=c
           document.getElementById("photoBox").src = ('@Url.Content(String.Format("~/PropertyImages/{0}/{1}", Model(m).PropertyImageFolder, Model(m).PhotoName))')

         }
}

图像和按钮的 div 容器如下：

<div>
   <img src="" id="photoBox" />
   <input type="button" id="NextImage" value="Next Image" /><input type="button" id="PrevImage" value="Previous Image" onclick="PreviousImage()" />
</div>

m只是视图中的一个 vb 局部变量，当 c 递增时会被设置。这样我就可以通过索引获取模型项。

有什么建议么？我在正确的轨道上吗？或者这是我所追求的尝试完全失败？

4

2 回答 2

0

display style对此的解决方案是首先使用设置构建页面上的所有图像，none然后我通过 javascript 更改它。以下是我的解决方案。

<div>
  @For i As Integer = 0 To Model.Count - 1
    Dim y As String = String.Format("image{0}", i)
    @<div id="@y" style="display:none"><img src="@Url.Content(String.Format("~/PropertyImages/{0}/{1}", Model(i).PropertyImageFolder, Model(i).PhotoName))" height="200" width="200"/></div>
  Next
<div> <input type="button" id="NextImage" value="Next Image" onclick="ImageNext()" /><input type="button" id="PrevImage" value="Previous Image" onclick="ImagePrev()" /></div>
</div>



<script type="text/javascript">
  var c = 0;
  //var currImage = 0;
  var ImageCount = ('@Model.Count');
  function ImageNext() {
   c += 1;
    if (c <= ImageCount-1 && c >= 0) {
        for (i = 0; i < ImageCount; i++) {
            document.getElementById("image" + i).style.display = "none";
        }
        document.getElementById("image" + c).style.display = "block";
    } else {
        c = 0;
        for (i = 0; i < ImageCount; i++) {
            document.getElementById("image" + i).style.display = "none";
        }
        document.getElementById("image" + c).style.display = "block";

    }
 }
 function ImagePrev() {
    c -= 1;
    if (c <= ImageCount - 1 && c >= 0) {
        for (i = 0; i < ImageCount; i++) {
            document.getElementById("image" + i).style.display = "none";
        }
        document.getElementById("image" + c).style.display = "block";
    } else {
        c = ImageCount - 1;
        for (i = 0; i < ImageCount; i++) {
            document.getElementById("image" + i).style.display = "none";
        }
        document.getElementById("image" + c).style.display = "block";

    }
  }
</script>

通过这样做，您的局部视图不需要重新加载。

于 2013-09-12T02:08:36.747 回答
0

最好有一个隐藏字段控件来存储和检索索引值，而不是 vb 局部变量。

请参考以下代码：

<script type="text/javascript">
var hiddenfld=document.getElementById("m");
    var c = hiddenfld.value;
      Function Previous Image () {
         c -= 1;
         if (!c < 0) {
           hiddenfld.value=c
           document.getElementById("photoBox").src = ('@Url.Content(String.Format("~/PropertyImages/{0}/{1}", Model(c).PropertyImageFolder, Model(c).PhotoName))')

         }
</script>

希望这会有所帮助...

于 2013-09-11T23:25:05.913 回答