在Razor视图中使用switch-case动态选择CSS类的实现方案

这个问题我之前也碰到过！你原来的代码里，Razor的@{ }代码块是语句块，里面的switch是执行语句，没办法直接返回字符串赋值给class属性，得换几种方式来实现，给你几个可行的方案：

方案1：封装成局部方法（最直观，适合逻辑复杂的场景） #

在视图里定义一个专门返回颜色类名的方法，把switch逻辑放进去，之后直接调用就行：

@functions {
    private string GetColorClass(int whichColor)
    {
        // 用现代的switch表达式写法
        return whichColor switch
        {
            1 => "red",
            2 => "blue",
            3 => "green",
            // 可以继续添加更多颜色映射
            _ => "" // 默认返回空类，你也可以改成默认样式类名
        };

        // 如果你习惯传统switch语句，也可以写成：
        //switch (whichColor)
        //{
        //    case 1: return "red";
        //    case 2: return "blue";
        //    case 3: return "green";
        //    default: return "";
        //}
    }
}

然后在<td>里调用这个方法：

<td class="@GetColorClass(item.WhichColor)">
    @Html.DisplayFor(modelItem => item.WhichColor)
</td>

方案2：用内联Switch表达式（C# 8+支持，最简洁） #

如果你的项目用的是C# 8及以上版本，可以直接用switch表达式内联写在Razor里，不用额外定义方法：

<td class="@(item.WhichColor switch {
    1 => "red",
    2 => "blue",
    3 => "green",
    _ => "" // 默认值
})">
    @Html.DisplayFor(modelItem => item.WhichColor)
</td>

注意要把表达式用@(...)包裹起来，让Razor识别这是一个完整的表达式。

方案3：字典映射（适合颜色/类名较多的场景，易维护） #

如果后续要添加更多颜色映射，用字典来维护会更方便，修改起来不用动逻辑代码：

@{
    var colorClassMap = new Dictionary<int, string>
    {
        { 1, "red" },
        { 2, "blue" },
        { 3, "green" }
        // 新增颜色直接在这里加键值对就行
    };
}

然后在<td>里通过字典查找获取类名：

<td class="@(colorClassMap.TryGetValue(item.WhichColor, out var className) ? className : "")">
    @Html.DisplayFor(modelItem => item.WhichColor)
</td>

这几种方案都能解决你原来的问题，你可以根据自己的项目版本和维护需求来选～

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