复杂对象未绑定到 JSON 数据

Question

我有两个 ViewModel 对象 TalentViewModel 和 EditTalentViewModel。以下是它们各自的代码：

TalentViewModel

public class TalentViewModel
{
    [JsonProperty(PropertyName = "TalentId")]
    public long TalentId { get; set; }
    [JsonProperty(PropertyName = "TalentName")]
    public string TalentName { get; set; }
}

编辑TalentViewModel

public class EditTalentViewModel
{
    [JsonProperty(PropertyName = "AddedTalents")]
    public List<TalentViewModel> AddedTalents { get; set; } 
    [JsonProperty(PropertyName = "RemovedTalents")]
    public List<TalentViewModel> RemovedTalents { get; set; } 
}

我使用 ajax 调用将 json 数据发送到操作方法，该方法接受 EditTalentViewModel 作为参数。这是发送ajax请求的angularJs代码

//this will send the json data to InterestController
$scope.saveInterest = function (talents) {
    $http({
        method:"POST",
        url:"/Interest/AddTalents",
        data: {talents},
        headers: {
            'Content-type': "application/json"
        },
        responseType:"json"
    }).success( function(data){
        console.log(data);

    }).error( function(data){
        console.log("Error happening");
    });
}

我使用了this answer 中建议的自定义模型绑定器，并将其用作 EditTalentViewModel 对象的模型绑定器。下面是action方法的一部分：

[HttpPost]
public ActionResult AddTalents([ModelBinder(typeof(JsonModelBinder))]EditTalentViewModel talents)
{
    if (!ModelState.IsValid) return Json("Fail");
    var userId = User.Identity.GetUserId<long>();
    if (talents.AddedTalents == null && talents.RemovedTalents == null)
    {
        return Json("Success");
    }
    //.........
}

发送到的 JSON 数据示例如下所示：

{
    "AddedTalents": [{
        "TalentId": 10,
        "TalentName": "Sculptor"
    }, {
        "TalentId": 8,
        "TalentName": "Painter"
    }],
    "RemovedTalents": [{
        "TalentId": 2,
        "TalentName": "Dj"
    }]
}

但是，当我调试代码时，EditViewModel 类的 AddedTalents 和 RemovedTalents 属性为空。我在这里想念什么？我怎么解决这个问题？还有更好的模型绑定方法吗？

Answer 1

talents 是您想要作为请求正文发布到服务器的对象的集合。所以错误是您将talents 与{} 包装在一起，这不是必需的，因为talents 已经是对象的集合。

$http({
    method:"POST",
    url:"/Interest/AddTalents",
    data: talents, //<--change here, removed unwanted {}
    headers: {
       'Content-type': "application/json"
    },
    responseType:"json"
})