3

私はノックアウトとasp.netwebapiを初めて使用しますが、学習しようとしています。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行のnullデータですが、これは私には意味がありません。私は何が欠けていますか？

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文字列に変換します（既に行っているかどうかは関係ありません）。その結果、2回JSON化されたオブジェクトがあり、jQueryはそれを解析できません。

あなたがする必要があるのは、WebAPIメソッドでではなくaを返すことでありstring、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 に答える