在 .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 += '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"></span>';

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"></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"></span>';
            html += '</td>';
            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"></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('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，是构建动态表单的标准实践。