ASP.NET MVC表单提交禁用按钮后未调用HttpPost Action问题

问题根因 #

• jQuery代码中属性名拼写错误，你写的disable是错误的，正确的禁用属性名是disabled，错误的属性赋值会触发浏览器表单提交链路异常。
• 你在submit事件触发时直接禁用了表单唯一的提交按钮，部分浏览器会判定表单没有合法的提交触发源，放弃执行POST提交逻辑，转而刷新当前页面走GET请求，自然只会命中GET Action，不会触发标注了[HttpPost]的目标Action。
• 控制器代码存在不规范写法：GET Action和控制器类同名，且直接接收复杂类型参数，很容易和路由规则冲突，干扰请求匹配逻辑。

修复方案 #

1. 调整前端JS代码 #

不要在submit事件里立刻禁用按钮，把禁用逻辑放到事件循环的下一个tick执行，保证浏览器先捕获到提交动作再禁用按钮，同时修正属性拼写：

$(function(){
  $("form").submit(function(e){
    // 保证提交逻辑先触发，再延迟禁用按钮
    setTimeout(() => {
      $('input[type="submit"]').prop("disabled", true);
    }, 0);
  });
})

2. 修正控制器不规范写法 #

避免Action名和控制器名重复，按MVC规范命名Action：

public class MyController:Controller{
    // GET请求对应Action
    public ActionResult MyForm(ExampleModel model){
        return View(model);
    }
    [HttpPost]
    public ActionResult MyForm(ExampleModel model){
        // 处理POST提交逻辑
        return View(model);
    }
}

同时修改cshtml的表单生成代码，明确指定提交的Action，避免路由匹配错误：

@using(Html.BeginForm("MyForm", "My", FormMethod.Post)){
  <input type="submit" value="Submit"/>
}

可选兜底方案 #

如果存在浏览器兼容性问题，可以不直接禁用按钮，加状态标记防止重复提交：

$(function(){
  $("form").submit(function(e){
    if($(this).data("submitted")){
      // 已经提交过就阻止后续请求
      e.preventDefault();
      return false;
    }
    $(this).data("submitted", true);
    $('input[type="submit"]').val("提交中...");
  });
})

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