如何使用Model字段值在CSHTML邮件模板中动态设置style属性

核心前提说明 #

你当前尝试的JS+CSS变量方案在邮件场景下完全不可用，原因有两个：

• 绝大多数主流邮件客户端（Outlook、Gmail、国内各大邮箱等）都会默认过滤掉邮件内的所有<script>标签，JS代码完全不会执行
• 大部分邮件客户端对CSS自定义属性（也就是你定义的--evt1Color这类变量）的支持度极低，就算不用JS也无法正常生效

最优实现方案 #

CSHTML是服务端渲染的模板，你完全可以在渲染阶段就通过Razor语法直接判断事件类型，输出对应的样式，不需要依赖前端逻辑，兼容性也最好，推荐两种实现方式：

方案1：内联样式（兼容性最高，优先选择）

在模板顶部先通过Razor逻辑匹配对应颜色，直接输出到style属性中：

@{
    // 此处色值和你全局统一配色保持一致即可
    var eventColor = alert.event switch
    {
        "event1" => "#ff0000", // 对应你原本的--evt1Color
        "event2" => "#00ff00", // 对应你原本的--evt2Color
        "event3" => "#0000ff", // 对应你原本的--evt3Color
        _ => "#cccccc" // 对应你原本的--bdrColor，默认兜底色
    };
}

原有展示代码直接调用变量即可：

<strong style="color: @eventColor">@alert.event</strong> is scheduled to end: <strong>@endEasternTime</strong>

方案2：类名匹配（适合多属性统一管理的场景）

如果你需要给不同事件类型统一设置多个样式，可以通过服务端输出类名，配合头部的内嵌样式实现：
首先匹配对应类名：

@{
    var eventClass = alert.event switch
    {
        "event1" => "evt-1",
        "event2" => "evt-2",
        "event3" => "evt-3",
        _ => "evt-default"
    };
}

展示代码写入类属性：

<strong class="@eventClass">@alert.event</strong> is scheduled to end: <strong>@endEasternTime</strong>

在邮件模板的<head>标签内添加对应的内嵌样式（不要用外部样式表，部分客户端会过滤）：

<head>
    <style>
        .evt-1 { color: #ff0000 !important; }
        .evt-2 { color: #00ff00 !important; }
        .evt-3 { color: #0000ff !important; }
        .evt-default { color: #cccccc !important; }
    </style>
</head>

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