ASP.NET MVC中返回按钮触发当前页面回发问题咨询

看起来你的返回按钮不小心触发了表单的提交行为，这通常是按钮默认类型或位置导致的常见问题，下面是几个实用的解决方案，你可以根据场景选择：

• 修正返回按钮的类型
  HTML里的<button>标签如果不指定type属性，浏览器会默认把它识别为type="submit"，点击就会触发表单提交。给返回按钮加上type="button"就能直接解决：

  <button type="button" onclick="window.history.back();">返回</button>
  

  这样按钮只会执行你指定的返回逻辑，不会触发表单回发。

• 把返回按钮移出表单范围
  如果返回按钮不需要和表单内元素交互，直接把它放在<form>标签外部。这样不管按钮是什么类型，都不会和表单的提交行为绑定：

  <!-- 先闭合表单 -->
  </form>
  <button onclick="window.location.href='@Url.Action("Details", "Licenses", new { id = Model.Id })'">返回</button>
  

• 在process函数里区分触发源
  如果你必须把返回按钮放在表单内部，可以在process函数里判断触发提交的元素，针对返回按钮阻止默认行为：

  function process(form) {
      // 获取触发提交的按钮元素
      const submitter = event.submitter;
      // 假设返回按钮的id为"backBtn"
      if (submitter && submitter.id === "backBtn") {
          event.preventDefault(); // 阻止表单提交
          // 跳转到Details页面，或用history.back()返回上一页
          window.location.href = '@Url.Action("Details", "Licenses", new { id = Model.Id })';
          return false;
      }
      // 保留原有的表单验证、提交逻辑
      // ...
  }
  

  对应的返回按钮需要加上id：

  <button id="backBtn" type="submit">返回</button>
  

• 单独绑定返回按钮的点击事件
  给返回按钮单独绑定点击事件，直接阻止默认行为并执行返回操作：

  <button id="backBtn">返回</button>
  

  document.getElementById('backBtn').addEventListener('click', function(e) {
      e.preventDefault(); // 阻止默认提交行为
      // 跳转到Details页面
      window.location.href = '@Url.Action("Details", "Licenses", new { id = Model.Id })';
  });
  

优先推荐前两种方案，逻辑更简单，也不容易引入额外的代码复杂度。

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