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

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;
}

我的枚举 class 是

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

这段代码对我来说工作正常，但它包含更多有信誉的代码，可以在剃须刀视图部分进行简化，我希望有人能简化它。

我在这里为每个 switch 语句添加了 CSS class 'ACTIVE' 作为进度条。上面的代码工作正常但不是一个好的做法。下面的最终结果看起来像

Answer 1

您可以有条件地应用 class active 并避免切换。

<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>

Answer 2

我认为您可以在 div css 中使用一些逻辑来简化它。我相信我们只会根据订单状态添加或删除活动的 class。如果是这样，这应该可以工作，您可以完全摆脱 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>

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

Can anyone simplify my razor page code .its contains so many repetitive codes

c#

asp.net-mvc

razor

asp.net-core

razor-pages