根据模型值添加 CSS 类 Razor - C#

在 Razor 页面编程中，我们经常需要根据模型的值动态地添加 CSS 类。这可以通过使用 @{} 代码块和条件语句来实现。

基本语法

<div class="@(Model.IsSelected ? "selected" : "")">
    <!-- content -->
</div>

在上面的示例中，我们使用了 @() 语法，将表达式 Model.IsSelected ? "selected" : "" 的值插入到 CSS 类名中。如果 Model.IsSelected 为真，则将 selected 添加为 CSS 类名，否则不会添加任何类名。

多个类名

如果要添加多个 CSS 类名，只需按照以下语法：

<div class="@(Model.IsSelected ? "selected" : "") @(Model.IsHighlighted ? "highlighted" : "")">
    <!-- content -->
</div>

在这个示例中，我们根据两个不同的属性来决定添加两个不同的 CSS 类名。

枚举类型

如果模型属性是一个枚举类型，则可以使用 Enum.GetName() 方法来获取枚举名称：

<div class="@(Enum.GetName(typeof(Status), Model.Status).ToLower())">
    <!-- content -->
</div>

在这个示例中，我们使用 Enum.GetName() 方法将枚举类型转换为字符串，并将其转换为小写格式，以便与 CSS 类名匹配。

总结

在 Razor 页面编程中，根据模型值动态地添加 CSS 类是一项非常有用的功能。通过使用 @{} 代码块和条件语句，我们可以轻松地实现这个功能。记得在添加类名时使用合适的语法，以避免出现语法错误。