如何根据模型值条件设置HTML class属性？验证方案可行性

问题背景 #

现有如下HTML代码片段，需要根据模型属性控制collapse类的添加/移除，以此控制错误提示框的显示与隐藏：

<div id="AlertError" class="alert alert-danger alert-dismissible collapse" role="alert">
    <div id="AlertMsg">@Model.SvrErrorMsg</div>
    <button type="button" class="close" id="linkclose" aria-label="Close">
        <span aria-hidden="true">&times;</span>
    </button>
</div>

用户拟采用以下代码实现需求：

<div id="AlertError" class="@(model.ShowError == "true" ? "alert alert-danger alert-dismissible" : "alert alert-danger alert-dismissible collapse")" role="alert">

通用实现方法 #

条件化控制CSS类的核心是根据模型属性值动态生成class字符串，常见两种实现思路：

• 完整分支写法：像用户方案这样，分别定义两种状态下的完整class列表，通过三元运算符选择对应结果
• 增量拼接写法：先固定写死不变的class部分，再根据条件决定是否追加可变的collapse类，示例：

  <div id="AlertError" class="alert alert-danger alert-dismissible @(model.ShowError != "true" ? "collapse" : "")" role="alert">
  

用户方案可行性验证 #

用户的方案完全可行，逻辑完全符合需求：

• 当model.ShowError等于"true"时，class列表不含collapse，错误提示框正常显示
• 当model.ShowError不等于"true"时，class列表包含collapse，错误提示框被隐藏

不过该写法存在冗余问题：重复书写了大量相同的class前缀，后续维护时如果需要修改基础class（比如调整alert样式类），要同时修改两个分支的内容，容易出错。更推荐使用增量拼接的写法，只针对变化的collapse类做条件判断，代码更简洁易维护。

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