ASP.NET MVC 5中如何实现每行展示3条记录的动态列布局？

实现方案 #

你现有代码的问题是每次遍历都生成独立的row容器，导致每条数据单独占一行。只需要把每3条数据包裹在同一个row容器内，配合col-sm-4的1/3宽度特性，即可实现每行3列的效果。

方案1：兼容所有ASP.NET MVC版本（含.NET Framework版MVC5）

通过计数器控制每行的元素数量，逻辑稳定无版本依赖：

@{
    // 先把集合转为列表，避免多次枚举带来的性能损耗
    var itemList = Model.ToList();
    int totalCount = itemList.Count;
    int currentIndex = 0;
}

@while (currentIndex < totalCount)
{
    <div class="row">
        @* 每次循环最多生成3列 *@
        @for (int i = 0; i < 3; i++)
        {
            if (currentIndex >= totalCount)
            {
                break;
            }
            var item = itemList[currentIndex];
            <div class="col-sm-4">
                <div class="i-box">
                    <div class="i-icon">
                        <a href="@Url.Action("actionName", "Controller", new { articalName = item.Id })">
                            <img src="" alt="stack" class="img-fluid">
                        </a>
                    </div>
                    <div class="i-date">Date</div>
                    <h4>HEADER</h4>
                    <p>Paragraph</p>
                </div>
            </div>
            currentIndex++;
        }
    </div>
}

该方案自动兼容最后一行不足3条数据的场景，不会出现标签未闭合的问题。

方案2：适用于ASP.NET Core 3.0+版本

可直接使用Chunk方法对集合分组，代码更简洁：

@* 按每3个元素为一组拆分集合 *@
@foreach (var group in Model.Chunk(3))
{
    <div class="row">
        @foreach (var item in group)
        {
            <div class="col-sm-4">
                <div class="i-box">
                    <div class="i-icon">
                        <a href="@Url.Action("actionName", "Controller", new { articalName = item.Id })">
                            <img src="" alt="stack" class="img-fluid">
                        </a>
                    </div>
                    <div class="i-date">Date</div>
                    <h4>HEADER</h4>
                    <p>Paragraph</p>
                </div>
            </div>
        }
    </div>
}

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