ASP.NET Razor视图生成多CSS类名时的空格解析异常问题

我明白你碰到的这个麻烦了——Razor在处理不带引号的属性值时，对空格的解析确实会出问题。咱们来一步步搞定它：

问题根源 #

你当前的代码里，class属性值没有用双引号包裹：

<footer class=@HtmlHelpers.TruthyValueSelector(false,"footer","footer footer--no-border")></footer>

当你的辅助方法返回带空格的字符串（比如"footer footer--no-border"）时，Razor渲染出来的HTML会变成：

<footer class=footer footer--no-border></footer>

浏览器会把class=footer解析成class="footer"，而空格后的footer--no-border会被当成一个独立的无效属性，这就是为什么你检查元素时看到的结果不对。

解决方案 #

方案1：给class属性值加上双引号 #

这是最简单直接的办法，把@表达式用双引号包起来，让Razor把整个返回字符串作为class的完整属性值：

<footer class="@HtmlHelpers.TruthyValueSelector(false,"footer","footer footer--no-border")"></footer>

这样渲染后会得到正确的HTML：

<footer class="footer footer--no-border"></footer>

方案2：修改辅助方法返回IHtmlString（更规范的做法） #

把辅助方法的返回类型改为IHtmlString，用HtmlString包装返回结果，确保Razor正确处理带空格的内容：

public static IHtmlString TruthyValueSelector(bool condition, string firstParameter, string secondParameter)
{
    string result = condition ? firstParameter : secondParameter;
    return new HtmlString(result);
}

然后视图里同样搭配双引号使用，这样既避免了潜在的编码问题，也能确保类名被正确渲染。

方案3：直接用Razor内联条件表达式（简化逻辑） #

如果你的逻辑只是简单的二选一，也可以不用辅助方法，直接在视图里写内联条件（记得加括号确保Razor正确解析）：

<footer class="@(false ? "footer" : "footer footer--no-border")"></footer>

以上三种方法都能解决你遇到的问题，选最适合你代码场景的就行~

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