C# Razor中如何在foreach循环内迭代下一项，实现每轮展示2个条目？

首先明确：foreach循环无法直接切换到下一项，因为它是基于枚举器的只读遍历，没有内置的索引跳转能力。要实现每轮展示2个条目（如第1轮展示索引0和1、第2轮展示2和3，以此类推），可以用以下两种方法：

方法1：使用for循环（带步长控制） #

通过索引遍历，每次步进2，同时处理当前索引和下一个索引的元素，注意要判断下一个索引是否超出集合范围，避免报错。

示例代码：

@for (int i = 0; i < Model.Count; i += 2)
{
    // 获取当前条目
    var currentItem = Model[i];
    // 获取下一个条目（如果存在）
    var nextItem = (i + 1 < Model.Count) ? Model[i + 1] : null;

    <div class="row">
        <!-- 第一个条目：图+简介 -->
        <div id="companyImage1" class='col-md-6 col-sm-12'>
            <img src='/images/Companies/@currentItem.ImageFilename'/>
        </div>
        <div class='col-md-6 col-sm-12 companySummary1'>
            <header>@currentItem.CompanyName</header>
            <p>@currentItem.Summary</p>
        </div>
    </div>

    @if (nextItem != null)
    {
        <div class="row">
            <!-- 第二个条目：简介+图 -->
            <div class='companySummary2 col-md-6 col-sm-12'>
                <header>@nextItem.CompanyName</header>
                <p>@nextItem.Summary</p>
            </div>
            <div id="companyImage2" class='col-md-6 col-sm-12'>
                <img src="/images/Companies/@nextItem.ImageFilename">
            </div>
        </div>
    }
}

方法2：使用LINQ分组（.NET 6+推荐用Chunk） #

如果你的项目基于.NET 6及以上，可以用Chunk方法直接将模型集合分成每组2个元素的子集合，再遍历每组：

示例代码：

@foreach (var pair in Model.Chunk(2))
{
    // 处理第一个元素
    var firstItem = pair[0];
    <div class="row">
        <div id="companyImage1" class='col-md-6 col-sm-12'>
            <img src='/images/Companies/@firstItem.ImageFilename'/>
        </div>
        <div class='col-md-6 col-sm-12 companySummary1'>
            <header>@firstItem.CompanyName</header>
            <p>@firstItem.Summary</p>
        </div>
    </div>

    // 如果组里有第二个元素，处理它
    if (pair.Length > 1)
    {
        var secondItem = pair[1];
        <div class="row">
            <div class='companySummary2 col-md-6 col-sm-12'>
                <header>@secondItem.CompanyName</header>
                <p>@secondItem.Summary</p>
            </div>
            <div id="companyImage2" class='col-md-6 col-sm-12'>
                <img src="/images/Companies/@secondItem.ImageFilename">
            </div>
        </div>
    }
}

说明 #

• 两种方法都能解决原代码中重复渲染同一个条目的问题，实现你要的“每轮展示2个不同条目”的效果。
• 都考虑了集合长度为奇数的情况（最后一组只有1个元素），避免索引越界报错。

内容的提问来源于stack exchange，提问作者Adn