ASP.NET MVC中动态生成含空格JavaScript类名失败求助

嘿，我懂你遇到的糟心事了——本来想给第一个轮播项加上active类，结果渲染出来变成了两个独立的属性，这确实挺闹心的。

问题根源 #

你之所以会得到<script class="carousel-item" active="">这种结果，是因为Razor视图在解析未加引号的表达式时，会把字符串里的空格当成HTML属性的分隔符。如果你的className变量值是"carousel-item active"，但你写的是<script class=@className>，Razor就会把空格后的active当成一个新的空属性来渲染。

解决方案 #

方案1：给类名表达式加上双引号

最简单的修复方式，就是把@className放在双引号里，让Razor把整个字符串解析成一个完整的class属性值：

@for (var i = 0; i < Model.Banners.Count; i++)
{
    var className = "carousel-item";
    if (i == 0)
    {
        className += " active"; // 这里的空格是正确的
    }
    var srcName = "";
    if (Model.Banners[i].Image != null)
    {
        srcName = "data:image;base64," + System.Convert.ToBase64String(Model.Banners[i].Image);
    }

    // 关键：给@className加上双引号
    <script class="@className">
        // 你的脚本内容
    </script>
}

这样渲染出来的HTML就会是你预期的<script class="carousel-item active">。

方案2：直接在class属性内用条件表达式（更简洁）

如果你不想单独声明className变量，也可以直接在class属性里用三元运算符动态拼接类名，代码更紧凑：

@for (var i = 0; i < Model.Banners.Count; i++)
{
    var srcName = "";
    if (Model.Banners[i].Image != null)
    {
        srcName = "data:image;base64," + System.Convert.ToBase64String(Model.Banners[i].Image);
    }

    <script class="carousel-item @(i == 0 ? "active" : "")">
        // 你的脚本内容
    </script>
}

这里@(i == 0 ? "active" : "")会在i=0时输出active，否则输出空字符串，同样能得到正确的带空格的类名。

小提示 #

在Razor视图里写HTML属性时，尽量养成给动态值加双引号的习惯，这样能避免很多类似的解析错误，尤其是当值里包含空格、特殊字符的时候。

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