如何通过主表单单次点击提交按钮POST提交三个Partial View的数据

原实现方式不可行的核心原因 #

你当前的写法失效是因为每个Partial View中通过Html.BeginForm()生成的是默认同步提交的表单：触发第一个#Update1的点击事件后，浏览器会立刻发起同步POST请求，页面进入跳转/加载状态，后续的JS代码执行会被直接中断，所以#Update2、#Update3的点击事件永远不会被触发。

可行的替代方案 #

方案1：改造成异步提交，依次触发三个子表单提交 #

把三个子表单都改成AJAX异步提交，避免页面跳转中断JS执行，步骤如下：

1. 给每个子表单添加统一标识（比如类名partial-form），并绑定AJAX提交逻辑：

$('.partial-form').submit(function(e) {
  // 阻止默认同步提交行为
  e.preventDefault();
  // 提交当前表单数据
  $.post($(this).attr('action'), $(this).serialize(), function(res) {
    // 可在此处添加单个表单提交成功后的处理逻辑
  });
});

2. 主提交按钮直接触发三个子表单的提交事件即可：

$("#btnUpdate").click(function () {
  $("#form1").submit();
  $("#form2").submit();
  $("#form3").submit();
  // 后续全局处理逻辑
});

方案2：统一收集所有数据一次性提交（更推荐，减少HTTP请求） #

点击主按钮时直接合并三个子表单的所有字段数据，只发起一次请求完成全部保存：

$("#btnUpdate").click(function () {
  // 合并三个子表单的序列化数据
  const allData = $('#form1').serialize() + '&' + $('#form2').serialize() + '&' + $('#form3').serialize();
  // 一次性提交到后台接口
  $.post('/你的后台保存接口地址', allData, function(res) {
    // 全部保存完成后的处理逻辑
  });
});

该方案仅需要后台接口兼容接收三个子表单的全部字段即可，性能比多次提交更好。

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