Ajax POST请求后MVC Action方法参数全为null的问题排查与解决

问题场景 #

使用Ajax发送POST请求至ASP.NET MVC的AddData Action方法后，后端接收的RegistrationData类型参数obj所有属性均为null。以下是相关代码：

前端数据与两段Ajax代码 #

var obj = {
    RdEmail: useremailid,
    RduserName: username,
    RduserPassword: userpassword,
    RdGender: gender
};

第一段Ajax代码

$.ajax({
    url: "Registration/AddData",
    type: "POST",
    data: JSON.stringify(obj),
    dataType: "json",
    contentType: "application/x-www-form-urlencoded; charset=UTF-8",
    success: function (result) {
        if (result)
        {  
            alert("Registration Succesfull");
            location.reload();
        }
    },
    error: function (xhr) {
       
        alert('Error: ' + xhr.statusText);
    },
});

第二段Ajax代码

$.ajax({
       url: 'Registration/AddData',
       type: 'post',
       data: JSON.stringify(obj),
       dataType: 'json',
       contentType: 'application/json chartset=utf-8',
       success: function (result) {

         },
        error: function (xhr) {

          alert('Erro:' + xhr.statusText);
     });

后端Action方法代码 #

[HttpPost]
public ActionResult AddData(RegistrationData obj) 
{
    return Json(obj);
}

问题原因排查 #

1. 第一段Ajax的问题

   • 用JSON.stringify(obj)将数据转为JSON字符串，但contentType设置为application/x-www-form-urlencoded（表单提交编码格式）。ASP.NET MVC默认的表单解析器无法识别JSON字符串，导致参数绑定失败，所有属性为null。

2. 第二段Ajax的问题

   • contentType存在拼写错误：将charset写成了chartset，导致MVC无法识别正确的JSON内容类型，无法解析传递的JSON字符串，同样造成参数绑定失败。

解决方法 #

方法一：使用JSON格式传递（推荐） #

修正contentType为正确的application/json; charset=utf-8，确保后端能识别JSON格式的请求体，自动绑定到RegistrationData对象。

修正后的Ajax代码：

var obj = {
    RdEmail: useremailid,
    RduserName: username,
    RduserPassword: userpassword,
    RdGender: gender
};

$.ajax({
    url: "Registration/AddData",
    type: "POST",
    data: JSON.stringify(obj),
    dataType: "json",
    contentType: "application/json; charset=utf-8",
    success: function (result) {
        if (result) {  
            alert("Registration Succesfull");
            location.reload();
        }
    },
    error: function (xhr) {
        alert('Error: ' + xhr.statusText);
    }
});

方法二：使用表单编码格式传递 #

不需要用JSON.stringify处理数据，直接传递JavaScript对象，jQuery会自动将其转为表单编码格式的键值对，后端可直接绑定参数（contentType可省略，jQuery默认值即为application/x-www-form-urlencoded）。

修正后的Ajax代码：

var obj = {
    RdEmail: useremailid,
    RduserName: username,
    RduserPassword: userpassword,
    RdGender: gender
};

$.ajax({
    url: "Registration/AddData",
    type: "POST",
    data: obj,
    dataType: "json",
    success: function (result) {
        if (result) {  
            alert("Registration Succesfull");
            location.reload();
        }
    },
    error: function (xhr) {
        alert('Error: ' + xhr.statusText);
    }
});

后端代码无需修改 #

保持原有的AddData Action方法即可，两种传递方式都能让ASP.NET MVC正确完成参数绑定：

[HttpPost]
public ActionResult AddData(RegistrationData obj) 
{
    return Json(obj);
}

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