如何消耗与淘汰赛asp.net的WebAPI [英] How to consume asp.net webapi with knockout
问题描述
我是新来的淘汰赛和asp.net的WebAPI，但我努力学习。我失去了一些东西，因为我无法执行GET（或POST，PUT ...）
这里是我的WebAPI方法
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
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);
}
我淘汰赛code
my knockout code
<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"> </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行。我失去了什么？
The output is 39 rows of null data, which doesnt make sense to me. what am i missing?
推荐答案
问题是在 $。的getJSON（）函数的处理结果。它返回一个字符串，而不是一个JSON对象，当你这样做 $。图（）之后你的遍历字符串的39个字符，而不是你需要的对象
The problem is in the handling results of the $.getJSON() function. It returns you a string, not a JSON object, and when you do $.map() later you're iterating 39 characters of your string, but not the objects you need.
要解决它，你需要分析你的字符串作为JSON：
To fix it you need to parse your string as a 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无法解析它。
Update:
I was really interested, why do you get a string instead of a real object as you should get in case of $.getJSON() function. And the reason is your WebApi method. As far as it returns a string, WebAPI engine converts it additionally to a JSON string (it doesn't care that you've already done it). As a result you have twice JSONified object and jQuery can't parse it.
所有你需要做的是不返回字符串但列表＆LT;在你的WebAPI方法;任务＆GT而不是到JSON是：
All you need to do is to return not a string but a List<Task> in your WebAPI method and not to JSON it:
public List<Task> GetAllData()
{
List<Task> llistTask = new List<Task>();
...
return llistTask;
}
和您可以留下您的JS code，你有它（无需额外的 parseJSON ），因为现在你会得到一个真正的对象。
And you can leave your JS code as you had it (no additional parseJSON), because now you'll get a real object.
这篇关于如何消耗与淘汰赛asp.net的WebAPI的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
