如何在Blazor中正确赋值RenderFragment以动态渲染HTML？

方法一：正确给RenderFragment赋值 #

RenderFragment是Blazor的渲染委托，并非字符串类型，不能直接赋值HTML字符串。你需要通过RenderTreeBuilder来构建对应的HTML元素：

<div>@att</div>

@code {
    [Parameter]
    public RenderFragment? att { get; set; }

    protected override void OnInitialized()
    {
        // 构建RenderFragment实例
        att = builder =>
        {
            // 开启input元素，参数为序列ID、标签名
            builder.OpenElement(0, "input");
            // 添加type属性
            builder.AddAttribute(1, "type", "text");
            // 添加value属性
            builder.AddAttribute(2, "value", "hola");
            // 闭合元素
            builder.CloseElement();
        };
    }
}

方法二：渲染动态HTML字符串（适合外部获取的HTML内容） #

如果你的HTML内容是动态字符串（比如从接口、数据库读取），可以使用MarkupString类型，让Blazor直接渲染HTML而非转义显示：

<div>@rawHtml</div>

@code {
    private MarkupString rawHtml;

    protected override void OnInitialized()
    {
        // 将HTML字符串转换为MarkupString
        rawHtml = new MarkupString("<input type=\"text\" value=\"hola\" />");
    }
}

注意事项 #

• 使用MarkupString时必须确保HTML内容安全，避免渲染未过滤的用户输入，防止XSS攻击。
• RenderFragment更适合在代码中构建Blazor组件或原生HTML元素，能更好地与Blazor渲染系统集成，支持事件绑定等交互逻辑。

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