ASP.NET MVC中Ajax无法向控制器发送数据问题求助

• 表单默认提交行为未阻止
  若按钮是<button type="submit">或表单内按钮未阻止默认提交逻辑，点击时会优先触发表单原生提交，而非执行Ajax请求。页面跳转的/OnlineEnrollment/Updated大概率是表单action属性指定的地址（未指定则默认使用当前路由）。
  解决方式：

  • 在SaveData函数开头添加event.preventDefault();阻止默认行为：

    function SaveData(event) {
        event.preventDefault();
        // 构造sendData及Ajax请求代码
    }
    

  • 或直接修改按钮类型为非提交型：<button type="button" onclick="SaveData()">Confirm</button>

• Ajax请求URL或路由匹配错误
  检查Ajax的url是否正确指向SaveElectionData控制器方法。例如控制器为OnlineEnrollmentController时，URL应为'/OnlineEnrollment/SaveElectionData'。
  打开浏览器开发者工具的Network面板，确认：

  • Ajax请求是否实际发送；
  • 若发送后返回404，说明URL或路由配置不匹配，需核对RouteConfig.cs（.NET Framework）或Program.cs（.NET Core）中的路由规则，确保方法路由未被覆盖。

• 参数绑定与请求格式问题
  即使sendData结构符合模型，若请求格式不正确，MVC无法完成参数绑定，可能导致方法无法命中：

  • 控制器方法需标记[HttpPost]，并接收对应模型数组：

    [HttpPost]
    public ActionResult SaveElectionData(List<FundElection> fundElections)
    {
        // 业务逻辑
        return Json(new { success = true });
    }
    

  • Ajax请求需设置正确的contentType，并将数据转为JSON字符串：

    $.ajax({
        url: '/OnlineEnrollment/SaveElectionData',
        type: 'POST',
        contentType: 'application/json; charset=utf-8',
        data: JSON.stringify(sendData),
        success: function(res) { /* 处理逻辑 */ },
        error: function(xhr) { console.log(xhr.responseText); }
    });
    

• 点击事件绑定冲突
  若按钮同时通过onclick属性和jQuery的.click()绑定了多个事件，可能导致默认提交逻辑未被正确拦截。检查页面内JS代码，确保仅SaveData函数处理该按钮点击事件。

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