报表笔记：为什么模态框取消时还405？

问题：模态框“取消”按钮点击后触发表单提交，导致 405

咏方舟-长流支流 2026-07-18

正常情况下，在表格中选择一条记录编辑，弹出模拟的模态对话框加载数据如图，但是当点取消按钮时，发现出现了405，说明网页触发了一个请求，可按F12去看。在移植报表的时候，又碰到这个问题，因为我封装了以后其实是前端、后端再也一行代码也不用写的，结果又一不小心踩坑了。

现象

点击模态框中的“取消”按钮，页面出现 405 错误，或页面刷新/跳转。

原因

HTML 规范中，<button>元素如果没有指定type属性，默认是type="submit"。当按钮位于<form>标签内部时，点击会触发表单提交，导致页面刷新或 405。

解决方案

给所有“取消”类按钮显式添加type="button"：

<buttontype="button"onclick="closeModal()">取消</button>

type="button"表示这是一个普通按钮，不会触发表单提交。

涉及范围

• 模态框的“取消”按钮
• 模态框的“关闭”按钮
• 任何在<form>内部但不想触发表单提交的按钮

经验总结

表单内的按钮，如果意图不是“提交”，一定要加type="button"。

这个坑在模态框里尤其常见，因为模态框经常放在表单内部，而取消/关闭按钮的初衷只是关闭弹窗，不该提交数据。不加type属性就会触发提交，导致页面刷新或 405。

submit，它触发了一个标准的 POST 请求。

具体机制如下：

1. 请求方向：浏览器默认将表单数据提交到当前页面的 URL，即https://localhost:7222/NormViewGrid?controller=products。
2. 请求内容：这是一个Content-Type: application/x-www-form-urlencoded的 POST 请求，会携带表单中所有输入框的值。
3. 为什么是 405：NormViewGrid控制器设计为渲染页面视图，只配置了[HttpGet]（用于打开页面），服务器没有配置响应 POST 请求的处理方法。当收到 POST 请求时，服务器返回“方法不允许”的错误。

所以，它既不是“不存在的路由”（404），也不是“跨域问题”（CORS），而是一个路由存在但方法不匹配的典型场景。通过添加type="button"，按钮不再承担“提交”角色，从而规避了浏览器自动发起的这个 POST 请求。