Как создать строку для каждого третьего столбца в Razor mvc5?

Question

В настоящее время я пытаюсь добавить новую строку для каждого третьего столбца с помощью бритвы. Однако, с текущим кодом, только первые три столбца обернуты в строку, а остальные пропускаются. Я искал исправления, но ни один из них не работает с моим кодом. У кого-нибудь есть решение для этого?

@model IEnumerable<Byporten.createpost> 
 
@{ 
 
    ViewBag.Title = "Index"; 
 
    Layout = "~/Views/Shared/_LayoutClient.cshtml"; 
 
} 
 

 
<div class="container"> 
 

 
    @{ 
 
     var itemCount = 0; 
 
    } 
 

 
    @while (itemCount < 3) 
 
    { 
 
     foreach (var item in Model.Reverse().Take(9)) 
 
     { 
 
      if(itemCount == 0) 
 
      { 
 
       @:<div class="row"> 
 
      } 
 

 
      <div class="col-lg-4 col-md-6 col-sm-6"> 
 
       <div class="image-section"> 
 
        <img src="~/images/uploads/@Html.DisplayFor(modelItem => item.ImageURL)"/> 
 
       </div> 
 
       <div class="title-section"> 
 
        <h5><span class="fa fa-pencil"></span> @Html.DisplayFor(modelItem => item.Title)</h5> 
 
        @Html.ActionLink("Les mer", "viewArticle", new { id = item.Id }) 
 
       </div> 
 
      </div> 
 

 
      itemCount++; 
 

 
      if ((itemCount % 3) == 0) 
 
      { 
 
       @:</div> 
 
      } 
 

 
     } 
 
     
 
    } 
 
    @{itemCount = 0;} 
 
</div>

Answer 1

Это будет приводить к недопустимой разметки, поскольку itemCount == 0 будет верно только один раз. Заменить if (itemCount == 0) на if (itemCount % 3 == 0 || itemCount % 3 == 3).

Я также избавился бы от цикла while и сброса itemCount в нижней части.

Answer 2

Html.Raw() Используйте метод, чтобы избежать проблем при компиляции с условным закрывающим тегом, и переменным темпом insertRow, чтобы избежать повторений в состоянии строки:

<div class="container"> 

@{ 
    var itemCount = 0; 
} 

@{ 
    foreach (var item in Model.Reverse().Take(9)) 
    { 
     var insertRow = itemCount % 3 == 0; 

     if(insertRow) 
     { 
      @Html.Raw("<div class="row">") 
     } 

     <div class="col-lg-4 col-md-6 col-sm-6"> 
      <div class="image-section"> 
       <img src="~/images/uploads/@Html.DisplayFor(modelItem => item.ImageURL)"/> 
      </div> 
      <div class="title-section"> 
       <h5><span class="fa fa-pencil"></span> @Html.DisplayFor(modelItem => item.Title)</h5> 
       @Html.ActionLink("Les mer", "viewArticle", new { id = item.Id }) 
      </div> 
     </div> 

     if (insertRow) 
     { 
      @Html.Raw("</div>") 
     } 

     itemCount++; 
    } 
} 
</div> 

А также while (itemCount < 3) петель выглядят странно и ненужным для вашей задачи.

Answer 3

Итак, я знаю, что я немного опаздываю к игре, и есть принятый ответ, однако я хочу добавить свое исполнение, потому что он не требует дубликатов if операторов и не содержит скригалей компиляции кода.

Мой подход использует внутренний цикл на основе количества колонок вы хотите иметь, прежде чем создавать новую строку:

<table> 
     <thead> 
       <tr> 
        <td><b>My List Data:</b></td> 
       </tr> 
     </thead> 
     <tbody> 
       @{ 
        var items = Model.MyList; 
        const int colCount = 2; 
       } 
       @for (var i = 0; i < items.Count(); i += colCount) 
       { 
        <tr> 
         @for (var c = 0; c < colCount && i + c < items.Count(); c++) 
         { 
          <td>@(items[i + c].Display):</td> 
         } 
        </tr> 
       } 
     </tbody> 
</table> 

Предпосылка, чтобы определить, что ваш счетчик столбца, то есть показать выше, с использованием const int colCount =2;

Затем, цикл, используя цикл for, в вашем списке, но вместо того, чтобы увеличивать на 1, как обычно, увеличивать на colCount значение.

Затем, у вас есть тэг строки. Это означает, что строка будет создана каждый элемент n + colCount.

В этом теге строки есть еще один цикл цикла, который увеличивается на 1, пока вы не достигнете своего colCount ИЛИ вашего родительского итератора, плюс ваш итератор colCount не будет равен или превышает общие элементы в вашем списке.

Внутри этого цикла просто создайте ячейку с индексом i (внешний итератор) + c (colCount) итератор.

Это дает вам хорошую слева направо, сверху вниз структуру таблицы из плоского списка без дополнительных команд if и компиляции.

Answer 4

Ни один из них не работает для меня, но на следующий же:

@foreach (var item in Model.Items) 
{ 
    var itemCount = 0; 
    foreach (var listItem in ((ListViewModel)item).ListItemViewModel.Items) 
    { 
     if (itemCount == 0) 
     { 
      @:<div class="row"> 
     } 

     <div class="col-md-4"> 
      <a href="#" data-sf-role="toggleLink" class="organogram-title"><span class="organogram-outter-ring"></span>@listItem.Fields.Title</a> 
      <div style="display:none;" class="sf-list-content"> 
       @Html.Raw(listItem.Fields.Content) 
      </div> 
      <div class="organogram-outter-ring"></div> 
     </div> 

     if (itemCount == 2) 
     { 
      itemCount = 0; 
      @:</div> 
     } 
     else 
     { 
      itemCount++; 
     } 
    } 
}