如何简化Razor Page中订单进度条的重复switch判断代码？

订单进度展示代码简化方案 #

核心思路是将固定的进度节点元数据统一配置，通过循环动态判断active类的添加逻辑，彻底消除重复冗余的硬编码结构。

具体实现 #

1. 预定义进度节点配置

你可以直接在Razor视图顶部定义节点配置列表，也可以将该配置放到PageModel中做全局维护：

@{
    // 进度节点配置和枚举值一一对应，后续调整只需要改这个列表
    var orderSteps = new List<(int StatusVal, string Icon, string Text)>
    {
        ((int)OrderStatus.Placed, "fa fa-check", "Orderd"),
        ((int)OrderStatus.ReadyForDispatch, "fa fa-user", "Dispatched"),
        ((int)OrderStatus.Dispatched, "fa fa-truck", "On the way"),
        ((int)OrderStatus.Delivered, "fa fa-box", "Delivered")
    };
}

2. 替换原有switch语句

直接用循环渲染所有节点，通过当前订单状态值和节点对应状态值的比较，动态添加active类：

@if (Enum.IsDefined(typeof(OrderStatus), orderStatus.OrderStatus))
{
    <div class="track">
        @foreach (var step in orderSteps)
        {
            string stepClass = (int)orderStatus.OrderStatus >= step.StatusVal ? "step active" : "step";
            <div class="@stepClass">
                <span class="icon">
                    <i class="@step.Icon"></i>
                </span>
                <span class="text">@step.Text</span>
            </div>
        }
    </div>
}
else
{
    <p>BLAH BLAH BLAH...</p>
}

优化收益 #

• 没有任何重复代码，后续新增/修改进度节点只需要调整orderSteps配置，不需要修改渲染逻辑
• 状态判断逻辑统一，避免硬编码时写错active类的低级错误
• 可复用性强，如果多处用到该进度条，可直接封装为局部视图或者ViewComponent，仅需传入OrderStatus参数即可渲染

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