MVCかみそりビュー - foreachループで構成ラッピング行私はこのような何かを持っているカミソリビュー持つ

Question

すべてのn個のアイテム：これはうまく機能している

@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

あなたが本当に...明確な修正のdivに_ItemPartial.cshtmlで

@{ 
    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(); 
    }   
    } 
} 

、その後の内容をラップする必要がある場合：

@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>