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> 

上記のコードでは、私のコントローラからリストを渡してそれを反復しようとしています。しかし、@ Model.listsinfo [i] .Labelは機能していません。エラーは、現在のコンテキストに 'i'が存在しないことを示します。インデックス値@ Model.listsinfo [0] .Labelを付けてリストの値にアクセスできますが、反復は機能しません。どんな助けもありがとうございます。

Answer 1

あなたはHtml.RawでJson.Encodeを使用して、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