【问题标题】：How to consume asp.net webapi with knockout如何使用淘汰赛使用 asp.net webapi
【发布时间】：2012-11-13 11:37:28
【问题描述】：

我是淘汰赛和 asp.net webapi 的新手，但我正在努力学习。我错过了一些东西，因为我无法执行获取（或发布，放置......）这是我的 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 行空数据，这对我来说没有意义。我错过了什么？

【问题讨论】：

我在下面更新了我的答案，以消除问题的真正根源，而不是治愈症状。

标签： asp.net knockout.js asp.net-web-api

【解决方案1】：

问题出在$.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 字符串（它不在乎你是否已经完成了它）。结果你有两次 JSONified 对象，jQuery 无法解析它。

您需要做的就是在 WebAPI 方法中返回 List<Task> 而不是 string，而不是 JSON：

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

你可以保留你的 JS 代码（不需要额外的 parseJSON），因为现在你会得到一个真实的对象。

【讨论】：

【解决方案2】：

尝试使用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);
    });

【讨论】：

试过了，但它带回了数据。嗯