html - 将集合呈现为每行条目数为 "n"的 html 表的最干净方法是什么

Question

我有一个 asp.net-mvc 网站。在我的 View 模型中，我有一组要显示在 HTML 表格上的汽车。

我想每行显示 5 辆车，所以我开始了这样的事情:

<table>
  @foreach (var car in Model.Cars) {
    if (counter == 0) {
      <tr>
    }
    <td>@car.Name</td>
    counter++;
    if (counter == 5) {
      </tr>
    }
  }
</table>

问题是我觉得上面的代码有点老套，而且如果我有 7 辆车，我应该把 3 个空白 <td>是在最后一行还是把它剪掉(又是更 hacky 的代码)？

我想看看在 asp.net-mvc 中是否有更简洁的方法来显示表中的集合，并在表中连续显示特定数量的条目。

Answer 1

如果你想坚持使用表格，这对我来说看起来最简单

@{
    var colSize = 5;
    var rows = (int)(Model.Cars.Count() / colSize);
}

<table>
@for (var row = 0; row <= rows ; row++){
    <tr>
    @foreach(var car in Model.Cars.Skip(row * colSize).Take(colSize))
    {
        <td>@car.Name</td>
    }
    </tr>
}
</table>

如果你想用<td>填写最后一行元素，你可以把它放在 <tr> 前面:

@if (row == rows)
{
    for(var i=0;i<colSize -( Model.Cars.Count() % colSize); i++){
        <td></td>
    }            
}