Каков самый чистый способ рендеринга коллекции в html-таблицу с числом записей n в строке?

Question

У меня есть сайт asp.net-mvc. В моей модели представления у меня есть коллекция автомобилей, которые я хочу отобразить в 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> s в последнем ряду или отрезать их (опять же еще более хакерский код)?

Я хотел посмотреть, есть ли в 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>