ASP.NET Core MVC中jQuery .each循环首项重复的原因排查

可能的原因 #

1. 页面存在额外的.editorRow元素：除了#editorRows容器内的项，页面其他区域（比如主视图的form根节点下）还有一个带.editorRow类的元素。脚本遍历所有.editorRow时会把它也包含进去，导致数组多一项；如果这个额外元素的输入值和第一个子项相同，就会出现首项重复的情况。

2. Ajax添加逻辑重复触发："Add Row"按钮的click事件被绑定了多次，或者事件冒泡未阻止，导致每次点击都会重复添加同一个PartialView，进而让集合里多了重复项。

3. Model初始数据异常：Model.Children集合本身就包含重复的首项，或者默认自带一个空项，同时添加操作又重复插入了相同值的项。

排查与解决步骤 #

• 限定脚本遍历范围：修改脚本，只遍历#editorRows容器内的.editorRow元素，避免误选页面其他地方的同类元素：

  var products = [];
  $("#editorRows .editorRow").each(function(index, element) {
    let inputEl = element.querySelector("input[name='Name']");
    if (inputEl) { // 容错处理，避免找不到输入框导致报错
      products.push({ Name: inputEl.value });
    }
  });
  

• 检查DOM结构：打开浏览器开发者工具（F12），搜索所有带.editorRow类的元素，确认是否有不在#editorRows内的多余元素，如有则移除该元素的.editorRow类。

• 修复Ajax事件绑定：确保按钮的click事件只绑定一次，避免重复触发添加逻辑：

  $("#addItem").off("click").on("click", function(e) {
    e.preventDefault();
    $.get($(this).attr("href"), function(data) {
      $("#editorRows").append(data);
    });
  });
  

• 优化集合绑定（额外建议）：你当前用foreach渲染PartialView的方式，会导致所有输入框的name属性都是Name，ASP.NET MVC无法正确绑定到集合类型参数。建议改用编辑器模板：

  1. 将PartialView重命名为ChildModel.cshtml（与你的子模型类名一致），放到Views/Shared/EditorTemplates文件夹下。
  2. 主视图中替换循环代码为：@Html.EditorFor(m => m.Children)，框架会自动生成带索引的name（如Children[0].Name），既解决绑定问题，也能避免输入框name重复引发的潜在问题。

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