在 .NET 6 Razor Pages 中，使用 JavaScript 动态添加含索引的表单控件（如 Participants[1].Prenom）时，若直接拼接 asp-for 标签助手，会导致后端模型绑定失败——因为 asp-for 是服务端 Razor 编译特性，无法在客户端 JS 运行时生效。
在 .net 6 razor pages 中，使用 javascript 动态添加含索引的表单控件（如 `participants[1].prenom`）时，若直接拼接 `asp-for` 标签助手，会导致后端模型绑定失败——因为 `asp-for` 是服务端 razor 编译特性，无法在客户端 js 运行时生效。
Razor Pages 的模型绑定机制完全依赖于 HTML 表单字段的 name 属性（而非 id 或自定义属性）。当使用 asp-for="Model.Property" 时，Razor 在服务器端渲染阶段会自动将其转换为标准的 ，并注入初始值与验证元数据。但JavaScript 在浏览器中动态生成的 HTML 不经过 Razor 引擎处理，因此写入 asp-for="..." 不会产生任何实际效果——它只是作为普通字符串保留在 DOM 中，既不会生成 name，也不会触发验证标签（asp-validation-for）的渲染。
要使动态添加的输入项正确参与模型绑定，必须手动构造符合 ASP.NET Core 模型绑定规范的 name 属性值。对于嵌套集合（如 Participation.Participants[i].Prenom），name 必须严格匹配模型路径，且索引需为连续、无间隙的整数（推荐从 0 开始）。
✅ 正确做法：在 JavaScript 中显式设置 name 属性，而非依赖 asp-for：
<script>
var rowCount = 1;
$("#addRow").click(function () {
var html = '';
html += '<tr class="dynamic-row">'; // 使用 class 替代重复 id
html += '<td>';
html += '<input type="text" class="form-control d-table-cell" ' +
'name="Participation.Participants[' + rowCount + '].Prenom" />';
html += '<span class="text-danger field-validation-valid" ' +
'data-valmsg-for="Participation.Participants[' + rowCount + '].Prenom" ' +
'data-valmsg-replace="true"></span>';
html += '</td>';
html += '<td>';
html += '<input type="text" class="form-control d-table-cell" ' +
'name="Participation.Participants[' + rowCount + '].Nom" />';
html += '<span class="text-danger field-validation-valid" ' +
'data-valmsg-for="Participation.Participants[' + rowCount + '].Nom" ' +
'data-valmsg-replace="true"></span>';
html += '</td>';
html += '<td>';
html += '<button type="button" class="btn btn-danger remove-row">Supprimer</button>';
html += '</td>';
html += '</tr>';
$('#newRow').append(html);
rowCount++;
});
// 使用事件委托处理动态按钮
$(document).on('click', '.remove-row', function () {
$(this).closest('.dynamic-row').remove();
// 注意：删除后无需递减 rowCount，避免索引空洞；绑定依赖 name 值本身，非计数器
});
</script>⚠️ 关键注意事项：
- name 属性是唯一绑定依据：确保格式为 Participation.Participants[N].PropertyName（N 为整数，建议保持连续，但非强制；ASP.NET Core 支持稀疏索引，只要 name 可解析即可）。
- 避免重复 id：原代码中 id="removeRow" 在多行中重复，违反 HTML 规范。应改用 class="remove-row" 并通过事件委托绑定。
- 客户端验证需手动补全：asp-validation-for 无法动态生成，需手写 data-valmsg-for 和 data-valmsg-replace 属性，并确保引用了 jquery.validate.unobtrusive.js。
- 服务端仍需防御性验证：即使前端构造正确，也必须在 OnPostAsync() 中检查 ModelState.IsValid，防止恶意请求绕过前端逻辑。
- 初始化首行建议服务端渲染：第一行（[0]）可保留 asp-for 渲染以利用服务端值/验证；后续行统一由 JS 构造 name，保证一致性。
总结：Razor 的 asp-* 标签助手仅在服务端执行，动态 DOM 操作必须回归 HTML 原生规范。掌握 name 属性的命名规则与模型绑定契约，是实现动态表单与强类型模型无缝协作的核心前提。
