Изменение MVC Razor Img src с javascript

Question

Это приложение MVC. У меня есть IEnumberable (Of T) viewmodel, который передается в частичный вид. Будет следующий и предыдущий. изображение в нижней части страницы. Идея проста. Когда пользователь нажимает кнопку «Далее», он показывает следующее изображение и когда он нажимает на prev. кнопка показывает предыдущее изображение. Для этого я начал работать над приведенным ниже 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 просто В.Б локальной переменной в окне, который получает набор, когда с увеличивается. Чтобы я мог получить элемент модели по индексу.

Любые предложения? Я на правильном пути? Или это полный провал попытки того, что я хочу?

Answer 1

Решения этой проблемы заключается в первую построить все изображения на странице с 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> 

Делая это таким образом, ваш частичный вид не нуждается в перезагрузке.

Answer 2

Было бы лучше иметь скрытое полевое управление для хранения и получения значения индекса вместо локальной переменной 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> 

Надеется, что это поможет ...