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>

在上面的代码中，我从控制器传递一个列表并尝试迭代它。但 @ 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

无法在javascript中迭代列表

1 个答案: