在每个循环中应用不同的 DIV答案

【问题标题】：Apply different DIV in For each loop在每个循环中应用不同的 DIV
【发布时间】：2021-09-26 00:07:44
【问题描述】：

我正在开发 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 记录在第三行，依此类推。

【问题讨论】：

标签： model-view-controller asp.net-mvc-5

【解决方案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;
    }
}

结果：

【讨论】：

当我在空白控制器中使用时它工作正常，但这里我的数据是从 API 获取的。我收到错误“运算符”不能应用于“方法组”和“int”类型的操作数`