ASP.NET MVC中如何循环生成EditorFor控件并正确获取jQuery值

在ASP.NET MVC项目里，使用EditorFor结合循环可以快速生成批量录入界面，但在客户端用jQuery获取这些动态控件的值时，如果忽略name属性和索引规则，就容易出现取值异常。下面介绍具体的实现与取值技巧。

一、视图中循环生成EditorFor

推荐使用带索引的for循环，这样MVC会为控件生成包含索引的name，方便模型绑定和客户端定位。

<table>
    <thead>
        <tr><th>名称</th><th>价格</th></tr>
    </thead>
    <tbody>
    @for (int i = 0; i < Model.Products.Count; i++)
    {
        <tr>
            <td>@Html.EditorFor(m => m.Products[i].Name, new { htmlAttributes = new { @class = "p-name" } })</td>
            <td>@Html.EditorFor(m => m.Products[i].Price, new { htmlAttributes = new { @class = "p-price" } })</td>
        </tr>
    }
    </tbody>
</table>

上面代码会生成形如 Products[0].Name 的name，同时也加了 class 方便jQuery选择。

二、使用jQuery获取循环控件的值

不要用ID取值，因为循环生成的ID可能重复。应使用类选择器或属性选择器遍历。

1. 通过类选择器获取所有值

// 获取所有名称输入框的值
var names = [];
$('.p-name').each(function () {
    names.push($(this).val());
});
console.log(names);

2. 按索引精准获取某一个控件

// 获取第2个商品的价格，索引从0开始
var secondPrice = $('input[name="Products[1].Price"]').val();
console.log(secondPrice);

3. 提交前组装成对象数组

var list = [];
$('.p-name').each(function (index) {
    var price = $('input[name="Products[' + index + '].Price"]').val();
    list.push({
        Name: $(this).val(),
        Price: price
    });
});
console.log(list);

三、常见错误与注意点

• 使用foreach循环而没有指定前缀，会导致name缺失索引，模型绑定失败且jQuery难定位。
• 在jQuery中使用ID选择器，如 $('#Name')，只能取到第一个，因为ID重复。
• 如果使用了EditorTemplates，确保在模板内也输出一致的class或name前缀。

小结：循环生成EditorFor时优先用for循环保留索引，客户端取值依靠class或带索引的name，即可稳定获取每一个控件的值。

ASP.NET_MVCEditorForjQuery修改时间：2026-07-27 13:39:18