ASP.NET MVC中JS获取Html.BeginForm()表单值显示undefined如何解决

点击Add按钮拿不到输入值、后台接收不到List数据，是代码存在5个明确错误：

• 取值逻辑写错：@Html.TextBoxFor(m => m[counter].Name)渲染出的input id/name不是Name/Age，默认会生成[0].Name、[0].Age格式的属性，你用$('#Name')根本选不到输入框元素，调用.val()自然返回undefined。
• 动态生成的input命名不符合MVC模型绑定规则：绑定List<Student>类型时，要求表单元素name格式为[索引].属性名，你写的studentModels[count].Name前缀和模型不匹配；且Age输入框把name属性错写成了Age属性，后台无法识别这个字段。
• Razor代码块语法错误：你把td标签、counter++逻辑都包在了@{ }服务端代码块里，Razor会把这些标签当C#代码执行，根本渲染不出正确的初始输入行。
• DOM结构错误：tbody标签没有写闭合标签</tbody>，反而多写了一个开标签<tbody>，会导致动态追加的行位置错乱。
• 索引冲突：JS里count初始值设为0，和页面初始渲染的第一行输入框的索引0重复，会造成表单提交时索引不连续，模型绑定失败。

@model List<MVCModel.Models.Student>

<b>Result</b> @ViewBag.s <br />
  
@using (Html.BeginForm("Form", "Home", FormMethod.Post))
{
<table>
    <tbody id="GenaratorList">
        <tr>
            @{ int counter = 0; }
            <td>Enter Name: </td>
            <!-- 给初始输入框加class，方便JS取值，不依赖自动生成的id -->
            <td>@Html.TextBoxFor(m => m[counter].Name, new { @class = "new-student-name" })</td>
            <td>Enter Age: </td>
            <td>@Html.TextBoxFor(m => m[counter].Age, new { @class = "new-student-age" })</td>
            <td><input type="button" value="Add" onclick="addGenarator()" /></td>
        </tr>
    <!-- 修正之前写错的tbody开标签为闭合标签 -->
    </tbody>
</table>
<input type="submit" value="Submit Form"/>
}

<script>
    // 初始行已经占了索引0，动态行从1开始计数避免冲突
    let count = 1;
    function addGenarator() {
        // 通过自定义class取初始输入框的值，解决选不到元素的问题
        const name = $('.new-student-name').val();
        const age = $('.new-student-age').val();

        // 简单判空避免添加空行
        if(!name || !age) {
            alert('请输入姓名和年龄');
            return;
        }

        // name属性严格按照[索引].字段名格式写，符合MVC默认绑定规则
        $('#GenaratorList').append(`
            <tr>
                <td>
                    <input id="[${count}].Name" name="[${count}].Name" type="text" class="form-control" readonly value="${name}">
                </td>
                <td>
                    <!-- 修正之前把name属性错写为Age的问题 -->
                    <input id="[${count}].Age" name="[${count}].Age" type="text" class="form-control" readonly value="${age}">
                </td>
            </tr>
        `);

        // 清空初始输入框，准备下一次输入
        $('.new-student-name,.new-student-age').val('');
        count++;
    }
</script>

如果你的控制器Action参数名不是默认值，比如写法为public ActionResult Form(List<Student> studentModels)，那动态input的name前缀要改成studentModels[索引].属性名的格式，和参数名保持一致即可正常绑定。

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