ASP.Net WebAPI Post 方法显示空值

Question

我从昨天开始就被这个问题所困扰。我开始使用 ASP.Net WebAPI 学习 knockoutjs。在我将数据发布回 API 控制器之前，一切都运行良好。每次我将数据发送到控制器时，它都会为 Person 对象的每个字段显示空值。

我尝试了所有方法，例如将 $.ajax 与 contentType: 'application/json' 或 contentType: 'application/json, utf-8...' 一起使用，但对我没有任何作用。请给出一些解决方案，我将非常感谢你..

这里是WebAPI Post Method的代码：

// POST api/some
public HttpResponseMessage Post([FromBody]Person value)
{
    repository.SavePerson(value);
    return Request.CreateResponse(HttpStatusCode.OK);
}

这是 Person 类

public class Person
{
    public string firstName { get; set; }
    public string lastName { get; set; }
    public List<string> activities { get; set; }
    public string favoriteHobby { get; set; }
}

这里是 javascript / 敲除代码

function PersonViewModel() {
    var self = this;

    self.firstName = ko.observable('');
    self.lastName = ko.observable('');
    self.activities = ko.observableArray([]);
    self.favoriteHobby = ko.observable('');

    self.loadUserData = function () {
        $.getJSON("api/Some/Get", function (data) {
            self.firstName(data.firstName);
            self.lastName(data.lastName);
            self.activities(data.activities);
            self.favoriteHobby(data.favoriteHobby);
        });
    }

    self.saveUserData = function () {
        var data_to_send = { value: ko.toJSON(self) };
        $.post("api/Some/Post", data_to_send, function (data) {
        });
    }
};

ko.applyBindings(new PersonViewModel());

最后是 HTML

<form action="#" method="post">
<p>
    First name:
    <input data-bind='value: firstName' />
</p>
<p>
    Last name:
    <input data-bind='value: lastName' />
</p>
<div>
    Your favorite food:
    <select data-bind='options: activities, value: favoriteHobby'>
    </select>
</div>
<p>
    <button data-bind='click: loadUserData'>Load Data</button>
    <button data-bind='click: saveUserData'>Save Data</button>
</p>
</form>

Answer 1

如果你想发布 JSON 之类的

{ "value" : {"firstName" : "Jane", "lastName" : "Doe" }  }

对于一个 ApiController 方法，您需要添加一个额外的“模型”服务器端

public class ValueModel
{
    public Person value { get; set; }
} 

public class Person
{
    public string firstName { get; set; }
    public string lastName { get; set; }
    public List<string> activities { get; set; }
    public string favoriteHobby { get; set; }
}

public HttpResponseMessage Post([FromBody]ValueModel model) { .. }

或者，将 {"value": ..} 放入 JSON 中，然后发布 var data_to_send = ko.toJSON(self)

这是因为模型绑定器绑定了与您发布的 JSON 完全相同的“结构”。

Answer 2

您发送的数据不是 JSON；只有属性value 是。为了让发布 JSON 工作，您应该将完整的对象序列化为 JSON 并设置内容类型：

var data_to_send = ko.toJSON({ value: self });
$.ajax({
    url: "api/Some/Post",
    type: 'POST',
    data: data_to_send ,
    contentType: 'application/json; charset=utf-8',
    dataType: 'json',
    async: false,
    success: function(data) {

    }
});

但您也应该能够发布表单数据而不是 JSON：

var data_to_send = { value: ko.toJS(self) };
$.post("api/Some/Post", data_to_send, function (data) {
});