提交表单时如何跳转至不同CSHTML页面？

核心结论 #

document.getElementById("createEvent").submit() 理应触发表单按action指定路径跳转，没反应大概率是路径错误、验证逻辑问题、阻止提交的代码或服务器端问题导致，以下是具体排查方向：

1. 检查表单action路径有效性 #

• 确认路径格式正确：如果是ASP.NET MVC，建议用Razor生成正确路径，比如 @Url.Action("Create", "Event")；如果是Razor Pages，用 asp-page="/CreateEvent"，避免手动写相对路径时因页面层级错误导致404。
• 检查路径是否有转义错误：确保实际代码中路径是正常字符串（比如action="/Event/Create"），而非转义后的实体字符（如代码示例中的"）。

2. 验证逻辑是否阻止了提交 #

看你提供的nextPrev函数，当n==1时会调用validateForm()，如果最后一步点击「下一步」时validateForm()返回false，函数会提前return false，根本不会执行到submit()。

• 检查validateForm()是否正确处理了最后一个tab的字段，比如有没有漏判必填项、格式验证错误等。
• 可以临时注释掉if (n == 1 && !validateForm()) return false;这一行，测试是否能触发提交，验证是不是验证逻辑的问题。

3. 排查是否有阻止提交的代码 #

• 检查表单标签是否加了onsubmit="return false;"，或者有没有通过JS事件监听器阻止默认提交：

  // 这类代码会阻止表单跳转
  document.getElementById("createEvent").addEventListener('submit', function(e) {
      e.preventDefault();
  });
  

• 注意：用form.submit()触发的提交不会触发onsubmit事件，但如果有其他代码监听了submit事件并阻止默认行为，可能还是会有影响。

4. 调试确认代码执行流程 #

• 在submit()前加日志，确认代码确实执行到了这一步：

  if (currentTab >= x.length) {
      console.log('已进入提交逻辑');
      document.getElementById("createEvent").submit();
      return false;
  }
  

• 打开浏览器F12的「Network」标签，查看是否有POST请求发送到action地址：
  • 如果没有请求：说明代码没走到submit()，或者表单元素获取失败（比如id写错了）。
  • 如果有请求但状态码是404：路径错误；500：服务器端代码报错；200但没跳转：服务器端返回了当前页面内容，需要检查CSHTML的后端逻辑。

5. ASP.NET相关注意事项 #

• 如果是Razor Pages，确保表单的method="post"对应PageModel中的OnPost方法，且路径正确。
• 如果表单包含服务器端控件（如asp-for），确保生成的HTML表单结构正常，没有缺失name属性（否则表单数据无法正确提交）。

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