在C# Razor CSHTML中如何动态拼接生成自定义data属性名称

方法1：使用Razor显式表达式（最简便） #

• 核心是用@()包裹动态变量，明确告诉Razor这部分是要解析的动态内容，避免和静态字符串拼接时的解析歧义
• 示例代码：

@* 遍历TempData生成带动态data属性的div *@
@foreach (string key in TempData.Keys)
{
    <div hidden 
         data-message-@(key.ToLowerInvariant())="@TempData[key]"
    ></div>
}

• 渲染效果示例：如果key为Key1，最终输出的HTML为 <div hidden data-message-key1="My first value"></div>，完全符合需求。

方法2：使用属性字典构造（适合多动态属性场景） #

如果需要批量生成多个动态属性，可以提前构造属性字典，通过Razor内置的@attributes方法批量绑定：

@foreach (string key in TempData.Keys)
{
    var divAttrs = new Dictionary<string, object>
    {
        {"hidden", string.Empty},
        {$"data-message-{key.ToLowerInvariant()}", TempData[key]}
    };
    <div @attributes(divAttrs)></div>
}

前端jQuery取值说明 #

生成的动态data属性可以直接通过jQuery的data()方法读取，jQuery会自动处理中划线命名到驼峰命名的转换：

// 读取Key1对应的值
const value1 = $('div').data('message-key1');
// 也可以用驼峰写法
const value1 = $('div').data('messageKey1');

注意事项 #

• 动态拼接的属性名建议统一转为小写，避免HTML属性大小写不敏感带来的取值匹配问题
• 如果动态变量包含特殊字符，建议提前做替换处理，保证符合HTML属性命名规范

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