使用JavaScript提交Asp.Net Core表单时页面仍刷新显示JSON结果的问题排查

这个问题的核心坑在于：直接调用原生的form.submit()方法并不会触发你通过addEventListener绑定的submit事件监听器！

当你在somefun里调用myform.submit()时，浏览器会直接发起传统的同步表单提交，完全绕过了你写的包含e.preventDefault()和fetch的监听逻辑。这就导致页面还是会刷新，后端返回的JSON数据直接被渲染成了新页面——也就是你看到的仅显示1的空白页。

具体修复方案 #

下面提供两种可行的修复方式，你可以根据自己的代码习惯选择：

方案1：手动触发submit事件，让监听器正常执行

把somefun里的myform.submit()替换成手动派发submit事件，这样你的监听逻辑就会被触发，preventDefault和异步提交的代码就能生效：

var myform = document.getElementById('cloneFile');
function somefun (){
  // ... 你的其他业务代码
  // 替换原有的myform.submit()
  myform.dispatchEvent(new Event('submit'));
}
myform.addEventListener("submit", function (e) {
  e.preventDefault();
  var frm = e.target;
  var ClonedFrm = frm.cloneNode(true);
  ClonedFrm.removeAttribute("id");
  var frmData = new FormData(ClonedFrm);
  var Url = e.target.action;
  fetch(Url, {method: "POST", body: frmData})
    .then(response => response.json())
    .then(rslt => {
      // 这里可以处理后端返回的结果，比如提示用户提交成功
      console.log("提交结果：", rslt);
    })
    .catch(err => console.error("提交失败：", err));
  return false;
});

方案2：把提交逻辑封装成独立函数，直接调用

更稳妥的方式是将异步提交的逻辑抽成单独的函数，不管是通过事件触发还是手动调用，都复用同一套逻辑：

var myform = document.getElementById('cloneFile');

// 封装异步提交逻辑
async function submitForm(formElement) {
  var ClonedFrm = formElement.cloneNode(true);
  ClonedFrm.removeAttribute("id");
  var frmData = new FormData(ClonedFrm);
  var Url = formElement.action;
  try {
    const response = await fetch(Url, {method: "POST", body: frmData});
    const rslt = await response.json();
    console.log("提交结果：", rslt);
    // 这里可以添加UI提示，比如弹出成功消息
  } catch (err) {
    console.error("提交出错：", err);
    // 处理错误情况，比如提示用户重试
  }
}

// 绑定表单提交事件
myform.addEventListener("submit", function (e) {
  e.preventDefault();
  submitForm(e.target);
});

// 在业务函数里直接调用封装好的提交函数
function somefun (){
  // ... 你的其他业务代码
  submitForm(myform);
}

额外优化建议 #

• 你已经在事件监听器里使用了e.preventDefault()，所以表单上的onsubmit="return false"可以去掉，避免重复的阻止默认行为逻辑。
• 确保在fetch请求中处理响应（比如response.json()），这样你才能获取到后端返回的rslt值并做后续处理。

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