如何优雅实现列表拆分：左前5右后5的Razor视图优化方案

先修正元素集合的获取逻辑 #

你原来的右侧元素取的是后2个，不符合需求，先调整为正确的后5个：

// 取前5个作为左侧元素
var leftItems = ctx.Customers.Take(5).ToList();
// 取后5个作为右侧元素（兼容总数不足10的情况）
var rightItems = ctx.Customers.Skip(Math.Max(0, ctx.Customers.Count() - 5)).ToList();

方法1：利用索引循环匹配Class #

先定义左右侧的Class列表，再通过索引遍历元素和Class，实现一一对应：

<!-- 左侧列渲染 -->
@{
    var leftClassList = new List<string> { "leftOne", "leftTwo", "leftThree", "leftFour", "leftFive" };
}
@for (int i = 0; i < leftItems.Count; i++)
{
    var currentItem = leftItems[i];
    <div class="@leftClassList[i]">
        <!-- 替换为你的元素内容渲染逻辑 -->
        客户名称：@currentItem.Name
    </div>
}

<!-- 右侧列渲染 -->
@{
    var rightClassList = new List<string> { "rightOne", "rightTwo", "rightThree", "rightFour", "rightFive" };
}
@for (int i = 0; i < rightItems.Count; i++)
{
    var currentItem = rightItems[i];
    <div class="@rightClassList[i]">
        客户名称：@currentItem.Name
    </div>
}

方法2：用Zip方法配对元素与Class #

借助LINQ的Zip方法，将元素集合和Class集合按索引配对，再用foreach遍历，代码更简洁：

<!-- 左侧列渲染 -->
@{
    var leftClassList = new List<string> { "leftOne", "leftTwo", "leftThree", "leftFour", "leftFive" };
    var leftItemPairs = leftItems.Zip(leftClassList, (item, cls) => new { Item = item, ClassName = cls });
}
@foreach (var pair in leftItemPairs)
{
    <div class="@pair.ClassName">
        客户名称：@pair.Item.Name
    </div>
}

<!-- 右侧列渲染 -->
@{
    var rightClassList = new List<string> { "rightOne", "rightTwo", "rightThree", "rightFour", "rightFive" };
    var rightItemPairs = rightItems.Zip(rightClassList, (item, cls) => new { Item = item, ClassName = cls });
}
@foreach (var pair in rightItemPairs)
{
    <div class="@pair.ClassName">
        客户名称：@pair.Item.Name
    </div>
}

优势说明 #

这两种方法都避免了逐个声明变量的冗余操作，代码更易维护：

• 如果后续需要调整Class名称，只需修改Class列表即可
• 元素数量变化时，只需调整Take/Skip的参数和Class列表长度

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