像使用foreach的列表視圖 - MVC

Question

我有20個項目的列表...每5個後我想爲列添加一個div，每個項目將有他們自己的div和..這裏是什麼試圖使用foreach /對，但我有決定我應該怎麼設置我的/ foreach循環產生以下HTML問題

<div class="oc_column"> 
      <div class="oc_row"> 
       <div class="oc_left"><img src="/images/oc1.png" width="26" height="23" alt="" title=""></div> 
       <div class="oc_right">Items 1</div> 
      </div> 
      <div class="oc_row"> 
       <div class="oc_left"><img src="/images/oc2.png" width="26" height="23" alt="" title=""></div> 
       <div class="oc_right">Items 2</div> 
      </div> 
      <div class="oc_row"> 
       <div class="oc_left"><img src="/images/oc3.png" width="26" height="23" alt="" title=""></div> 
       <div class="oc_right">Items 3</div> 
      </div> 
      <div class="oc_row"> 
       <div class="oc_left"><img src="/images/oc4.png" width="26" height="23" alt="" title=""></div> 
       <div class="oc_right">Items 4</div> 
      </div> 
      <div class="oc_row"> 
       <div class="oc_left"><img src="/images/oc5.png" width="26" height="23" alt="" title=""></div> 
       <div class="oc_right">Item 5</div> 
      </div> 
     </div> 
     <div class="oc_column"> 
      <div class="oc_row"> 
       <div class="oc_left"><img src="/images/oc6.png" width="26" height="23" alt="" title=""></div> 
       <div class="oc_right">Item 6</div> 
      </div> 
      <div class="oc_row"> 
       <div class="oc_left"><img src="/images/oc7.png" width="26" height="23" alt="" title=""></div> 
       <div class="oc_right">Item 7</div> 
      </div> 
      <div class="oc_row"> 
       <div class="oc_left"><img src="/images/oc8.png" width="26" height="23" alt="" title=""></div> 
       <div class="oc_right">Item 8</div> 
      </div> 
      <div class="oc_row"> 
       <div class="oc_left"><img src="/images/oc9.png" width="26" height="23" alt="" title=""></div> 
       <div class="oc_right">Item 9</div> 
      </div> 
      <div class="oc_row"> 
       <div class="oc_left"><img src="/images/oc10.png" width="26" height="23" alt="" title=""></div> 
       <div class="oc_right">Item 10</div> 
      </div> 
     </div> 

UPDATE： 這是我一直在尋找的答案，謝謝所有幫助

@{ 
      int pageSize = 5; 
      var totalPages = Model.Types.Count/pageSize; 
      if (Model.Types.Count % pageSize != 0) 
      { 
       totalPages++; 

      } 
      for (int i = 0; i < totalPages; i++) 
      { 
       var types = Model.Types.Skip(i * pageSize).Take(pageSize); 

       <div class="oc_column"> 
        @foreach (var type in types) 
        { 
         <div class="oc_left"><img src="/images/oc1.png" width="26" height="23" alt="" title=""></div> 
         <div class="oc_right">@type.Description</div> 

        } 
       </div> 
      } 
     } 

Answer 1

如何使用計數器變量並檢查其值和有你想要的div。

@{ int counter=0; } 
@foreach(var item in Model.Projects) 
{  
    if(counter==0) 
    { 
     @:<div class='column'> 
    } 
    counter++; 
    <div class="oc_row">@item.Name</div> 
    if (counter ==5) 
    { 
    @:</div> 
    counter = 0; 
    } 
} 

Answer 2

假設你有一個字符串

List<string> list = new List<string>(); 

@for(int i=0; i < list.Count; i++) 
{ 
    <div class="oc_column"> 

    for(; i < list.Count && i%5 != 0; i++) 
    { 
     <div class="oc_row"> 
     <div class="oc_left"><img src="/images/oc1.png" width="26" height="23" alt="" title=""></div> 
     <div class="oc_right">Items 1</div> 
     </div> 
    } 

    </div> 
} 

Answer 3

for循環工作得很好，當然名單，但如果你需要在一個foreach計數器只是做：

@foreach (var item in list.Select((value, i) => new { i, value })) 
{ 
    if (item.i == 0) 
    { 
     // do something with first item.value 
    } 
    else 
    { 
     // do something else with item.value 
    } 
}