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

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

and my Enum class is

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

This code works fine for me but its contains more reputative codes it can be simplified on razor view section,I want if someone please make it simple .

Here for every switch statement I am adding CSS class 'ACTIVE' for progress bar. The above codes works fine but not a good practice. Below the end result looks like

CodePudding user response：

I think you can simply it with some logic in the div css. I believe we only add or remove the active class based on the orderstatus. If so this should work and you can get rid of the switch statement altogether.

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

CodePudding user response：

You can conditionally apply class active and avoid a switch all together.

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