Использование индексной переменной JavaScript для доступа к элементу массива ViewBag

Question

Я пытаюсь получить доступ к глобальной переменной javascript, чтобы передать ее как часть данных в мою функцию ajax. Борясь с тем, как это сделать, потому что imageIndex не существует в текущем контексте. Javascript:

<script type="text/javascript"> 
     var imageIndex = 0; 
     $(document).ready(function() { 
      var imageIndex = 0; 

      getImage(); 

      function getImage() { 
       $.ajax({ 
        type: "GET", 
        url: '@Url.Action("GetImage", "Tally")', 
        data: { imageName: '@(ViewBag.images[imageIndex])', contractID: '@(ViewBag.contractId)' }, 
        //dataType: "image/jpeg;base64", 
        success: function (data) { 
         console.log(data); 
         $('#scanImage').attr('src', 'data:image/jpeg;base64,' + data.myImage); 
         $("#imageName").val('@(ViewBag.image)'); 
         imageIndex++; 
        }, 
        error: function() { 
         console.log("got error"); 
        } 
       }); 
      } 
     }); 

    </script> 

Answer 1

Этот вопрос (ы)

1. Удалите один из ваших imageIndex инициализаций от вершины. Во всех смыслах и целях я бы сказал, что действительно не имеет значения, какой из них в вашем случае.

2.imageIndex включаются в качестве части imageNameв виде строки, а не значения переменных.

---

Хитрость

Бритва не позволит нам просто сцепить переменную, как мы обычно были бы делать что-то вроде:

imageName: '@(ViewBag.images[' + imageIndex + '])' 

Поскольку мы включаем апостроф на стороне сервера @, C# сообщит вам, что у вас есть переполненный литерал.

---

Решение

Вместо этого мы должны заполнить нормальный яваскрипт массива изViewBag.images массива.

var imageArray = @Html.Raw(Json.Encode(@ViewBag.images)); 
// var imageArray = ["image1", "image2", "image3"]; 

Оттуда, теперь мы можем использовать imageArray[imageIndex] для извлечения значения мы ищем.

$(document).ready(function() { 
    var imageIndex = 0; 

    //Convert our ViewBag.images into a JS array 
    var imageArray = @Html.Raw(Json.Encode(@ViewBag.images)); 
    getImage(); 

    function getImage() { 
     $.ajax({ 
      type: "GET", 
      url: '@Url.Action("GetImage", "Tally")', 
      data: { imageName: imageArray[imageIndex], contractID: '@(ViewBag.contractId)' }, 
      //dataType: "image/jpeg;base64", 
      success: function (data) { 
       console.log(data); 
       $('#scanImage').attr('src', 'data:image/jpeg;base64,' + data.myImage); 
       $("#imageName").val('@(ViewBag.image)'); 
       imageIndex++; 
      }, 
      error: function() { 
       console.log("got error"); 
      } 
     }); 
    } 
}); 

Answer 2

Хм, я думаю, вы получаете это неправильно здесь:

imageName: '@(ViewBag.images[imageIndex])' 

попробовать: imageName: '@(ViewBag.images[' + imageIndex + '])'

также, почему вы объявляя переменные дважды?

<script type="text/javascript"> 
     var imageIndex = 0; //this 
     $(document).ready(function() { 
      var imageIndex = 0; //and this? 
....