.NET Core应用使用jQuery AJAX POST更新SQL数据库报400/404错误如何解决

1. 404错误原因修复 #

你在构造请求URL时犯了ASP.NET Core路由的常规错误：

• 使用@Url.Action时，控制器名称参数要去掉Controller后缀，正确写法为@Url.Action("AddMilestone","Home")
• 手动写路径的正确格式为/Home/AddMilestone，不需要携带Controller后缀

2. 400错误原因修复 #

400错误是请求参数绑定失败导致的，存在两个问题：

• 后端Action的接收参数缺少[FromBody]特性：.NET Core默认不会将application/json格式的请求体内容绑定到复杂类型参数，需要显式声明
• 前端传递的JSON结构和后端接收的HomeViewModel不匹配：你前端构造的是Milestone类的直接字段，但是后端HomeViewModel是将Milestone作为嵌套属性存储的，结构不对应导致绑定失败

3. 代码修改示例 #

前端AJAX代码修改 #

$("#addMilestoneBtn").on('click', function (e) {
    e.preventDefault();
    // 调整结构匹配HomeViewModel的嵌套格式
    var postData = {
        Milestone: {
            MilestoneName: $("#milestoneText").val(),
            Date: new Date($("#milestoneDate").val()),
            ProjectId: Number($("#projectId").val())
        }
    };
    var jsonData = JSON.stringify(postData);
    // 修正URL
    var url = '@Url.Action("AddMilestone","Home")';

    $.ajax({
        type: "POST",
        url: url,
        data: jsonData,    
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: OnSuccess,
        error: OnErrorCall
    });

    function OnSuccess(response) {
        // .NET Core直接返回值没有.d属性，直接判断response即可
        if (response) {
            alert("Milestone Added Successfully");
            buildMilestoneTable();
        }
        $("#milestoneDate").val("");
        $("#milestoneText").val("");  
    }

    function OnErrorCall(response) {
        console.log(response); 
    }
  
    return false; 
}); 

后端控制器代码修改 #

[HttpPost]
// 加[FromBody]特性，绑定请求体的JSON数据
public bool AddMilestone([FromBody] HomeViewModel obj)
{
    // 修正逻辑，直接取传过来的Milestone属性值，不要读不存在的obj.Project.Id
    obj.Milestone.Date = DateTime.Today;
    _db.Milestones.Add(obj.Milestone);
    _db.SaveChanges();
    return true;
}

可选优化 #

你当前的场景不需要接收整个HomeViewModel，直接将后端Action的参数改为[FromBody] Milestone milestone，前端直接传递Milestone的三个字段即可，减少不必要的参数传输和绑定逻辑。

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