ASP.NET Core Razor视图生成HTML时样式类拆分问题排查

嘿，来自比利时的朋友！很高兴能帮你解决这个问题😉

你遇到的情况很典型——生成的HTML里<i>标签的class被拆成了"fas"和fa-file=""，这说明Razor没有把action.Icon当成一个完整的字符串来渲染，反而把它解析成了多个HTML属性。

问题根源 #

最可能的原因有两个：

• ViewModel的Icon属性类型不对：如果Icon不是string类型，而是被错误地定义为匿名对象、动态类型或者其他非字符串类型（比如不小心赋值成new { fas = "fa-file" }），Razor会把对象的属性拆解成HTML标签的多个属性，就会出现你看到的情况。
• Razor解析时的歧义：极少数情况下，即使Icon是字符串，Razor也可能因为空格的存在错误拆分属性（虽然这种情况很少见）。

解决方案 #

1. 确认ViewModel的属性类型和赋值

首先检查你的DashboardIconAction类，确保Icon是string类型：

public class DashboardIconAction
{
    public string Icon { get; set; }
    // 其他属性...
}

然后确认赋值时是直接给字符串"fas fa-file"，而不是任何对象：

// 正确的赋值方式
var action = new DashboardIconAction 
{ 
    Icon = "fas fa-file",
    // 其他属性赋值
};

2. 强制Razor解析为完整字符串

如果确认类型和赋值都没问题，那可以在Razor视图中用括号包裹变量，明确告诉Razor这是一个完整的字符串值：

<div>
    @foreach (var action in Model.DashboardIconActions)
    {
        <a><i class="@(action.Icon)"></i></a>
    }
</div>

或者用字符串插值的方式强化解析：

<i class="@($"{action.Icon}")"></i>

这样修改后，Razor就会正确渲染出<i class="fas fa-file"></i>，Font Awesome图标就能正常显示啦！

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