Using a JavaScript index variable to access a ViewBag array item

Question

I am trying to access a global javascript variable in order to pass it as part of the data to my ajax function. Struggling with how to do it because imageIndex does not exist in the current context. 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>

You have two imageIndex variables in your code, and actually both of them are in scope in your $.ajax call? — Bergi
– Bergi, Commented Feb 16, 2017 at 18:42
What is this @(…) syntax? I suspect you're mixing up client- and serverside processing here. — Bergi
– Bergi, Commented Feb 16, 2017 at 18:44
@Bergi ASP.Net MVC + Razor, it's legitimate. The issue is that it doesn't like concatenation so I'm not sure how to include a variable to access the ViewBag images array by index. — Tyler Roper
– Tyler Roper, Commented Feb 16, 2017 at 18:45
When I couldn't get the imageIndex to work initially, I tried adding a second declaration inside the document.ready to see if that would fix anything. That is why I had 2. — dmikester1
– dmikester1, Commented Feb 17, 2017 at 14:47

Tyler Roper · Accepted Answer · 2017-02-16 19:40:33Z

4

The Issue(s)

1. Remove one of your imageIndex initializations from the top. For all intents and purposes I'd say it really doesn't matter which one in your case.

2. imageIndex is being included as part of imageName as a string, rather than the variable's value.

The Tricky Part

Razor won't let us simply concatenate the variable as we normally would by doing something like:

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

Because we're including a single quote within the server-side @, C# will tell you that you have an overflowing literal.

The Solution

Instead, we'll need to populate a normal javascript array from the ViewBag.images array.

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

From there, we can now use imageArray[imageIndex] to retrieve the value we're looking for.

$(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");
            }
        });
    }
});

edited Feb 16, 2017 at 19:40

answered Feb 16, 2017 at 18:31

Tyler Roper

21.7k6 gold badges35 silver badges58 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

dmikester1 Over a year ago

I removed one. I now have '@(ViewBag.images['+imageIndex+'])' and am getting: Error 6 Too many characters in character literal

Tyler Roper Over a year ago

Hmm, this is most likely C# being upset that we're using a single quote. Let me take a deeper look into this, will be a bit more tricky than I originally thought.

Tyler Roper Over a year ago

@dmikester1 Please see my edit and let me know if this works.

dmikester1 Over a year ago

Perfect! Thank you much!

xGeo · Accepted Answer · 2017-02-16 18:36:38Z

0

Hmm, I think you are getting it wrong here:

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

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

also, why are you declaring variables twice?

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

answered Feb 16, 2017 at 18:36

xGeo

2,1492 gold badges20 silver badges47 bronze badges

Collectives™ on Stack Overflow

Using a JavaScript index variable to access a ViewBag array item

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related