.NET Core下HTML表单与JS调用Action的页面跳转差异问题

两种调用方式的行为差异是浏览器内置规则决定的，和ASP.NET Core框架无关：

• 原生<form>提交属于浏览器导航级请求：请求发送后，浏览器会直接接管响应处理，用服务端返回的内容完整替换当前页面，因此Action返回View()时会自动渲染对应视图，完成页面跳转，全程不需要JS介入。
• fetch/XMLHttpRequest发起的是异步AJAX请求：这类请求的设计目标就是在不离开当前页面的前提下和服务端交互，响应内容只会交付给JS回调逻辑处理，无论服务端返回什么内容，浏览器都不会自动触发页面替换或跳转，这是Web标准层面的硬性限制。

1. 动态生成表单模拟原生提交 #

这是最贴合原生表单行为、改动成本最低的方案：JS动态创建隐藏的form元素，把要提交的参数转成隐藏输入框追加到表单中，调用表单原生submit()方法触发导航级请求，完全复用原生表单的自动跳转逻辑，不需要额外处理响应。
示例代码：

function postSelectedCustomerData() {
  const postData = {
    SearchText: 'SearchText1',
    EmpName: '1',
    DealsOnly: true,
    PageNumber: 1
  }

  // 初始化表单
  const tempForm = document.createElement('form')
  tempForm.method = 'POST'
  tempForm.action = '/Employee/EmployeeDetailsPost'

  // 填充表单字段
  Object.entries(postData).forEach(([fieldName, fieldValue]) => {
    const hiddenInput = document.createElement('input')
    hiddenInput.type = 'hidden'
    hiddenInput.name = fieldName
    hiddenInput.value = fieldValue
    tempForm.appendChild(hiddenInput)
  })

  // 挂载表单、提交、清理
  document.body.appendChild(tempForm)
  tempForm.submit()
  document.body.removeChild(tempForm)
}

注意：这个方案对应的后端Action不要给参数加[FromBody]特性，使用默认的表单格式绑定参数即可，和原生HTML表单提交的参数绑定逻辑完全一致。

2. 遵循PRG模式返回重定向结果 #

POST请求直接返回视图本身就不符合Web最佳实践，推荐改用Post-Redirect-Get模式：

• 后端POST Action处理完业务逻辑后，不要直接返回View()，而是调用RedirectToAction()返回303状态码，指定要展示的详情页GET Action
• 前端直接使用原生表单提交（包括上面动态创建表单的方案），浏览器会自动识别303状态码，跳转到Location头对应的地址，不需要写任何JS跳转逻辑。

不推荐的取巧方案 #

你可以在fetch回调中拿到服务端返回的HTML字符串，直接通过document.write(res.text())或者替换document.documentElement.innerHTML的方式把新视图渲染到页面，视觉效果和跳转一致，但这种方式不会更新地址栏URL，还会破坏当前页面的JS上下文、内存状态，隐患极多，正式项目不要用。

补充说明：只要你用fetch/XHR这类异步API发请求，就不可能在不写任何响应处理逻辑的前提下自动跳转到返回的视图页——浏览器根本不会把异步请求的响应当成导航内容处理，没有任何配置或者框架特性可以绕过这个限制。

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