如何在C#代码后置中实现带HTML与事件的Radzen Blazor Tooltip

核心问题原因 #

Radzen Tooltip服务的Open方法要求传入RenderFragment<TooltipService>类型的内容参数，这个泛型RenderFragment无法直接在纯C#代码后置文件中用@<div>...</div>的Razor片段语法声明，直接传HTML字符串会被编码为纯文本，非泛型RenderFragment会出现类型不匹配错误。

方案1：抽离独立内容组件（推荐，维护成本最低） #

不需要硬在C#文件里拼接渲染树，把Tooltip内容抽成独立Blazor组件即可完美适配代码后置模式：

1. 新建独立Razor组件（例如命名为EqTestTooltipContent.razor），写入原本要放在Tooltip里的渲染逻辑，通过参数接收数据和事件回调：

@* 替换成你自己项目中VirtualizedCell类的命名空间 *@
@using YourProject.Models
<div style="font-size: 11px">
    <ul class="no-bullets ps-1 mb-0">
        @foreach (var eqTest in Cell.EquivalentTests)
        {
            <li class="link-hover">
                <a href="@eqTest.Key"
                   @onclick="@(() => JumpCallback.InvokeAsync(eqTest.Key))"
                   @onclick:preventDefault
                   class="px-1 text-decoration-none">@eqTest.Value</a>
            </li>
        }
    </ul>
</div>

@code {
    [Parameter, EditorRequired]
    public VirtualizedCell Cell { get; set; } = default!;

    [Parameter]
    public EventCallback<string> JumpCallback { get; set; }
}

2. 在代码后置的.cs文件中，通过RenderTreeBuilder构造上述组件的渲染片段，显式转换为要求的RenderFragment<TooltipService>类型传入即可：

using Microsoft.AspNetCore.Components;
using Radzen;
using Radzen.Blazor;

public partial class YourTableComponent : ComponentBase
{
    [Inject]
    protected TooltipService TooltipService { get; set; } = default!;

    private void ShowEqTestTooltip(ElementReference triggerElement, VirtualizedCell cell, TooltipOptions? options = null)
    {
        TooltipService.Open(triggerElement, (RenderFragment<TooltipService>)(_ => builder =>
        {
            builder.OpenComponent<EqTestTooltipContent>(0);
            builder.AddAttribute(1, nameof(EqTestTooltipContent.Cell), cell);
            builder.AddAttribute(2, nameof(EqTestTooltipContent.JumpCallback), 
                EventCallback.Factory.Create<string>(this, VirtualizedJump));
            builder.CloseComponent();
        }), options);
    }

    // 原有的跳转逻辑保持不变
    private void VirtualizedJump(string testKey)
    {
        // 自定义跳转逻辑
    }
}

3. 页面上的Tooltip触发元素代码不需要做任何修改，原有绑定逻辑可直接复用。
   这种方案的渲染逻辑和你原本写在Razor页面里的完全一致，样式、事件绑定、动态循环都不会有兼容性问题，后续调整Tooltip内容只需要修改独立的razor组件，不需要维护复杂的渲染树代码。

方案2：纯C#手写RenderTree（不推荐，维护成本高） #

如果不想新增独立组件，也可以完全在C#代码中通过RenderTreeBuilder逐节点构造渲染内容，不需要依赖Razor语法：

private void ShowEqTestTooltip(ElementReference triggerElement, VirtualizedCell cell, TooltipOptions? options = null)
{
    TooltipService.Open(triggerElement, (RenderFragment<TooltipService>)(_ => builder =>
    {
        // 外层容器div
        builder.OpenElement(0, "div");
        builder.AddAttribute(1, "style", "font-size: 11px");

        // 列表ul
        builder.OpenElement(2, "ul");
        builder.AddAttribute(3, "class", "no-bullets ps-1 mb-0");

        // 序列值从4开始递增，保证渲染稳定性
        int seq = 4;
        foreach (var eqTest in cell.EquivalentTests)
        {
            // li节点
            builder.OpenElement(seq++, "li");
            builder.AddAttribute(seq++, "class", "link-hover");

            // a链接节点
            builder.OpenElement(seq++, "a");
            builder.AddAttribute(seq++, "href", eqTest.Key);
            builder.AddAttribute(seq++, "class", "px-1 text-decoration-none");
            // 绑定点击事件
            builder.AddAttribute(seq++, "onclick", 
                EventCallback.Factory.Create<MouseEventArgs>(this, () => VirtualizedJump(eqTest.Key)));
            builder.AddAttribute(seq++, "onclick:preventDefault", true);
            // 链接文本
            builder.AddContent(seq++, eqTest.Value);

            builder.CloseElement(); // 闭合a
            builder.CloseElement(); // 闭合li
        }

        builder.CloseElement(); // 闭合ul
        builder.CloseElement(); // 闭合外层div
    }), options);
}

注意：手写RenderTree时不要在循环中用迭代变量作为序列值，必须保证同一渲染块内序列值稳定递增，否则会出现diff渲染异常、事件绑定错位的问题。

常见无效方案说明 #

• 直接传入拼接好的HTML字符串：Tooltip服务默认会对字符串做HTML编码，就算绕过编码，Blazor也无法编译解析字符串里的@onclick绑定语法，事件完全不会生效。
• 构造非泛型RenderFragment传入：Open方法的重载要求必须是泛型的RenderFragment<TooltipService>，需要显式做类型转换，委托参数里的TooltipService实例如果不需要可以直接丢弃（用_占位即可）。

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