Blazor新手问题：条件渲染带ID参数的HTML标签时出现双引号包裹异常

DevOps 小满

2026-4-30

解决Blazor中标签ID属性无法正常生效的问题

嘿，作为Blazor新手遇到这个问题很正常，我来帮你捋清楚问题出在哪，以及怎么解决：

你的问题根源在于直接拼接HTML字符串并通过@:输出，这种方式会把整个内容当作纯文本处理，Blazor会自动转义特殊字符，所以最终渲染出来的是被双引号包裹的文本，而不是真正的HTML元素。

这里给你两种更符合Blazor规范的解决方案：

方案一：条件渲染+直接属性绑定

这是最简单直接的写法，利用Blazor的条件判断和属性绑定机制，直接渲染符合条件的<span>元素：

@if (!string.IsNullOrEmpty(Tooltip))
{
    <span id="@ID">Show This</span>
}

@code {
    [Parameter] public string ID { get; set; }
    [Parameter] public string Tooltip { get; set; }
}

当Tooltip不为空时，Blazor会正常渲染带有id="@ID"属性的<span>标签，完全不会出现转义问题。

方案二：动态属性集合（适合多属性场景）

如果你的组件需要根据条件添加多个属性（比如同时加id和title），可以用@attributes绑定一个属性字典：

@if (!string.IsNullOrEmpty(Tooltip))
{
    <span @attributes="@SpanAttributes">Show This</span>
}

@code {
    [Parameter] public string ID { get; set; }
    [Parameter] public string Tooltip { get; set; }

    private Dictionary<string, object> SpanAttributes => new()
    {
        { "id", ID },
        // 可以顺便把Tooltip绑定到title属性，实现原生提示效果
        { "title", Tooltip }
    };
}

这种方式灵活性更高，适合需要动态控制多个HTML属性的场景。