Blazor中html标签的解析、富文本渲染

在Blazor中，如果在界面代码中直接写html格式的文本，是可以正确解析的，但是从数据库中获取到的数据如果让它也正确解析，就有点摸不着头脑了，无法实现对html文本的渲染了。

好在天无绝人之路啊，找到blazor中有个MarkupString，它可以用来解析html、显示富文本。

Blazor中的MarkupString是一种用于在Blazor应用程序中渲染HTML标记的机制。MarkupString允许开发者在C#代码中动态生成HTML内容，并通过Blazor的绑定语法将其呈现到页面上。使用MarkupString可以避免手动编写JavaScript代码，简化开发过程。

MarkupString的基本用法

在Blazor中，可以使用MarkupString来创建和渲染HTML内容。例如，可以在C#代码中定义一个包含HTML标记的字符串，并通过Razor语法将其绑定到页面元素上。

@code {
    private string htmlContent = @"<div>Hello, <b>World!</b></div>";
}
<div>@((MarkupString)htmlContent</div>

例如下面的例子是用来绑定时间线组件的，用来实现更新内容的换行

<Card >
    <HeaderTemplate>
        软件更新说明
    </HeaderTemplate>
    <BodyTemplate>
        <ul class="timeline">
            @foreach (var item in Books)
            {
                <li class="time-line-item">
                    <div class="time-line-item-tail"></div>
                    <div class="timeline-item-node-normal timeline-item-node is-icon">
                        <i class="timeline-item-icon fa-solid fa-fw fa-font-awesome text-danger"></i>
                    </div>

                    <div class="timeline-item-wrapper">
                        <div class="timeline-item-content">@item.标题</div>
                        <div style="line-height:10px;margin-top:10px;"></div>
                        <div role="alert" class="alert fade show alert-primary">
                            @((MarkupString)item.内容)
                        </div>
                    </div>
                </li>
            }
         

       </ul>
    </BodyTemplate>
</Card>

@((MarkupString)item.内容 将其转换为MarkupString并渲染到页面上，当用户从数据库中查询出数据时，时间线内容属性的值将自动更新，从而实现动态内容的展示。