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

【问题标题】：Blazor pages: how to use BuildRenderTree to add dynamic contentBlazor 页面：如何使用 BuildRenderTree 添加动态内容
【发布时间】：2020-04-17 14:45:06
【问题描述】：

背景：我们为客户运营着数十个网站；都使用相同的代码库（ASP.NET WebForms），但设计完全不同。页面结构是从 SQL Server 元数据以编程方式生成的，使用诸如 Panel 之类的控件，这些控件被添加到 ASP.NET 页面的 Controls 集合中，并在呈现的 HTML 中变为 DIVs。

目标：我们希望最终迁移到 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 在工作量和所需管道方面似乎相似。

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

【问题讨论】：

标签： asp.net asp.net-core blazor-server-side dynamic-html

【解决方案1】：

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

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

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

【讨论】：

【解决方案2】：

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

我的标记：

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

PageBuilder 是一个继承自 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 之间是否有任何选择。

【讨论】：

【解决方案3】：

您也可以像这样将字符串呈现为 HTML：

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

@((MarkupString)content)


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

参见“原始 HTML”部分here

【讨论】：