本文讲解在 asp.net core razor 页面中，如何正确根据健康状态等条件动态渲染 font awesome 图标，避免 html 字符串被转义为纯文本，并提供安全、可维护的实现方案。
在 Razor 视图中，使用 @(...) 表达式输出内容时，框架默认会对字符串进行 HTML 编码（即转义 等字符），以防止 XSS 攻击。因此，当你将包含 标签的字符串（如 ""）直接用于 @(condition ? icon1 : icon2) 时，浏览器实际接收到的是被编码后的文本（例如 <i class='fas...>），导致图标无法渲染，仅显示原始 HTML 源码。
✅ 推荐做法：避免拼接 HTML 字符串，改用原生 Razor 逻辑分支
最清晰、安全且符合 Razor 设计哲学的方式是使用 @if / @else 显式控制 DOM 结构：
@if (UserAccessHealth.Contains("Healthy"))
{
<td class="lft">
<i class="fas fa-check-circle" style="color: #3fd421;"></i> UserAccess:
</td>
}
else
{
<td class="lft">
<i class="fas fa-times-circle" style="color: #e63737;"></i> UserAccess:
</td>
}该写法优势明显：
- ✅ 零转义风险：HTML 标签作为 Razor 标记直接解析，无需额外解码；
- ✅ 类型安全 & 可读性强：逻辑与结构分离，便于团队协作与后续维护；
- ✅ 支持 IntelliSense 与编译时检查：IDE 能识别标签语法错误，提升开发效率；
- ✅ 天然兼容 CSS/JS 扩展：如需为图标添加 data-* 属性或绑定事件，可直接添加，无字符串拼接负担。
⚠️ 不推荐的替代方案（仅作说明，慎用）
虽然可通过 @Html.Raw() 强制输出未编码 HTML：
@{
var successIcon = "<i class='fas fa-check-circle' style='color: #3fd421;'></i>";
var failedIcon = "<i class='fas fa-times-circle' style='color: #e63737;'></i>";
}
<td class="lft">@Html.Raw(UserAccessHealth.Contains("Healthy") ? failedIcon : successIcon) UserAccess:</td>但此方式存在显著隐患：
- ❌ XSS 风险：若 UserAccessHealth 来自用户输入或不受信源，拼接字符串可能引入恶意脚本；
- ❌ 可维护性差：样式、类名分散在字符串中，难以统一管理或主题化；
- ❌ 缺乏编译时验证：HTML 错误（如漏闭合标签）仅在运行时暴露。
? 进阶建议：封装为 Tag Helper 或局部视图
对于高频复用场景（如多处需健康状态图标），推荐进一步抽象：
- 创建轻量级 Tag Helper（如
）； - 或定义 _HealthIcon.cshtml 局部视图，接收 Model.Status 参数并集中处理逻辑与样式。
总结：Razor 的核心价值在于“C# 逻辑 + HTML 结构”的无缝融合。优先使用原生条件块而非 HTML 字符串拼接，既是安全性所需，也是构建健壮、可演化的前端模板的最佳实践。
