javascript - 无法在 JavaScript 中迭代列表

Question

    <script type="text/javascript">
        window.onload = function () {
            for (var i=0;i<@Model.listsinfo.Count;i++)
            {
                $('#work').append($('<div class="col-md-3" id="temp"><label for="text1">'+ '@Model.listsinfo[i].Label' +'</label></div><div class="col-md-3"> <input type="text" placeholder="Alerts" class="form-control" id="text1"> </div>'));
            }
       }
   </script>

在上面的代码中，我从 Controller 传递一个列表并尝试迭代它。但是 @Model.listsinfo[i].Label 不起作用，并且错误表明“i”在当前上下文中不存在。我可以通过提供索引值 @Model.listsinfo[0].Label 来访问列表值，但迭代不起作用。如有任何帮助，我们将不胜感激。

Answer 1

您可以将 Json.Encode 与 Html.Raw 一起使用，并将其分配给 JavaScript 数组，然后从那里迭代内容:

<script type="text/javascript">
    window.onload = function () {
            var array = @Html.Raw(Json.Encode(@Model.listsinfo));

            for (var i = 0; i < array.length; i++)
            {
                $('#work').append($('<div class="col-md-3" id="temp"><label for="text1">'+ array[i].Label +'</label></div><div class="col-md-3"> <input type="text" placeholder="Alerts" class="form-control" id="text1"> </div>'));
            }
    }
</script>

注意，Model.listinfo在服务器端处理，迭代发生在客户端，所以需要先将viewmodel数组转换为JS数组，然后将其分配给append 方法。

类似问题:

MVC: Iterating a Viewbag array in javascript

jQuery: How to traverse / Iterate over a list of object