Question

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

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

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

问题是我觉得上面的代码有点hacky，如果我有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>
    }            
}

Answer 2

你可以通过以下方式使这个稍微清洁：

<table>
<tr>
@foreach (var car in Model.Cars) {
    <td>@car.Name</td>

    <!-- If we've output a fifth cell, break to a new row -->
    if (++counter % 5 == 4)
    {
        </tr><tr>
    }
}
</tr>
</table>

然而，最好输出具有固定宽度的块级元素并将它们向左浮动，就像这样（借用内联样式; - ））：

<div style="width: 300px;">
@foreach (var car in Model.Cars) {
    <div style="float: left; width: 55px;">@car.Name</div>
}
</div>

将集合呈现到每行“n”个条目的html表中最简洁的方法是什么

2 个答案: