ASP.NET Core Razor @foreach中拼接data属性时显式表达式失效如何解决

你遇到的问题是Razor默认不会解析HTML属性名中间嵌入的Razor表达式，有两种稳定的实现方式：

方法1：使用@attributes动态构造属性（官方推荐） #

直接将动态属性放入字典后通过@attributes输出，兼容性最好：

@foreach (var order in Model.Orders)
{
    // 先构造动态属性名
    string dynamicAttrName = $"data-order-id-{order.Id}";
    <tr onclick="toggle(@order.Id)" @attributes="@new Dictionary<string, object> { [dynamicAttrName] = order.Id }">
        <td>foo</td>
    </tr>
}

方法2：将整个属性名作为Razor表达式输出 #

把动态属性名整体包裹在@()中作为显式表达式输出，写法更简洁：

@foreach (var order in Model.Orders)
{
    <tr onclick="toggle(@order.Id)" @($"data-order-id-{order.Id}")="@order.Id">
        <td>foo</td>
    </tr>
}

原写法失效原因 #

Razor的解析规则中，默认仅会识别属性值位置、或者属性名完整为表达式的Razor语法，属性名中间嵌入的@()会被识别为普通文本原样输出，所以无法得到预期结果。

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