Blazor：如何在C#绑定的布尔判断中嵌入HTML标签

你的示例代码会将HTML字符串直接转义输出，而不是渲染成实际的<i>元素——因为Blazor默认会对绑定的字符串内容进行HTML转义。以下是几种可行的解决方法：

方法一：使用Razor条件语句（推荐） #

直接在按钮模板内通过@if分支渲染不同内容，可读性最强，也最符合Blazor的开发习惯：

<button type="button">
    @if (SwitchBool)
    {
        Save
    }
    else
    {
        <i class="fa fa-pen"></i>
    }
</button>

@code {
    public bool SwitchBool { get; set; }
}

方法二：使用RenderFragment #

如果需要复用这段动态内容，可以定义一个返回RenderFragment的方法，通过C#逻辑返回不同的HTML片段：

<button type="button">
    @GetButtonContent()
</button>

@code {
    public bool SwitchBool { get; set; }

    private RenderFragment GetButtonContent() => SwitchBool 
        ? (RenderFragment)(@<text>Save</text>) 
        : (RenderFragment)(@<i class="fa fa-pen"></i>);
}

方法三：使用MarkupString（谨慎使用） #

若必须用三元表达式的形式，可以将内容包装为MarkupString，它会跳过HTML转义直接渲染内容。注意：此方法存在XSS风险，绝对不要用于渲染用户输入的内容：

<button type="button">
    @(SwitchBool ? (MarkupString)"Save" : (MarkupString)"<i class='fa fa-pen'></i>")
</button>

@code {
    public bool SwitchBool { get; set; }
}

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