MVC Razor視圖 - 用foreach循環構造包裝行每n項

Question

我有了在這樣的一個Razor視圖：

@foreach (var item in Model.Items) 
{ 
    <div class="product"> 
     <a class="hide" href="#"> 
      <img src="#" alt="Hide" /> 
     </a><a href="#"> 
      <img src="#" width ="138" height="140" alt="product name" /> 
     </a> 
     <h4 class="title">@Html.Raw(@item.Name)</h4> 
     <span class="price">@item.Price.ToString("C")</span> 
    </div> 
} 

這是運作良好，並輸出所需的HTML 然而， 我需要包裝的每一個「行」與
<div class="ClearFix"></div> - 否則佈局了數行後變得凌亂。

（在我的情況下，一排是5個產品的div）

是否有這樣做的方法嗎？

Answer 1

@foreach (var row in Model.Items.Select((item, index) => new { index, item })) 
{ 
    if (row.index % 5 == 0) 
    { 
     <div class="ClearFix"></div> 
    } 
    <div class="product"> 
     <a class="hide" href="#"> 
      <img src="#" alt="Hide" /> 
     </a> 
     <a href="#"> 
      <img src="#" width ="138" height="140" alt="product name" /> 
     </a> 
     <h4 class="title">@Html.Raw(@row.item.Name)</h4> 
     <span class="price">@row.item.Price.ToString("C")</span> 
    </div> 
} 

Answer 2

應該不是一個簡單的int i和i % 5 == 0 and i > 5做的伎倆？

Answer 3

如果你真的需要包裝中明確固定股利內容...

@{ 
    var grouping = new List<Item>(); 
    var itemsPerRow = 5; 
    for (var i = 0; i < Model.Items.Count; i++) 
    { 
    var item = Model.Items[i]; 
    grouping.Add(item); 
    if (i>0 && i%itemsPerRow == itemsPerRow-1) 
    { 
     <div class="clear-fix"> 
      @foreach (var thing in grouping) 
      { 
       Html.RenderPartial("_ItemPartial", thing); 
      } 
     </div> 
     grouping.Clear(); 
    }   
    } 
} 

，然後在_ItemPartial.cshtml：

@model Item 
<div class="product"> 
    <a class="hide" href="#"> 
     <img src="#" alt="Hide" /> 
    </a><a href="#"> 
     <img src="#" width ="138" height="140" alt="product name" /> 
    </a> 
    <h4 class="title">@Html.Raw(@Model.Name)</h4> 
    <span class="price">@Model.Price.ToString("C")</span> 
</div>