复杂对象未绑定到 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; }
}

EditTalentViewModel

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

我将 json 数据发送到一个操作方法，该方法接受 EditTalentViewModel 作为参数，使用 ajax 调用。这是发送 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 对象的模型绑定器。下面是动作方法的部分：

[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"
    }]
}

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

Answer 1

talents 是您想要 POST 作为请求主体发送到服务器的对象集合。所以错误是你用 {} 包装了 talents 这不是必需的，因为 talents 已经是对象的集合。

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

复杂对象未绑定到 JSON 数据

Complex object not getting bound to JSON data

c#

angularjs

json

asp.net-mvc

angularjs-http