Question

我正在使用Razor和MVC 5在我的页面上输出大量项目。这是我目前所拥有的：

@foreach (var item in Model.Items)
{
    <a>@item.Name</a>
}

我想要做的是输出这个：

<div class="tab-0">
    <a>Item 1</a>
    <a>Item 2</a>
    <a>Item 3</a>
    <a>Item 4</a>
</div>
<div class="tab-1">
    <a>Item 5</a>
    <a>Item 6</a>
    <a>Item 7</a>
    <a>Item 8</a>
</div>
<div class="tab-2">
    <a>Item 9</a>
    <a>Item 10</a>
    <a>Item 11/a>
    <a>Item 12</a>
</div>

我需要对div标签中的每4个项目进行分组。我怎么能在Razor中做到这一点？

Answer 1

不确定您是否想要增加Item数字（或者如果@item.Name实际上包含增加的数字），但以下代码将增加类名称（新div每4次迭代）和项目编号。

@{ var t = 0; var i = 1;  }
<div class="tab-@t">  
    @foreach (var item in Model.Items)
    {
        <a>Item @i</a> // this may be just @item.Name?
        if (i % 4 == 0)
        {
            t++;
            @:</div><div class="tab-"@t>
        }
        i++;
    }
</div>

Answer 2

foreach没有给你索引。那是C＃。

我建议您将其更改为for。

@foreach (var index = 0; index < Model.Items.Count; index++)
{
    var item = Model.Items[index];
    <a>@item.Name</a>
    @* Use `item` or `index` as you wish here *@
}

也许您会使用Length代替Count。如果Model.Items只是IEnumerable而不是数组或List<>，您可能需要致电Model.Items.ToList()，等等。您可能会明白这一点。

Answer 3

这是我对解决方案的看法。请记住，我自己没有编译代码，所以请检查一下：

foreach(var item in Model.Items.Select((x, i) => new {Index = i, Value = x}))
{
    if (item.Index % 4 == 0)
    { 
        <div class="tab-@(item.Index/4)">  
    }

            <a>Item @(item.Index + 1)</a>

    if (item.Index % 4 == 0)
    { 
        </div>
    }
} 

// If the number of items has a remainder of 4, close the div tag
if(Model.Items.Count %4 != 0)
{
    @:</div>
}

我在Value中添加了Linq Select，以防您需要循环内的信息。

剃刀 - 使用foreach，每隔n项插入html

3 个答案: