javascript - 使用 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 作为字符串的一部分，而不是变量的值.

<小时/>

棘手的部分

Razor 不会让我们像通常那样简单地连接变量，例如:

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

因为我们在服务器端 @ 中包含单引号，C# 会告诉您文字溢出。

<小时/>

解决方案

相反，我们需要从 ViewBag.images 数组中填充一个普通的 JavaScript 数组。

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