2014-05-14 121 views
0

從昨天開始,我就陷入了這個問題。我開始使用ASP.Net WebAPI學習knockoutjs。一切工作都很好,直到我將數據發回到API控制器。每次我將數據分配給控制器時,它都會顯示Person對象的每個字段的空值。ASP.Net WebAPI Post方法顯示空值

enter image description here

我什麼都試過例如使用$ .ajax和contentType:'application/json',或contentType:'application/json,utf-8 ...',但對我來說沒有任何作用。請給一些解決方案,我會非常感謝你..

這裏是的WebAPI POST方法的代碼:

// 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> 
+0

你需要設置內容類型爲url編碼嗎? – qamar

+1

您是否嘗試過發佈'var data_to_send = ko.toJSON(self)' –

+0

This Worked。但是你能解釋爲什麼它不適用'ko.toJSON({value:self})'嗎?還張貼這個答案,所以我可以接受它。 – Hammad

回答

2

如果你要像

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

張貼JSON一個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完全相同的「結構」。

0

您要發送的數據不是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) { 
}); 
+0

沒有解決問題,我嘗試了我們的兩個解決方案,但他們沒有工作。顯示Person對象的相同空值。 – Hammad