从项目值中选择一个 CSS 类答案

【问题标题】：Select a css class from an item value从项目值中选择一个 CSS 类
【发布时间】：2018-05-09 03:32:56
【问题描述】：

在 cshtml 页面中，我可以根据数据库值选择一个类。示例：

<div class="alert @item.State" role="alert">@item.State</div>

“State”是我的表的枚举，定义如下：

public enum States
{
    Ready,
    Setup,
    Pause,
    Error,
    Maintenance,
    Emergency,
    Disconnected
}

上面的 Razor 语法将根据项目值向我的警报添加一个类。好！

但现在我需要将这个类“翻译”为 Bootstrap 的类。示例：

Ready: alert-primary 
Pause or Disconnected: alert-secondary
Error: alert-danger
etc...

我可以使用 Razor 手动执行此操作，但我想知道是否有直接在 css 中执行此操作的便捷方法，例如（元代码）：

.Ready {
    return alert-primary
}

.Pause, .Disconnect {
    return alert-secondary
}

【问题讨论】：

您好，您是否使用预处理器，例如 sass 或更少？
目前我没有。
使用 sass 可以扩展类。它就像 OOP 继承一样工作

标签： css twitter-bootstrap razor-pages

【解决方案1】：

您可以声明一个包含类名的字符串数组：

string[] ClassList = new string[]
{
    "ReadyClass", "SetupClass", "PauseClass", "ErrorClass", "MaintenanceClass", "EmergencyClass", "DisconnectedClass"
};

现在您可以使用以下行显示等效的类名

@ClassList[(int)item.State]

我没有测试它，但它应该可以工作。

【讨论】：

这确实是一个可行的解决方案，尽管在我通常描述为“使用 Razor 手动执行”的组中。