ASP.NET Core 6 MVC全局自动为Razor HTML元素添加唯一标识

开发ASP.NET Core 6 MVC应用时，需要全局自动为所有HTML元素添加唯一标识id2，要求：

• 无需手动插入id属性
• 标识在请求间保持一致（刷新页面后id2不变）
• 循环内生成的元素需拥有唯一的id2

示例Razor代码：

<div>
    @for(int i = 0; i < 3; i++)
    {
        <p>Hello world!...<p>
    }
</div>

期望渲染结果：

<div id2="somerandomid1">
<p id2="somerandomid1_1">Hello world!...<p>
<p id2="somerandomid1_2">Hello world!...<p>
<p id2="somerandomid1_3">Hello world!...<p>
</div>

尝试使用全局TagHelper实现，但循环内的所有元素生成了相同的UniqueId，导致id2重复，代码如下：

[HtmlTargetElement("*")]
public class GlobalTagHelper : TagHelper
{
    private static readonly string[] avoid = new string[]
    {
        "html",
        "link",
        "script",
        "head",
        "meta",
        "title",
    };

    public override void Process(TagHelperContext context, TagHelperOutput output)
    {
        if (avoid.Contains(context.TagName))
        {
            return;
        }    
       
        output.Attributes.Add("id2", context.UniqueId);
    }
}

循环内的同一份标签代码在Razor编译阶段会被视为同一个TagHelper模板实例，因此context.UniqueId是编译时生成的固定值，运行时每次渲染循环元素时，该值不会改变，最终导致循环内所有元素的id2重复。

修改TagHelper，通过父元素的标识结合子元素的位置索引生成唯一id2，同时利用TagHelperContext.Items传递上下文信息，确保循环内元素的标识唯一且请求间一致：

[HtmlTargetElement("*")]
public class GlobalTagHelper : TagHelper
{
    private static readonly string[] _avoidTags = new string[]
    {
        "html", "link", "script", "head", "meta", "title"
    };

    private const string ChildCounterKey = "__ChildElementCounter";

    public override void Process(TagHelperContext context, TagHelperOutput output)
    {
        if (_avoidTags.Contains(context.TagName, StringComparer.OrdinalIgnoreCase))
        {
            return;
        }

        string elementId = context.UniqueId;

        // 从上下文获取父元素的id2，若存在则结合索引生成当前元素id
        if (context.Items.TryGetValue(typeof(GlobalTagHelper), out var parentIdObj) && parentIdObj is string parentId)
        {
            int counter = context.Items.TryGetValue(ChildCounterKey, out var counterObj) && counterObj is int c ? c : 1;
            elementId = $"{parentId}_{counter}";
            context.Items[ChildCounterKey] = counter + 1;
        }

        output.Attributes.Add("id2", elementId);

        // 将当前元素id存入上下文，供子元素使用
        context.Items[typeof(GlobalTagHelper)] = elementId;
    }
}

1. 上下文传递：通过TagHelperContext.Items存储父元素的id2和子元素计数器，确保子元素能基于父标识生成唯一id
2. 唯一标识生成：父元素使用编译时固定的context.UniqueId，子元素在父标识基础上添加递增索引，既保证请求间一致，又避免循环内重复
3. 标签过滤：跳过指定的无需添加标识的HTML标签，避免干扰页面基础结构
4. 全局生效：在_ViewImports.cshtml中添加@addTagHelper *, 你的程序集名称，即可让TagHelper全局作用于所有视图

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