2012-11-26 29 views
3

我是新來淘汰賽和asp.net webapi,但我想學習。我在這裏失去了一些東西,因爲我不能執行GET(或POST,PUT ...) 是我的WebAPI方法如何消滅asp.net webapi與淘汰賽

public string GetAllData() 
{ 
    List<Task> llistTask = new List<Task>(); 
    Task lobjTask = new Task(); 
    lobjTask.title = "some title"; 
    lobjTask.isDone = false; 

    llistTask.Add(lobjTask); 

    return Newtonsoft.Json.JsonConvert.SerializeObject(llistTask); 

} 

我敲代碼

  <html xmlns="http://www.w3.org/1999/xhtml"> 
     <head runat="server"> 
      <title></title> 
      <script src="Scripts/knockout-2.2.0.js"></script> 
      <script src="Scripts/jquery-1.8.2.min.js"></script> 
     </head> 
     <body> 
      <h3>Tasks</h3> 

     <form data-bind="submit: addTask"> 
      Add task: <input data-bind="value: newTaskText" placeholder="What needs to be done?" /> 
      <button type="submit">Add</button> 
     </form> 

      <ul data-bind="foreach: tasks, visible: tasks().length > 0"> 
       <li> 
       <input type="checkbox" data-bind="checked: isDone" /> 
       <input data-bind="value: title" /> 
       <%-- <a href="#" data-bind="click: $parent.removeTask">Delete</a>--%> 
      </li> 
     </ul> 

     You have <b data-bind="text: incompleteTasks().length">&nbsp;</b> incomplete task(s) 
     <span data-bind="visible: incompleteTasks().length == 0"> - it's beer time!</span> 


      <script type="text/javascript"> 

       function Task(data) { 
        this.title = ko.observable(data.title); 
        this.isDone = ko.observable(data.isDone); 
       } 

       function TaskListViewModel() { 
        // Data 
        var self = this; 
        self.tasks = ko.observableArray([]); 
        self.newTaskText = ko.observable(); 
        self.incompleteTasks = ko.computed(function() { 
         return ko.utils.arrayFilter(self.tasks(), function (task) { return !task.isDone() }); 
        }); 

        // Operations 
        self.addTask = function() { 
         self.tasks.push(new Task({ title: this.newTaskText() })); 
         self.newTaskText(""); 
        }; 
        self.removeTask = function (task) { self.tasks.remove(task) }; 

        // Load initial state from server, convert it to Task instances, then populate self.tasks 
        $.getJSON("http://localhost:51958/api/tasks/GetAllData", function (allData) { 
         var mappedTasks = $.map(allData, function (item) { return new Task(item) }); 
         self.tasks(mappedTasks); 


        }); 
       } 

       ko.applyBindings(new TaskListViewModel()); 


      </script> 
     </body> 
     </html> 

輸出是39行空數據,這對我沒有意義。我錯過了什麼?

+0

我在下面更新了我的回答,以消除問題的真正根源,而不是治癒症狀。 –

回答

4

的問題是在$.getJSON()功能的處理結果。它返回一個字符串,而不是一個JSON對象,當你做了$.map()後,你迭代了39個字符的字符串,但不是你需要的對象。

要解決它,你需要分析你的字符串作爲JSON:

$.getJSON("http://localhost:51958/api/tasks/GetAllData", function (allData) { 
    allData = $.parseJSON(allData); 
    var mappedTasks = $.map(allData, function (item) { return new Task(item) }); 
    self.tasks(mappedTasks); 
}); 

更新:

我真的很感興趣,爲什麼你得到一個字符串,而不是一個真正的對象,你應該得到在$.getJSON()功能的情況下。原因是你的WebApi方法。只要它返回一個字符串,WebAPI引擎就會將它另外轉換爲一個JSON字符串(它並不關心你已經完成了它)。因此,您有兩次JSON化對象,jQuery無法解析它。

所有你需要做的是恢復不是string但在你的WebAPI方法List<Task>,而不是到JSON它:

public List<Task> GetAllData() 
{ 
    List<Task> llistTask = new List<Task>(); 
    ... 
    return llistTask; 
} 

而且,您可以留下您的JS代碼,您把它(沒有額外parseJSON ),因爲現在你會得到一個真實的物體。

0

嘗試使用ko.mapping plugin。它將單個對象放在形式上。

代碼看起來像

// initial state from server, convert it to Task instances, then populate self.tasks 
    $.getJSON("http://localhost:51958/api/tasks/GetAllData", function (allData) { 

       self.tasks = ko.mapping.fromJSON(allData); 
    }); 
+0

試過了,但它帶回了數據。嗯 – user1186651