.NET Core 6表单网格移除行后输入项重排问题求助

.NET Core的模型绑定对集合类型的表单字段有严格要求：必须是连续的索引（如POMaterials[0].Amount、POMaterials[1].Amount）才能正确绑定到控制器。删除中间行后索引会断裂，导致数据无法提交，用以下JS代码可以解决这个问题：

实现步骤 #

1. 给网格行统一标记类 #

给所有动态生成的表单行添加统一的CSS类，比如.po-material-row，方便后续选中操作：

<div class="po-material-row">
  <input type="text" name="POMaterials[0].Amount" />
  <input type="text" name="POMaterials[0].ItemName" />
  <button class="delete-row">删除</button>
</div>
<div class="po-material-row">
  <input type="text" name="POMaterials[1].Amount" />
  <input type="text" name="POMaterials[1].ItemName" />
  <button class="delete-row">删除</button>
</div>

2. 编写索引重排函数 #

创建一个函数，遍历所有行，将每个输入框的name属性里的索引替换为连续的数字：

function reindexMaterialRows() {
  // 获取所有网格行
  const rows = document.querySelectorAll('.po-material-row');
  
  rows.forEach((row, index) => {
    // 选中当前行内所有带name属性的输入控件
    const inputs = row.querySelectorAll('[name]');
    
    inputs.forEach(input => {
      // 用正则匹配并替换name里的索引部分
      input.name = input.name.replace(/\[(\d+)\]/, `[${index}]`);
    });
  });
}

3. 绑定删除事件并触发重排 #

给删除按钮绑定点击事件，删除行后立即调用重排函数：

// 给所有删除按钮绑定事件
document.addEventListener('click', function(e) {
  if (e.target.classList.contains('delete-row')) {
    // 删除当前行
    e.target.closest('.po-material-row').remove();
    // 重新索引所有剩余行
    reindexMaterialRows();
  }
});

关键说明 #

• 正则表达式\[(\d+)\]会匹配所有[数字]格式的索引部分，确保不管原来的索引是多少，都会替换为当前行的顺序索引
• 该函数会处理行内所有带name属性的控件，包括文本框、下拉框、隐藏域等，保证所有关联字段的索引一致
• 如果需要新增行，新增后也可以调用这个函数，确保新增行的索引是正确的

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