时间戳

首页 > 解决方案 > 在 HTML 字符串中动态替换 Blazor 组件

c# - 在 HTML 字符串中动态替换 Blazor 组件

问题描述

我想在从服务接收的一些 HTML 文本中动态替换 Blazor 客户端组件。

例如，假设我收到以下字符串：

string htmlText = @"
<h1>Heading with {my component} inside it</h1>
";

我想用组件替换大括号内的所有文本，该组件MyComponent接受一个参数Text并呈现为<em>@Text</em>。

最后我想要得到的是：

<h1>Heading with <em>my component</em> inside it</h1>

我得到的最接近的方法是将字符串拆分为 HTML 部分和应该用组件替换的部分（如下SplitText = htmlText.Split('{', '}');所示：），然后在 Blazor 页面内的 for 循环中呈现它们：

@for (int i = 0; i < SplitText.Length; i++)
{
    if (i % 2 == 0)
    {
        @((MarkupString)SplitText[i])
    }
    else
    {
        <MyComponent Text="@SplitText[i]" />
    }
}

然而，这在 Chrome 中呈现为：

<h1>Heading with </h1>
<em>my component</em>
inside it

我也尝试过使用，RenderFragment但我最终获得了类似的结果。

编辑：

我将添加一些上下文来澄清我正在尝试做的事情。也可能有一些我没有想到的更好的方法，也许解释一下这样做的目的可以帮助有人指出我更好的方向。

这旨在构建一个 Web 应用程序，用户可以在其中使用将输出 HTML（或 Markdown 可能）的富编辑器编写自己的笔记（某种程度）。编辑器还将允许插入一些特殊标签以链接到他们编写的其他笔记。这些是示例中的大括号。文本将存储在数据库中并事先进行验证，因此无需处理损坏的语法（例如，大括号内的 HTML 标记或嵌套的大括号）。当文本将被渲染时，特殊标签应被相关组件替换，该组件生成链接并处理更多功能（例如，在鼠标悬停时弹出注释的预览）。因此，这将比<em>示例中看到的仅添加标签更复杂。

我认为这可以用 JavaScript 很容易地完成，但首先我想看看是否可以用纯 Blazor 来完成，因为它是一个非常有趣的新框架。

标签： c#dynamicblazorblazor-client-side

解决方案

使用 MarkupString 有点棘手，因为 Blazor 引擎会自动关闭标签，并忽略没有相关开始标签的结束标签。这就是您获得上面看到的输出的方式。

由于该服务正在提供包含标签的字符串，因此您可以将其与内部文本一起提供给组件，并执行一些智能字符串工作以获取将正确呈现的标记字符串。

MyComponent.razor

@if (MarkupText != null )
{
    @((MarkupString)$"{FirstHalf}{InnerText}{SecondHalf}")
}

@code{

    [Parameter] public string MarkupText { get; set; }

    // Inner Text set with starting value, can be left blank if needed
    [Parameter] public string InnerText { get; set; } = "";

    public string FirstHalf => MarkupText.Substring(0, MarkupText.IndexOf("{"));
    public string SecondHalf => MarkupText.Substring(MarkupText.IndexOf("}") + 1);
}

然后将它与上面的 htmlText 一起使用：

<MyComponent MarkupText="@htmlText" InnerText="<em>Something</em>" />

输出变为：

里面有东西

这是一个简单的版本，应该可以让您有所了解，但关键是您要将标记字符串设置为一个连续的字符串，然后MarkupString一次性将其转换为，以便编译器正确放置标记。使用同样的方法，您可以扩展上述想法，进行一些非常繁重的字符串操作，并尽可能多地构建内容。

附带说明一下，如果服务只能提供带有花括号的文本而不提供标签，那么您也可以非常轻松地使用该RenderFragment概念构建嵌套组件，并且可以更好地分离内容和表示。通过接收一个没有标签的字符串，然后像我展示的那样拆分它，您只需要一个外部组件来获取字符串，拆分它，并将第一和第二部分相应地放置在子组件周围，Blazor 会以您期望的方式呈现它，根本不需要 MarkupString。标签将位于外部组件中。不确定您对该服务输出有多少控制权，但这是需要考虑的事情。

推荐阅读