Blazor QuickGrid中如何将字符串渲染值转为MarkupString

我需要让数据库返回的带HTML标签的字符串在QuickGrid中渲染为HTML（比如让<strong>实际显示为粗体文本等）。我尝试将模型类改为使用MarkupString而非String，但无效；也尝试内联转换值：<PropertyColumn Property="@(records => ((MarkupString)records.Notes))" />，同样无效。不过静态MarkupString在TEST列中可正常显示，附上代码，望获帮助！

原代码 #

Razor部分

<QuickGrid Items="debugHistory.AsQueryable()" Virtualize="true" PageSize="20" Pagination="state" Class="table table-striped table-hover">
    <PropertyColumn Property="@(records => records.SerialNumber)" Sortable="true" Title="Serial Number">
        <ColumnOptions>
            <div class="d-flex flex-row">
                <input type="search" @bind="serialNumberFilter" @bind:event="oninput" autofocus class="form-control form-control-sm" />
            </div>
        </ColumnOptions>
    </PropertyColumn>
    <PropertyColumn Property="@(records => records.Technician)" Sortable="true" />
    <PropertyColumn Property="@(records => ((MarkupString)records.Notes))" />
    <PropertyColumn Property="@(records => records.Created)" Sortable="true" />
    <TemplateColumn Title="TEST">
        @((MarkupString)myNote)
    </TemplateColumn>
</QuickGrid>
<Paginator State="state" />

代码逻辑部分

@code {
    string myNote = "<p>New laptops 09/07/2022 <strong>test</strong></p>";
    private string serialNumberFilter = string.Empty;
    public required IEnumerable<DebugHistory> debugHistory;

    [Inject]
    public required IDebugService DebugServices { get; set; }

    protected override async Task OnInitializedAsync()
    {
        await this.GetHistory();
    }

    protected async Task GetHistory()
    {
        debugHistory = await DebugServices.GetHistoricalRecords();
        debugHistory = from a in debugHistory
                            .Where(a => a.SerialNumber!.Contains(serialNumberFilter))                                                        
                       select new DebugHistory()
                           {
                               SerialNumber = a.SerialNumber,
                               Technician = a == null ? "(no data)" : a.Technician,
                               Notes = a == null ? "(no data)" : a.Notes,
                               Created = a.Created
                           };
    }

    PaginationState state = new PaginationState { ItemsPerPage = 20 };
}

解决方案 #

核心原因是PropertyColumn会自动对所有内容做HTML编码，即便转换为MarkupString也会被覆盖处理。要实现HTML渲染，必须改用TemplateColumn自定义单元格内容：

修改后的QuickGrid关键代码：

<!-- 替换原有的Notes列PropertyColumn为TemplateColumn -->
<TemplateColumn Title="Notes">
    @((MarkupString)context.Notes)
</TemplateColumn>

完整修改后的Razor代码：

<QuickGrid Items="debugHistory.AsQueryable()" Virtualize="true" PageSize="20" Pagination="state" Class="table table-striped table-hover">
    <PropertyColumn Property="@(records => records.SerialNumber)" Sortable="true" Title="Serial Number">
        <ColumnOptions>
            <div class="d-flex flex-row">
                <input type="search" @bind="serialNumberFilter" @bind:event="oninput" autofocus class="form-control form-control-sm" />
            </div>
        </ColumnOptions>
    </PropertyColumn>
    <PropertyColumn Property="@(records => records.Technician)" Sortable="true" />
    <TemplateColumn Title="Notes">
        @((MarkupString)context.Notes)
    </TemplateColumn>
    <PropertyColumn Property="@(records => records.Created)" Sortable="true" />
    <TemplateColumn Title="TEST">
        @((MarkupString)myNote)
    </TemplateColumn>
</QuickGrid>
<Paginator State="state" />

说明 #

• TemplateColumn支持自定义单元格渲染逻辑，通过context访问当前行数据，转换为MarkupString后Blazor会直接解析HTML标签而非编码。
• 无需修改模型类属性类型，在模板内做类型转换即可。
• 其他纯文本列可保留PropertyColumn，享受其自带的排序等便捷功能。

内容的提问来源于stack exchange，提问作者Wilock