像使用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 
    } 
}