誰能簡化我的剃須刀頁面代碼，它包含了許多重復的代碼。 -有解無憂

@switch (orderStatus.OrderStatus)
{
    case 1:
        <div class="track"/span>>
            <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-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-box"></i> </span> < span class="text"> Delivered</span> </div>
        </div>
        break;
    case 2:
    <div class="track"/span>>
            <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-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-box"></i> </span> < span class="text"> Delivered</span> </div>
        </div>
        break;

    case 3:
        <div class="track"/span>>
            <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-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-box"></i> </span> < span class="text"> Delivered</span> </div>
        </div>
        break;
    case 4:
        <div class="track"/span>>
            <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-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-box"></i> </span> < span class="text"> Delivered</span> </div>
        </div>
        break;
    default:
       <p>BLAH BLAH BLAH...</p>
        break;
}

而我的Enum類是

public enum OrderStatus
{
    Placed = 1,
    ReadyForDispatch = 2, 
    Dispatched = 3, 
    已交付 = 4,  
}

這段代碼對我來說很好，但它包含了更多的聲譽代碼，它可以在剃刀視圖部分進行簡化，我希望有人能讓它變得簡單。

在這里，我在每個開關陳述句中為進度條添加CSS類 "ACTIVE"。上述代碼運行良好，但不是一個好的做法。下面的最終結果看起來像

uj5u.com熱心網友回復：

我認為你可以簡單地在div css中使用一些邏輯。我相信我們只是根據訂單狀態來添加或洗掉活動類。如果是這樣，這應該是可行的，你可以完全擺脫開關陳述句。

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

uj5u.com熱心網友回復：

你可以有條件地應用類的活躍性，并完全避免切換。

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

轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/324066.html

標籤：

上一篇：當多個用戶登錄時，SignalROnConnected方法沒有啟動

下一篇：在MSAccess中，將行轉化為列，并將列轉化為行。