如何将Razor循环生成的元素ID传给JS实现逐行SSN格式自动补全？

核心问题根因 #

• 重复DOM id冲突：硬编码id="maskedSSN"会让循环渲染出多个同id的输入框，受DOM规范约束，选择器匹配重复id时只会返回页面中第一个出现的元素，因此只有第一行能触发格式化逻辑
• 动态id无需硬编码匹配：asp-for生成的带索引id（如RecordList_0__SSN）是框架默认输出，不需要在JS中手动拼接、逐行匹配动态id，通过类选择器+事件委托即可覆盖所有循环渲染的元素

视图代码改造 #

删除所有硬编码的重复id，为SSN输入框添加统一的类标识，同时保留原有的asp-for模型绑定逻辑，确保表单提交时数据能正常绑定到后端模型：

@* 表格容器示例 *@
<table class="table">
    <tbody>
        @for (int i = 0; i < Model.RecordList.Count; i++)
        {
            <tr>
                <td>
                    @* 改造前：硬编码重复id *@
                    @* <input id="maskedSSN" asp-for="@Model.RecordList[i].SSN" /> *@

                    @* 改造后：删除重复id，添加统一类名 *@
                    <input class="form-control ssn-input" 
                           asp-for="@Model.RecordList[i].SSN" 
                           placeholder="xxx-xx-xxxx" />
                </td>
            </tr>
        }
    </tbody>
</table>

注：asp-for会自动生成正确的name、id、数据校验等属性，无需手动追加索引值修改id。

适配循环的格式化脚本 #

采用事件委托模式绑定输入事件，将事件绑定在页面固定的父级容器上，一次绑定即可覆盖所有静态循环生成、甚至后续动态新增的行元素：

$(document).on('input', '.ssn-input', function () {
    const $currentInput = $(this);
    // 提取输入内容中的纯数字部分，自动过滤非数字字符
    let numericValue = $currentInput.val().replace(/\D/g, '');
    // 限制最多输入9位数字，符合SSN的长度规则
    if (numericValue.length > 9) {
        numericValue = numericValue.substring(0, 9);
    }
    // 按xxx-xx-xxxx规则拼接连字符
    let formattedValue = '';
    if (numericValue.length > 5) {
        formattedValue = `${numericValue.substring(0, 3)}-${numericValue.substring(3, 5)}-${numericValue.substring(5)}`;
    } else if (numericValue.length > 2) {
        formattedValue = `${numericValue.substring(0, 3)}-${numericValue.substring(3)}`;
    } else {
        formattedValue = numericValue;
    }
    // 将格式化后的值写回当前输入框
    $currentInput.val(formattedValue);
});

常见误区规避 #

• 不要硬编码带索引的id（如id="maskedSSN_@i"）：这种方式虽然能解决id重复问题，但后续如果需要动态增删表格行，会大幅提升JS维护成本，且没有必要
• 不要硬匹配asp-for生成的动态id值：该类id的命名规则由框架实现决定，不同版本的ASP.NET Core可能存在调整，硬匹配的代码长期来看易失效
• 不要直接对.ssn-input类做单次事件绑定：如果页面存在后续动态生成的行，直接绑定的方式无法覆盖新生成的元素，事件委托方案可避免该问题

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