.NET中如何根据Model的UserType值为HTML标签设置不同背景色

原有全局CSS中定义的.x-navigation默认背景属性无需修改，直接调整导航局部视图的渲染逻辑即可，以下提供两种可直接落地的实现方式，按需选择：

方式一：动态拼接样式类（推荐，便于后续维护扩展） #

1. 先在全局CSS文件中追加不同用户类型对应的导航背景样式，由于样式类写在原有.x-navigation规则之后，优先级更高，会自动覆盖默认背景：

/* 以下色值可替换为项目实际需要的配色 */
.x-navigation.type-admin { background-color: #165DFF; }
.x-navigation.type-operator { background-color: #00B42A; }
.x-navigation.type-ordinary { background-color: #4E5969; }

2. 修改_XNavigational.vbhtml文件代码，根据Model传入的UserType值动态拼接ul标签的class属性：

@If Model IsNot Nothing Then
    @<text>
        @Code
            Dim baseNavClass As String = "x-navigation"
            ' 按项目实际UserType取值匹配对应样式类
            Select Case Model.UserType
                Case "Admin"
                    baseNavClass &= " type-admin"
                Case "Operator"
                    baseNavClass &= " type-operator"
                Case "Ordinary"
                    baseNavClass &= " type-ordinary"
            End Select
        End Code
        <ul class="@baseNavClass">
            @* 原有导航列表内容保持不变 *@
            .....
            .....
        </ul>
    </text>
End If

方式二：内联样式覆盖（适合用户类型少、样式调整频率低的场景） #

无需额外修改全局CSS，直接在视图中根据UserType输出内联样式覆盖默认背景即可，内联样式优先级高于类选择器，无需调整原有CSS权重：

@If Model IsNot Nothing Then
    @<text>
        @Code
            Dim navBg As String = String.Empty
            ' 按项目实际UserType取值匹配对应背景色，为空则沿用默认CSS背景
            Select Case Model.UserType
                Case "Admin"
                    navBg = "#165DFF"
                Case "Operator"
                    navBg = "#00B42A"
                Case "Ordinary"
                    navBg = "#4E5969"
            End Select
            Dim bgStyle = If(String.IsNullOrEmpty(navBg), "", $"style=""background-color:{navBg}""")
        End Code
        <ul class="x-navigation" @Html.Raw(bgStyle)>
            @* 原有导航列表内容保持不变 *@
            .....
            .....
        </ul>
    </text>
End If

实现说明 #

• 判断分支中的UserType取值、对应背景色可直接替换为项目实际的业务值
• 修改完成后所有引用该局部视图的页面会自动生效，无需调整主布局文件和其他业务视图
• 如果项目中UserType为枚举类型，判断分支直接对应枚举值书写即可，无需额外转字符串

内容的提问来源于stack exchange，提问作者Elin