谁能简化我的剃须刀页面代码。它包含很多重复的代码

Question

@switch (orderStatus.OrderStatus)
{
    case 1:
        <div class="track">
            <div class="step active"> <span class="icon"> <i class="fa fa-check"></i> </span> <span class="text">Orderd</span> </div>
            <div class="step"> <span class="icon"> <i class="fa fa-user"></i> </span> <span class="text">Dispatched</span> </div>
            <div class="step"> <span class="icon"> <i class="fa fa-truck"></i> </span> <span class="text"> On the way </span> </div>
            <div class="step"> <span class="icon"> <i class="fa fa-box"></i> </span> <span class="text">Delivered</span> </div>
        </div>
        break;
    case 2:
    <div class="track">
            <div class="step active"> <span class="icon"> <i class="fa fa-check"></i> </span> <span class="text">Orderd</span> </div>
            <div class="step active"> <span class="icon"> <i class="fa fa-user"></i> </span> <span class="text">Dispatched</span> </div>
            <div class="step"> <span class="icon"> <i class="fa fa-truck"></i> </span> <span class="text"> On the way</span> </div>
            <div class="step"> <span class="icon"> <i class="fa fa-box"></i> </span> <span class="text">Delivered</span> </div>
        </div>
        break;

    case 3:
        <div class="track">
            <div class="step active"> <span class="icon"> <i class="fa fa-check"></i> </span> <span class="text">Orderd</span> </div>
            <div class="step active"> <span class="icon"> <i class="fa fa-user"></i> </span> <span class="text">Dispatched</span> </div>
            <div class="step active"> <span class="icon"> <i class="fa fa-truck"></i> </span> <span class="text"> On the way</span> </div>
            <div class="step"> <span class="icon"> <i class="fa fa-box"></i> </span> <span class="text">Delivered</span> </div>
        </div>
        break;
    case 4:
        <div class="track">
            <div class="step active"> <span class="icon"> <i class="fa fa-check"></i> </span> <span class="text">Orderd</span> </div>
            <div class="step active"> <span class="icon"> <i class="fa fa-user"></i> </span> <span class="text">Dispatched</span> </div>
            <div class="step active"> <span class="icon"> <i class="fa fa-truck"></i> </span> <span class="text"> On the way</span> </div>
            <div class="step active"> <span class="icon"> <i class="fa fa-box"></i> </span> <span class="text">Delivered</span> </div>
        </div>
        break;
    default:
       <p>BLAH BLAH BLAH...</p>
        break;
}

我的枚举类是

public enum OrderStatus
{
    Placed = 1,
    ReadyForDispatch = 2, 
    Dispatched = 3, 
    Delivered = 4,  
}

这段代码对我来说很好，但它包含更多有名的代码，可以在剃须刀视图部分进行简化，如果有人请让它简单一点。

在这里，对于每个 switch 语句，我都为进度条添加了 CSS 类“ACTIVE”。 上面的代码工作正常，但不是一个好习惯。下面的最终结果看起来像

Answer 1

我认为您可以在 div css 中使用一些逻辑来简化它。我相信我们只根据订单状态添加或删除活动类。如果是这样，这应该可以工作，您可以完全摆脱 switch 语句。

<div class="track">
    <div class="step @(orderStatus.OrderStatus >= 1 ? "active" : "")'"> <span class="icon"> <i class="fa fa-check"></i> </span> <span class="text">Orderd</span> </div>
    <div class="step @(orderStatus.OrderStatus >= 2 ? "active" : "")'"> <span class="icon"> <i class="fa fa-user"></i> </span> <span class="text">Dispatched</span> </div>
    <div class="step @(orderStatus.OrderStatus >= 3 ? "active" : "")'"> <span class="icon"> <i class="fa fa-truck"></i> </span> <span class="text"> On the way</span> </div>
    <div class="step @(orderStatus.OrderStatus >= 4 ? "active" : "")'"> <span class="icon"> <i class="fa fa-box"></i> </span> <span class="text">Delivered</span> </div>
 </div>

Answer 2

您可以有条件地应用类活动并避免一起切换。

<div class="track">
<div class="step @(orderStatus.OrderStatus >= 1 ? "active" : "")'"> <span class="icon"> <i class="fa fa-check"></i> </span> <span class="text">Orderd</span> </div>
<div class="step @(orderStatus.OrderStatus >= 2 ? "active" : "")'"> <span class="icon"> <i class="fa fa-user"></i> </span> <span class="text">Dispatched</span> </div>
<div class="step @(orderStatus.OrderStatus >= 3 ? "active" : "")'"> <span class="icon"> <i class="fa fa-truck"></i> </span> <span class="text"> On the way</span> </div>
<div class="step @(orderStatus.OrderStatus >= 4 ? "active" : "")'"> <span class="icon"> <i class="fa fa-box"></i> </span> <span class="text">Delivered</span> </div>