更新

Question

我是淘汰赛和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行空数据，这对我来说没有意义。我错过了什么？

Answer 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方法中不返回string而是返回List<Task>，而不是返回JSON：

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

你可以保留你的JS代码（没有额外的parseJSON），因为现在你将获得一个真实的对象。

Answer 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);
    });

如何使用淘汰赛消费asp.net webapi

2 个答案:

更新