使用javascript更改MVC Razor Img src

这是一个MVC应用程序。我有一个IEnumberable（Of T）viewmodel，它被传递到局部视图。将有下一个和上一个。页面下部的图像按钮。这个想法很简单。当用户单击“下一步”按钮时，会显示下一个图像，当用户单击上一个按钮时，会显示下一个图像。按钮，显示上一个图像。我已经开始使用下面的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))')

         }
}

var c=0；
函数PreviousImage（）{
c-=1；
如果（！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递增时设置。这样我就可以通过索引得到模型项

---

有什么建议吗？我走对了吗？或者这是我所追求的尝试的彻底失败？

最好使用隐藏字段控件来存储和检索索引值，而不是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>

var hiddenfld=document.getElementById（“m”）；
var c=隐藏的价值；
函数上一个图像（）{
c-=1；
如果（！c<0）{
hiddenfld.value=c
document.getElementById（“photoBox”）.src=（'@Url.Content（String.Format（“~/PropertyImages/{0}/{1}”，Model（c）.PropertyImageFolder，Model（c）.PhotoName）））
}

---

希望这将有助于…

解决方案是首先在页面上构建所有图像，将

显示样式设置为
无
，然后通过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>


@对于i，整数=0到Model.Count-1
Dim y作为String=String.Format（“图像{0}”，i）
@
下一个
var c=0；
//var-currImage=0；
var ImageCount=（'@Model.Count'）；
函数ImageNext（）{
c+=1；
如果（c=0）{
对于（i=0；i

通过这种方式，您的局部视图不需要重新加载。
对于不包含太多索引的模型，hiddenfield似乎是个不错的主意。您可以尝试传递单个图像对象，而不是传递Ienumerable列表。下一个和上一个按钮需要移到局部视图之外。在每个单击可以通过传递Ienumerable列表的ImageItem来重新加载局部视图。