如何在Blazor属性中使用Switch Case设置CSS类

基础代码参考 #

// 枚举定义
public enum PastPresentFuture
{
    Past,
    Present,
    Future
}

// 数据模型类
public class MyObject
{
    public PastPresentFuture Status { get; set; }
    // 其他业务属性
}

方案1：直接在Razor属性中使用Switch表达式（简洁高效） #

Blazor属性绑定支持用@(...)包裹C#表达式，你可以直接在这里使用C# 8.0+的switch表达式，这是符合语法要求的写法，不会触发RZ9979错误：

@* 假设已声明/注入MyObject实例：MyObject MyItem; *@
<div class="@(MyItem.Status switch 
{
    PastPresentFuture.Past => "past",
    PastPresentFuture.Present => "present",
    PastPresentFuture.Future => "future",
    _ => "" // 兜底默认值，避免未覆盖枚举分支的情况
})">
    你的内容
</div>

方案2：封装为组件方法（适合复用或复杂逻辑） #

如果需要在多处复用该逻辑，或者后续要扩展判断规则，建议把switch逻辑封装到组件的代码后置文件中：

// 组件的代码后置文件（例如：YourComponent.razor.cs）
public partial class YourComponent
{
    [Parameter]
    public MyObject MyItem { get; set; }

    private string GetStatusCssClass(PastPresentFuture status)
    {
        // 用传统switch语句也可以，写法更灵活
        switch (status)
        {
            case PastPresentFuture.Past:
                return "past";
            case PastPresentFuture.Present:
                return "present";
            case PastPresentFuture.Future:
                return "future";
            default:
                return string.Empty;
        }
    }
}

然后在Razor视图中直接调用方法：

<div class="@GetStatusCssClass(MyItem.Status)">
    你的内容
</div>

错误原因说明 #

你之前尝试用@{...}代码块直接写在class属性里，Blazor现在已经禁止这种在属性内嵌入代码块的写法，必须使用@(表达式)的形式——switch表达式或返回字符串的方法调用都属于合法的表达式，因此可以正常运行。

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