ASP.NET Core MVC页面运行时为标签设置多个CSS类的问题

假设你已经在CSHTML中定义了变量active（比如@string active = "active";，或者根据业务逻辑动态赋值），以下是几种能得到预期结果的写法：

• 直接拼接变量：直接在class属性中插入变量，Razor引擎会自动解析并替换变量值

  <button class="nav-link @active" id="nav-experience-tab">按钮文本</button>
  

  如果active可能为空字符串，这种写法会在nav-link后多一个空格，但浏览器会忽略多余空格，不影响样式生效；如果想严格避免空格，可以用条件判断处理。

• 带条件判断的写法：当active的值是动态生成（比如根据当前路由判断是否添加active类），可以用Razor的条件表达式精准控制：

  @{
      // 示例：根据当前控制器/动作判断是否添加active类
      bool isActive = ViewContext.RouteData.Values["Action"].ToString() == "Experience";
      string active = isActive ? "active" : "";
  }
  <button class="nav-link @(string.IsNullOrEmpty(active) ? "" : active)" id="nav-experience-tab">按钮文本</button>
  

  或者直接把条件写在class属性里：

  <button class="nav-link @(ViewContext.RouteData.Values["Action"].ToString() == "Experience" ? "active" : "")" id="nav-experience-tab">按钮文本</button>
  

• 使用字符串插值：用C#的字符串插值语法拼接class值，适合需要组合多个类的场景：

  <button class="@($"nav-link {active}")" id="nav-experience-tab">按钮文本</button>
  

常见错误写法示例（避免踩坑） #

• 错误：给变量额外加引号，导致输出带引号的class值

  <!-- 错误写法，会输出class="nav-link "active"" -->
  <button class="nav-link "@active"" id="nav-experience-tab">按钮文本</button>
  

• 错误：未正确使用Razor表达式括号，导致条件判断不生效

  <!-- 错误写法，Razor无法正确解析条件 -->
  <button class="nav-link @ViewContext.RouteData.Values["Action"] == "Experience" ? "active" : "" " id="nav-experience-tab">按钮文本</button>
  

内容的提问来源于stack exchange，提问作者the-a-monir