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

Posted 2023-03-27

【中文标题】谁能简化我的剃须刀页面代码。它包含很多重复的代码

【英文标题】：Can anyone simplify my razor page code .its contains so many repetitive codes

【发布时间】：2021-11-12 10:34:19

【问题描述】：

@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”。 上面的代码工作正常，但不是一个好习惯。下面的最终结果看起来像

【问题讨论】：

查看你的 switch 评估模式以及活动课程在 switch 值上的进展情况。您应该能够将代码提取到一个通用方法并重用它。

【参考方案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>

【讨论】：

感谢它的工作，但我必须删除单引号。

@Asaad 啊，复制和粘贴错误。很高兴它对你有用！

【参考方案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>

【讨论】：

哈，我们的代码几乎完全相同。我认为您对此更改的编辑是在我回答后一分钟。伟大的思想和所有的想法......