在 .NET 6 Razor Pages 中，通过 JavaScript 动态添加含 asp-for 的输入框无法实现模型绑定，根本原因是 Tag Helper（如 asp-for）仅在服务器端渲染时生效，客户端 JS 插入的 asp-for 不会被解析为合法的 name 属性，导致 POST 时模型绑定失败。
在 .net 6 razor pages 中，通过 javascript 动态添加表单项时模型绑定失败的根本原因是：tag helper（如 asp-for）仅在服务器端渲染阶段执行，客户端 javascript 插入的 asp-for 属性不会被解析为 html 的 name 和 id，而模型绑定严格依赖符合约定的 name 属性（如 participation.participants[0].prenom），因此动态行数据无法提交至后端模型。
问题根源分析
Razor 页面中的 asp-for="Model.Property" 是一个服务端 Tag Helper，它在视图渲染完成前即被转换为标准 HTML 属性：
- asp-for="Participation.Participants[0].Prenom" → 渲染为
- 模型绑定器（Model Binder）在 POST 请求中仅识别 name 属性的值，并依据其命名结构（支持索引数组语法）自动映射到 List
或数组属性。
而 JavaScript 动态拼接的字符串：
html += '<input asp-for="Participation.Participants[' + rowCount + '].Prenom">';
实际输出的是字面量 —— 浏览器完全忽略 asp-for，且无 name 属性，自然无法绑定。
正确解决方案：手动构造合规的 name 属性
需在 JS 中显式生成符合模型绑定规范的 name（及推荐的 id），替代 asp-for：
✅ 正确写法（替换原 JS 中所有 asp-for 行）：
html += '<input type="text" class="form-control d-table-cell" html rowcount>'; html += '<span class="text-danger" data-valmsg-for="Participation.Participants[' + rowCount + '].Prenom" data-valmsg-replace="true"></span>'; html += '<input type="text" class="form-control d-table-cell" html rowcount>'; html += '<span class="text-danger" data-valmsg-for="Participation.Participants[' + rowCount + '].Nom" data-valmsg-replace="true"></span>';
⚠️ 注意事项：
- name 属性必须严格匹配模型路径，使用方括号 [] 表示列表索引（如 Participants[1].Prenom），这是 ASP.NET Core 模型绑定器识别集合的关键。
- id 推荐按 Property_NestedProperty_Index__PropertyName 格式生成（双下划线 __ 是 Razor 默认分隔符），以确保客户端验证（jQuery Validation Unobtrusive）能正确关联 。
- 验证消息 不再使用 asp-validation-for（服务端无效），改用 data-valmsg-for 属性，与 jQuery Validation Unobtrusive 兼容。
完整修正后的脚本示例
@section Scripts {
<script>
var rowCount = 1;
// 初始化：确保首行也使用标准 name/id（避免混合 asp-for 与手动 name）
$(document).ready(function () {
// 将初始行的 asp-for 替换为显式 name/id（可选，但推荐统一处理）
$('#newRow tr:eq(1) td:first input').attr({
'name': 'Participation.Participants[0].Prenom',
'id': 'Participation_Participants_0__Prenom'
});
$('#newRow tr:eq(1) td:nth-child(2) input').attr({
'name': 'Participation.Participants[0].Nom',
'id': 'Participation_Participants_0__Nom'
});
// 初始化验证消息容器 data-valmsg-for
$('#newRow tr:eq(1) td:first span').attr('data-valmsg-for', 'Participation.Participants[0].Prenom');
$('#newRow tr:eq(1) td:nth-child(2) span').attr('data-valmsg-for', 'Participation.Participants[0].Nom');
});
$("#addRow").click(function () {
var html = '';
html += '<tr id="inputRow">';
html += '<td>';
html += '<input type="text" class="form-control d-table-cell" ';
html += 'name="Participation.Participants[' + rowCount + '].Prenom" ';
html += 'id="Participation_Participants_' + rowCount + '__Prenom" />';
html += '<span class="text-danger" data-valmsg-for="Participation.Participants[' + rowCount + '].Prenom" data-valmsg-replace="true">';
html += '';
html += '<td>';
html += '<input type="text" class="form-control d-table-cell" ';
html += 'name="Participation.Participants[' + rowCount + '].Nom" ';
html += 'id="Participation_Participants_' + rowCount + '__Nom" />';
html += '<span class="text-danger" data-valmsg-for="Participation.Participants[' + rowCount + '].Nom" data-valmsg-replace="true">';
html += '';
html += '<td>';
html += '<button type="button" class="btn btn-danger remove-row">Supprimer';
html += '';
html += '';
$('#newRow').append(html);
rowCount++;
});
// 使用事件委托绑定删除按钮（因按钮动态生成）
$(document).on('click', '.remove-row', function () {
$(this).closest('tr').remove();
// rowCount-- 可选：若需重用索引，建议改用动态索引重排（见进阶提示）
});
</script>
}
进阶提示：保障索引连续性（可选优化）
若用户可能多次增删，rowCount 递增后删除会导致索引空缺（如 [0], [2], [3]），虽不影响绑定（绑定器跳过缺失索引），但不利于前端逻辑。更健壮做法是：
- 删除后调用 reindexRows()，遍历所有
，重写所有 name/id/data-valmsg-for 属性为连续索引 0, 1, 2...； - 或改用 GUID 作为索引（需后端配合 IList
或自定义模型绑定器）。 总结
动态添加 Razor Pages 表单项的核心原则是：放弃客户端渲染 asp-for，转而手动生成符合模型绑定命名规范的 name 属性。只要 name 值严格遵循 ParentCollection[Index].Property 格式，ASP.NET Core 模型绑定器即可无缝解析 List 集合。同时注意同步更新 id 和验证属性，确保客户端验证正常工作。此方案兼容 .NET 5/6/7/8，是构建动态表单的标准实践。
- 或改用 GUID 作为索引（需后端配合 IList
