3

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

4

2 回答 2

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

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

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

并且您可以保留您的 JS 代码（不需要额外parseJSON的），因为现在您将获得一个真实的对象。

于 2012-11-26T03:07:35.023 回答
0

尝试使用ko.mapping 插件。它将单个对象置于淘汰赛中。

代码看起来像

    // 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);
    });
于 2012-11-26T02:55:55.497 回答