Ajax向MVC控制器POST对象时控制器接收参数为null如何解决

核心问题原因 #

• 控制器入参未标记[FromBody]特性：ASP.NET MVC默认从表单数据中绑定参数，你通过Ajax提交的是JSON格式的请求体数据，没有指定从请求体读取时，绑定器无法匹配到对应数据，最终生成的入参对象所有属性均为null。
• contentType写法不规范：现有代码中contentType写为"application/json;"，末尾多余的分号可能导致部分版本的MVC框架无法正确识别请求格式，影响参数绑定。
• JS代码存在笔误：末尾console.log("imagedata", myobj);中myobj未定义，虽不影响请求提交，但会触发控制台未定义错误。

修复方案 #

方案1：保留JSON提交格式（推荐） #

1. 修改控制器代码，给入参加[FromBody]特性，同时修正返回值避免前端异常：

[HttpPost]
public ActionResult AddImage([FromBody] ImageModel imageModel)
{
    UploadRepo.saveImage(imageModel);
    return Json(new { success = true });
}

2. 调整Ajax请求的contentType写法，修正console笔误：

$.ajax({
    url: '/Upload/AddImage',
    type: "POST",
    data: JSON.stringify(obj),
    contentType: "application/json; charset=utf-8",
    success: function (data) {
        //successMessage();
        $("form")[0].reset();
    },
    error: function (xhr, textStatus, errorThrown) {
        console.log("textstatus", textStatus, xhr)
        // errorMessage();-
    }
});
console.log("imagedata", obj);

方案2：使用表单格式提交（兼容低版本MVC） #

如果你的MVC版本不支持[FromBody]特性，可直接提交JS对象，无需序列化，不用指定contentType：

$.ajax({
    url: '/Upload/AddImage',
    type: "POST",
    data: obj,
    success: function (data) {
        //successMessage();
        $("form")[0].reset();
    },
    error: function (xhr, textStatus, errorThrown) {
        console.log("textstatus", textStatus, xhr)
        // errorMessage();-
    }
});

此方案无需修改控制器原有代码即可正常绑定参数。

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