title: How to consume asp.net webapi with knockout
body: <p>I am new to knockout and asp.net webapi, but I am trying to learn.  I am missing something, as i cannot perform a get(or a post,put...)
  here is my webapi method</p>
  
  <pre><code>public  string GetAllData()
  {
      List&lt;Task&gt; llistTask = new  List&lt;Task&gt;();
      Task lobjTask = new Task();
      lobjTask.title = "some title";
      lobjTask.isDone = false;
  
      llistTask.Add(lobjTask);
  
      return Newtonsoft.Json.JsonConvert.SerializeObject(llistTask);
  
  }
  </code></pre>
  
  <p>my knockout code</p>
  
  <pre><code>            &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
          &lt;head runat="server"&gt;
              &lt;title&gt;&lt;/title&gt;
              &lt;script src="Scripts/knockout-2.2.0.js"&gt;&lt;/script&gt;
              &lt;script src="Scripts/jquery-1.8.2.min.js"&gt;&lt;/script&gt;
          &lt;/head&gt;
          &lt;body&gt;
             &lt;h3&gt;Tasks&lt;/h3&gt;
  
          &lt;form data-bind="submit: addTask"&gt;
              Add task: &lt;input data-bind="value: newTaskText" placeholder="What needs to be done?" /&gt;
              &lt;button type="submit"&gt;Add&lt;/button&gt;
          &lt;/form&gt;
  
              &lt;ul data-bind="foreach: tasks, visible: tasks().length &gt; 0"&gt;
                  &lt;li&gt;
                  &lt;input type="checkbox" data-bind="checked: isDone" /&gt;
                  &lt;input data-bind="value: title" /&gt;
                &lt;%--  &lt;a href="#" data-bind="click: $parent.removeTask"&gt;Delete&lt;/a&gt;--%&gt;
              &lt;/li&gt; 
          &lt;/ul&gt;
  
          You have &lt;b data-bind="text: incompleteTasks().length"&gt;&amp;nbsp;&lt;/b&gt; incomplete task(s)
          &lt;span data-bind="visible: incompleteTasks().length == 0"&gt; - it's beer time!&lt;/span&gt;
  
  
              &lt;script type="text/javascript"&gt;
  
                  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());
  
  
              &lt;/script&gt;
          &lt;/body&gt;
          &lt;/html&gt;
  </code></pre>
  
  <p>The output is   39 rows of null data, which doesnt make sense to me.  what am i missing?</p>