剃刀-使用foreach在每第n个项目中插入html [英] Razor - using foreach, insert html every nth item

问题描述

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

I'm outputting a large list of items on my page using Razor and MVC 5. Here's what I have currently:

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

我正在尝试做的事情将输出以下内容:

What I'm trying to do is something that would output this:

<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中做到这一点?

I need to group every 4 items within a div tag. How can I do that in Razor?

推荐答案

不确定您是否要递增Item数字(或者@item.Name实际上包含递增的数字)，但是以下代码将同时递增类名(每第4次迭代使用新的div)和商品编号.

Not sure if your wanting to increment the Item number (or if @item.Name actually contains the incremented number), but the following code will increment both the class name (a new div every 4th iteration) and the item number.

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

这篇关于剃刀-使用foreach在每第n个项目中插入html的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！