ASP.NET Core Blazor 中 MarkupContent 拼接问题的技术解析

在 ASP.NET Core Blazor 开发中，开发者经常会遇到需要动态构建 HTML 内容的需求。最近有开发者反馈了一个关于 MarkupContent 拼接的有趣现象：在 InteractiveServer 模式下，尝试将多个 MarkupContent 片段拼接时，未闭合的 HTML 元素无法按预期工作。

问题现象

开发者尝试通过 RenderFragment 构建一个包含 alert div 和 h2 标题的组件。代码逻辑上，先添加一个开头的 div 标签，然后插入 h2 元素，最后闭合 div。理论上应该生成嵌套的 HTML 结构，但在 InteractiveServer 模式下实际输出却是平级结构。

技术原理分析

这种现象的根本原因在于 Blazor 对 MarkupString 的处理机制。MarkupString 被设计为必须代表完整的 HTML 片段，而不是可以任意拼接的 HTML 部分。Blazor 的渲染引擎会对每个 MarkupString 进行独立解析和验证，确保其结构完整性。

在 InteractiveServer 模式下，这种验证更为严格。当引擎检测到第一个 MarkupString 是一个未闭合的 div 标签时，会自动补全闭合标签以保证 HTML 结构的有效性，这就导致了后续内容被放置在 div 之外。

解决方案

对于需要构建复杂 HTML 结构的情况，推荐使用以下替代方案：

1. 使用完整的 HTML 片段：确保每个 MarkupString 都是完整的 HTML 结构
2. 采用 Blazor 的原生组件构建方式：通过 OpenElement/CloseElement 方法显式控制元素嵌套
3. 使用 Razor 组件模板：将重复使用的 HTML 结构封装为可重用组件

最佳实践

在实际开发中，应当避免依赖 HTML 字符串拼接来构建复杂 UI。Blazor 提供了丰富的组件模型和渲染API，这些原生方式不仅更可靠，还能带来更好的性能和可维护性。对于必须使用动态 HTML 的场景，建议：

• 确保每个动态片段都是完整的 HTML 结构
• 考虑使用第三方库如 Markdig 来处理复杂的 Markdown 转换
• 对于服务器端渲染，特别注意 HTML 的完整性验证

通过理解 Blazor 的渲染机制和采用正确的构建方式，开发者可以避免这类问题，构建出更加健壮的 Blazor 应用。