ASP.NET Web API接收XHR POST封装对象为null问题排查

嘿，我一眼就发现问题所在了——你在前端代码里犯了一个典型的重复JSON序列化错误，这直接导致后端的模型绑定失败，所以wrapper.house和wrapper.user都是null。

问题根源分析 #

看你的前端代码：

var house = JSON.stringify({address : address, zip : zip});
var user = JSON.stringify({Email: email, Password: "aaaAAA1!"});
var wrapper = JSON.stringify({house : house, user : user});

你先把house和user这两个普通对象单独序列化成了JSON字符串，然后又把这两个字符串作为值放到wrapper对象里，再做一次序列化。最终发送到后端的请求体是这样的结构：

{
  "house": "{\"address\":\"你的地址\",\"zip\":\"你的邮编\"}",
  "user": "{\"Email\":\"你的邮箱\",\"Password\":\"aaaAAA1!\"}"
}

而你的后端Wrapper类期望的是嵌套的House和User实体对象，不是字符串类型。Web API的模型绑定器没办法把这些字符串自动转换成对应的实体类，所以属性自然就都是null了。

解决办法：只做一次最外层序列化 #

你只需要保留最外层对象的一次JSON序列化，内层的house和user保持原始的JS对象状态就好。修改后的前端代码如下：

var xhr = new XMLHttpRequest(); 
var url = "api_call"; 
xhr.open('POST', url); 
xhr.setRequestHeader("Content-Type", "application/json;charset=UTF-8"); 

// 直接创建原始JS对象，不要单独序列化
var house = {address : address, zip : zip}; 
var user = {Email: email, Password: "aaaAAA1!"}; 

// 只对最外层的wrapper对象做一次序列化
var wrapper = JSON.stringify({house : house, user : user}); 

xhr.send(wrapper);

额外的后端检查点 #

为了确保万无一失，你还可以确认这几点：

• 确保House和User类的属性名称和前端JSON的键名一致（默认模型绑定大小写不敏感，但保持一致能避免不必要的问题）
• 给你的API方法加上[HttpPost]特性，显式标记这是POST请求（虽然你用了POST方式，但显式标记更规范）

修改后的后端方法示例：

[HttpPost]
public async Task<HttpResponseMessage> ApiCall(Wrapper wrapper) 
{ 
    House house = wrapper.house; 
    User user= wrapper.user; 
    // 你的业务逻辑代码...
}

这样修改后，前端发送的就是标准的嵌套对象JSON，后端的模型绑定器就能正确解析并填充wrapper的属性了。

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