在 For each 循环中应用不同的 DIV

Question

我正在使用 MVC 5。使用 WEB API，获取数据，现在是时候应用 HTML PAGE 设计和 CSS.

@foreach (var item in Model)
{
  if (Model.First() == item)
  {
        ///APPLY FIRST RECORD CSS:- Works FINE
  }
  else {
        <div class="row">
           <div class="col-sm-4">
           </div>
        </div>  
  }
}

在else部分，每次为SINGLE记录生成新的ROW。但我有兴趣在 SECOND ROW 中显示 record 2 3 4。 5 6 7 记录在第三行 等等。

Answer 1

如果是第一个物品，开一个div然后把物品放进去。当列数为 3 时关闭 div，如果项目位于列表末尾则关闭 div。

以下算法为您完成此操作

@{
    int i = 0;
    int columnCounter = 1;
    bool newRow = false;
}
@foreach (var item in Model)
{
    //add and open div row
    if (i == 0 || newRow)
    {
        newRow = false;
        @:<div class="row" style="border:2px solid red;">
    }
    <div class="col-md-4" style="padding:0;">
        <div style="height:40px;background:#f6f6f6;width:100%;text-align:center;">
             <span>Column @i</span>
        </div>
    </div>

    //close div row if column count == 3 or reach of end list
    if (columnCounter == 3 || i == Model.Count - 1)
    {
        newRow = true;
        columnCounter = 1;
        @:</div>
    }
    else
    {
        columnCounter = columnCounter + 1;
    }
}

结果：

在 For each 循环中应用不同的 DIV

Apply different DIV in For each loop

model-view-controller

asp.net-mvc-5