Blazor 页面：如何使用 BuildRenderTree 添加动态内容

Question

背景：我们运行有几十个客户站点；都使用相同的代码库（ASP.NET WebForms）但设计完全不同。页面结构以编程方式从 SQL 服务器元数据生成，使用 Panel 等控件添加到 ASP.NET 页面的 Controls 集合，并成为 DIVs 在呈现 HTML.

Objective: 我们希望最终迁移到 ASP.NET CORE。但是，似乎没有等效于页面的控件集合。我能找到的最接近的东西是添加 Blazor 组件的 RenderTreeBuilder。

问题： 是否可以使用 BuildRenderTree 添加一个包含我们自制的 HTML 的组件（例如，包含 <body> 和 </body>?

我读过以下文章：

https://chrissainty.com/building-components-via-rendertreebuilder/

https://docs.microsoft.com/en-us/aspnet/core/blazor/components?view=aspnetcore-3.1#manual-rendertreebuilder-logic

... 并尝试添加 HTML 元素，但这非常麻烦，我想以编程方式为几乎整个页面生成 HTML，并将其作为一个添加RenderFragment（这个词正确吗？）。

这可能吗？有其他选择吗？

编辑：

@Henk 的回答，使用 MarkupString 结构，我的回答，使用 RenderTreeBuilder.AddMarkupContent 在所需的努力和管道方面似乎相似。

我应该考虑这两种方法的优缺点吗？

Answer 1

如果你只是想要HTML（普通的，死的）那么你不需要渲染树：

<h1>My Page</h1>
@MyHtmlComposer()

@code{
    private MarkupString MyHtmlComposer()
    {
        string html = "<p>Hello</p>";
        return new MarkupString(html);
    }
}

Answer 2

我没有遇到过 MarkupString 结构，所以@Henk 的回答真的很有帮助。我现在也遇到了 RenderTreeBuilder.AddMarkupContent 方法，所以我会提供这个作为替代答案：

我的标记：

@page "/"
<PageBuilder></PageBuilder>

PageBuilder 是一个 class 继承自 ComponentBase:

public class PageBuilder : ComponentBase
{
    protected override void BuildRenderTree(RenderTreeBuilder b)
    {
        base.BuildRenderTree(b);
        b.OpenElement(0, "div");
        b.AddMarkupContent(1, TheContent());
        b.CloseElement();
    }
    public string TheContent()
    {
        return "<div>This is the generated content</div>";
    }

我将稍微编辑一下我原来的问题，因为我想知道在这种方法和@Henk 之间是否有任何选择。

Answer 3

您还可以将字符串呈现为 HTML，如下所示：

@page "/test";
<h1>My Page</h1>

@((MarkupString)content)


@code{
    //Get content from Database
    string content = "<p>Hello</p>";
}

请参阅“原始 HTML”部分 here

Blazor 页面：如何使用 BuildRenderTree 添加动态内容

Blazor pages: how to use BuildRenderTree to add dynamic content

asp.net

dynamic-html

asp.net-core

blazor-server-side