如何在Razor视图中实现asp-for动态绑定以生成正确ID？

问题场景 #

在Razor视图中编写循环生成输入框的代码，期望每个输入框的ID为Tier1Score、Tier2Score等，但实际生成的ID仅为Tier，代码如下：

@for (var i = 1; i < 5; i++)
{
    var Tier = $"Tier{i}Score";
    <div class="col-12 mt-2">
        <div class="row">
            <div class="col-2">
                <label>@i</label>
            </div>
            <div class="col-md col-6">
                <div class="d-flex align-items-baseline">
                    <label>@localizer[$"Label_Tier{i}Description"]</label>
                    <i class="fas fa-info-circle pl-2 cursor-pointer tooltip-ico" data-toggle="tooltip" data-placement="right" title="@localizer[$"Tooltip_Tier{i}Score"]"></i>
                </div>
            </div>
            <div class="col-md col-4">
                <input asp-for="@Tier" type="text" class="line-input form-control" maxlength="4" autocomplete="off" />
            </div>
        </div>
    </div>
}

问题原因 #

asp-for="@Tier"中的@Tier是字符串变量，但Razor的asp-for标签助手会将其解析为变量名（即Tier），而非变量的实际值（如Tier1Score），因此生成的ID和name属性都为Tier。

解决方案 #

方法1：手动指定ID、Name和Value属性

直接放弃asp-for，手动设置输入框的id、name和value属性，确保与Model中的属性对应：

@for (var i = 1; i < 5; i++)
{
    var tierPropertyName = $"Tier{i}Score";
    var tierValue = Model.GetType().GetProperty(tierPropertyName)?.GetValue(Model)?.ToString();
    <div class="col-12 mt-2">
        <div class="row">
            <div class="col-2">
                <label>@i</label>
            </div>
            <div class="col-md col-6">
                <div class="d-flex align-items-baseline">
                    <label>@localizer[$"Label_Tier{i}Description"]</label>
                    <i class="fas fa-info-circle pl-2 cursor-pointer tooltip-ico" data-toggle="tooltip" data-placement="right" title="@localizer[$"Tooltip_Tier{i}Score"]"></i>
                </div>
            </div>
            <div class="col-md col-4">
                <input id="@tierPropertyName" name="@tierPropertyName" type="text" class="line-input form-control" maxlength="4" autocomplete="off" value="@tierValue" />
            </div>
        </div>
    </div>
}

方法2：使用表达式树构建asp-for的绑定表达式

通过表达式树动态创建属性绑定，让asp-for正确识别目标属性名，同时保留标签助手的其他功能（如验证、模型绑定）：

@using System.Linq.Expressions

@for (var i = 1; i < 5; i++)
{
    var tierPropertyName = $"Tier{i}Score";
    var propertyExpr = Expression.Property(Expression.Constant(Model), tierPropertyName);
    <div class="col-12 mt-2">
        <div class="row">
            <div class="col-2">
                <label>@i</label>
            </div>
            <div class="col-md col-6">
                <div class="d-flex align-items-baseline">
                    <label>@localizer[$"Label_Tier{i}Description"]</label>
                    <i class="fas fa-info-circle pl-2 cursor-pointer tooltip-ico" data-toggle="tooltip" data-placement="right" title="@localizer[$"Tooltip_Tier{i}Score"]"></i>
                </div>
            </div>
            <div class="col-md col-4">
                <input asp-for="@propertyExpr" type="text" class="line-input form-control" maxlength="4" autocomplete="off" />
            </div>
        </div>
    </div>
}

说明 #

两种方法都能生成预期的id="Tier1Score"、id="Tier2Score"等属性，方法2更贴合ASP.NET Core的模型绑定机制，能保留asp-for带来的验证、错误提示等功能；方法1更直接，适合不需要额外标签助手功能的场景。

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