用JavaScript更改MVC Razor Img src

Question

這是一個MVC應用程序。 我有一個IEnumberable（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>

通過這種方式，您的局部視圖不需要重新加載。