Question

我有一个包含20个项目的列表...每5个后我想为列添加一个div，每个项目都有自己的div和..这里是我尝试用foreach / for生成的但是我有决定如何设置我的for / 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>

更新：以下是我要找的答案，谢谢你的帮助

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

Listview喜欢使用foreach - MVC

3 个答案: