在for循环中使用for循环生成包含内容的行

Question

我正在尝试生成如下所示的视图

行数是在我的服务器端代码中预先确定的。我目前正在努力访问列表中项目的数据。

<div class = "row">
 <div class = "col-12" >
 @for(int i = 1; i <= Model.RowCount; i++) {
  <div class = "row" >
   @for(int j = 0; j < Model.List.Count; j++) {
    <div class = "col-3 p-3 mb-4 ml-4 bg-dark text-white rounded">
     <b > @Model.List[j].Value < /b> 
     </div>
   } 
   </div>
 } 
  </div>
</div>

我要尝试做的就是将列表分为三部分，每行生成三项。在一行中填充了内容之后，它应该继续到下一行并继续生成内容，而不会丢失对其访问的最后一项的跟踪。

例如：服务器生成了第1行的最后一项，然后移至第2行。这意味着第1行的最后一项是list [2]。现在，下一行的第一项应该是list [3]。

感谢您的帮助！

Answer 1

<div class = "row">
 <div class = "col-12" >
 @var index = 0;
 @for(int i = 1; i <= Model.RowCount; i++) {
  <div class = "row" >
   @for(int j = 0; j < Model.List.Count; j++) {
    index++;
    <div class = "col-3 p-3 mb-4 ml-4 bg-dark text-white rounded">
     <b > @Model.List[index].Value < /b> 
     </div>
   } 
   </div>
 } 
  </div>
</div>

或

<div class = "row">
 <div class = "col-12" >
 @for(int i = 1; i <= Model.RowCount; i++) {
  <div class = "row" >
   @for(int j = 0; j < Model.List.Count; j++) {
    var index = Model.List.Count * (i-1) + j;
    <div class = "col-3 p-3 mb-4 ml-4 bg-dark text-white rounded">
     <b > @Model.List[index].Value < /b> 
     </div>
   } 
   </div>
 } 
  </div>
</div>