本文详解在 asp.net core razor 页面中基于条件动态显示 font awesome 图标的方法，重点解决 `@(...)` 表达式默认 html 转义导致图标字符串被原样输出的问题，并提供 `@html.raw()` 和结构化条件渲染两种专业方案。
在 Razor 页面中，开发者常需根据业务状态（如健康检查结果）动态显示语义化图标（例如 ✅ 成功、❌ 失败）。但直接将含 HTML 标签的字符串赋值给变量并在内联表达式中使用（如 @(condition ? iconString : otherIcon)），会导致 Razor 默认对字符串进行 HTML 编码——浏览器将其作为纯文本渲染，而非解析为 DOM 元素，最终看到的是 的源码，而非实际图标。
✅ 正确方案一：使用 @Html.Raw()（谨慎适用）
若仍希望保留内联三元表达式风格，可借助 @Html.Raw() 绕过自动编码：
@{
string successIcon = "<i class='fas fa-check-circle' style='color: #3fd421;'></i>";
string failedIcon = "<i class='fas fa-times-circle' style='color: #e63737;'></i>";
}
<td class="lft">@Html.Raw(UserAccessHealth.Contains("Healthy") ? failedIcon : successIcon) UserAccess:</td>⚠️ 注意事项：
- @Html.Raw() 会完全禁用 HTML 编码，若 successIcon 或 failedIcon 来源于用户输入或不可信数据，将引发 XSS 安全风险；
- 本例中图标字符串为硬编码常量，属安全场景，但应养成“仅对可信静态内容使用 Html.Raw”的习惯。
✅ 推荐方案二：结构化条件渲染（更清晰、更安全、更易维护）
直接在 Razor 中编写 @if/@else 块，将逻辑与标记分离，既避免转义问题，又提升可读性与可测试性：
@if (UserAccessHealth.Contains("Healthy"))
{
<td class="lft"><i class="fas fa-times-circle" style="color: #e63737;"></i> UserAccess:</td>
}
else
{
<td class="lft"><i class="fas fa-check-circle" style="color: #3fd421;"></i> UserAccess:</td>
}✅ 优势说明：
- 零安全风险：所有 HTML 标签均为 Razor 模板原生语法，无动态拼接；
- 高可维护性：图标样式、类名、文字内容均可独立调整，无需字符串操作；
- 便于扩展：后续如需添加 tooltip、aria-label 或点击事件，可直接在 标签内补充属性，逻辑清晰；
-
符合语义化最佳实践：推荐为图标添加 aria-hidden="true"（若仅为装饰）或完整 role/aria-label（若承载关键信息），例如：
<i class="fas fa-check-circle" style="color: #3fd421;" aria-hidden="true"></i>
? 总结建议
| 场景 | 推荐方式 | 理由 |
|---|---|---|
| 静态、可信图标字符串 + 极简模板 | @Html.Raw() | 快速适配已有三元结构 |
| 通用开发场景（强烈推荐） | @if / @else 结构化渲染 | 安全、清晰、可扩展、易调试 |
| 需复用图标逻辑 | 封装为 @functions 或局部视图（Partial View） | 提升组件化程度 |
始终优先选择 Razor 原生控制结构而非字符串拼接 HTML —— 这不仅是解决转义问题的技术选择，更是构建健壮、可维护前端模板的工程实践。
