Question

这是一个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递增时会被设置。这样我就可以通过索引获取模型项。

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

Answer 1

最好有一个隐藏的字段控件来存储和检索索引值而不是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>

希望这会有所帮助......

Answer 2

解决方法是首先在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>

通过这种方式，您的部分视图不需要重新加载。

使用javascript更改MVC Razor Img src

2 个答案: