Blazor渲染问题：拼接含未闭合HTML元素的MarkupString失效

我正在把旧WebForms应用重构为Blazor Interactive Server App（.NET 9），这个应用会读取并处理包含部分HTML标记和自定义内部标记的静态.htm模板文件，方便客户（实施合作伙伴）按需修改前端，把复杂代码和绑定逻辑藏在简易标签后面。处理完模板后，我在ProcessingControl.razor里写了下面的代码：

@((MarkupString)"<table><tr><td>")

@RenderProcessedControl // 对应渲染结果为"<label>My processed content</label>"

@((MarkupString)"</td></tr></table>")

@code {
// 用于构建控件的RenderFragment
private RenderFragment RenderProcessedControl() => builder =>
{
    builder.OpenComponent<MySpecialTagToBeTranslated>(0);
    builder.CloseComponent();
    ... etc
};
}

本来预期组件输出的<label>My processed content</label>会放在<td>标签里面，但浏览器最终渲染出来的结果却是：

<table><tr><td>

</td></tr></table>

<label>My processed content</label>

可行解决方案 #

方案1：用单个RenderFragment包裹完整结构 #

把所有HTML标签和自定义组件的渲染逻辑整合到同一个RenderFragment里，让Blazor一次性构建完整的DOM树，避免标签被拆分：

@RenderFullTable

@code {
    private RenderFragment RenderFullTable() => builder =>
    {
        // 依次打开table、tr、td标签
        builder.OpenElement(0, "table");
        builder.OpenElement(1, "tr");
        builder.OpenElement(2, "td");

        // 渲染自定义组件
        builder.OpenComponent<MySpecialTagToBeTranslated>(3);
        builder.CloseComponent();

        // 按顺序关闭所有标签
        builder.CloseElement(); // 关闭td
        builder.CloseElement(); // 关闭tr
        builder.CloseElement(); // 关闭table
    };
}

方案2：将组件输出转为MarkupString（仅适合无交互场景） #

如果你的MySpecialTagToBeTranslated组件不需要处理用户交互，只是输出静态HTML，可以提前把它的内容转为字符串，再和外层HTML合并成一个MarkupString：

@((MarkupString)$"<table><tr><td>{GetProcessedContent()}</td></tr></table>")

@code {
    private string GetProcessedContent()
    {
        // 这里模拟把组件输出转为HTML字符串的逻辑
        // 注意：如果组件有按钮、绑定事件等交互逻辑，这种方法会丢失交互能力
        return "<label>My processed content</label>";
    }
}

方案3：用嵌套组件封装结构 #

创建一个专门的容器组件来包裹表格结构，把需要渲染的内容作为子组件传递进去，这样结构更清晰，也方便复用：

<TableWrapper>
    <MySpecialTagToBeTranslated />
</TableWrapper>

@code {
    // 定义表格容器组件
    private class TableWrapper : ComponentBase
    {
        [Parameter] 
        public RenderFragment ChildContent { get; set; }

        protected override void BuildRenderTree(RenderTreeBuilder builder)
        {
            builder.OpenElement(0, "table");
            builder.OpenElement(1, "tr");
            builder.OpenElement(2, "td");
            // 渲染子内容
            builder.AddContent(3, ChildContent);
            // 关闭所有标签
            builder.CloseElement();
            builder.CloseElement();
            builder.CloseElement();
        }
    }
}

问题根源解释 #

Blazor会把每个顶级的@表达式（比如单独的MarkupString或RenderFragment）当作独立的渲染单元处理。当你把<td>的开始标签、RenderFragment、</td>结束标签拆成三个独立单元时，Blazor会分别渲染它们，浏览器的HTML解析器发现不完整的标签结构后，会自动修正，把RenderFragment的内容放到表格外面，就出现了你看到的结果。只有把相关的DOM结构和组件内容放在同一个渲染单元里，才能保证最终的DOM结构符合预期。

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