如何在ASP.NET MVC Razor foreach循环中切换局部视图列类实现交错布局？

当然可以不用 JavaScript 实现！这里有两个实用的纯 Razor + CSS 方案，帮你搞定交错布局：

方案一：通过Razor循环索引动态切换列顺序 #

利用 Razor 的循环索引判断奇偶项，直接调整局部视图里的列排列顺序，逻辑清晰可控。

步骤1：修改主视图循环，传递索引 #

把原来的foreach改成带索引的遍历，将每个博客项和它的索引一起传给局部视图：

@foreach (var indexedItem in Model.Listings.Select((item, index) => new { Item = item, Index = index }))
{
    @Html.Partial("~/Views/Listing/_ListingCard.cshtml", indexedItem)
}

步骤2：更新局部视图处理索引判断 #

首先建议创建一个简单的 ViewModel 来规范传递的数据（避免使用dynamic带来的潜在问题）：

// 在Models文件夹下创建
public class ListingCardViewModel
{
    public YourListingModel Item { get; set; } // 替换成你实际的博客项模型类型
    public int Index { get; set; }
}

然后修改局部视图的模型声明，并添加奇偶判断逻辑：

@model YourNamespace.Models.ListingCardViewModel

<div class="card card-plain card-blog"> 
    <div class="row"> 
        @if (Model.Index % 2 == 0)
        {
            <!-- 偶数索引（第一项）：图片列在左，内容列在右 -->
            <div class="col-md-5"> 
                <div class="card-image"> <!-- 你的图片渲染代码 --> </div> 
            </div> 
            <div class="col-md-7"> 
                <div class="card-body"> <!-- 你的博客内容代码 --> </div> 
            </div>
        }
        else
        {
            <!-- 奇数索引：内容列在左，图片列在右 -->
            <div class="col-md-7"> 
                <div class="card-body"> <!-- 你的博客内容代码 --> </div> 
            </div>
            <div class="col-md-5"> 
                <div class="card-image"> <!-- 你的图片渲染代码 --> </div> 
            </div>
        }
    </div> 
</div>

方案二：纯CSS Flex布局反转行顺序 #

如果不想改动太多后端代码，这个方案更简洁——利用Bootstrap 4+原生的Flex布局特性，通过CSS的:nth-child()选择器反转偶数项的行内元素顺序。

步骤1：给局部视图的行添加自定义类 #

<div class="card card-plain card-blog"> 
    <div class="row blog-row"> <!-- 添加blog-row类 -->
        <div class="col-md-5"> 
            <div class="card-image"> <!-- 你的图片代码 --> </div> 
        </div> 
        <div class="col-md-7"> 
            <div class="card-body"> <!-- 你的内容代码 --> </div> 
        </div> 
    </div> 
</div>

步骤2：添加CSS样式 #

在你的全局样式文件（比如site.css）中添加：

/* 确保row使用flex布局（Bootstrap 4+默认已开启，这里做兼容） */
.blog-row {
    display: flex;
    flex-wrap: wrap;
}

/* 反转偶数项的行内元素顺序 */
.card-blog:nth-child(even) .blog-row {
    flex-direction: row-reverse;
}

方案对比 #

• 方案一：灵活性更高，适合后续需要基于索引添加更多自定义逻辑的场景；
• 方案二：代码改动最小，纯CSS实现，维护成本低，适合布局逻辑简单的场景。

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