我正在关注 Steve Sanderson 为 Knockout.js 编写的简单视频教程:http: //channel9.msdn.com/Events/MIX/MIX11/FRM08
在它的最后,他执行了一个 AJAX 调用来展示如何使用敲除来处理服务器上的数据。我重复他正在做的所有事情,但由于某种原因,我的 JSON 对象没有正确绑定到 POCO 类。这是我从视图发送的对象:
{"firstName":"Bartosz","lastName":"Malinowski","friends":[{"name":"Zofia"},{"name":"Zenon"}],"fullName":"Bartosz Malinowski"}
然后使用此代码在控制器中读取它:
public JsonResult Save(Person person)
{
var message = string.Format("Saved {0} {1}", person.firstName, person.lastName);
return Json(new { message });
}
public class Person
{
public string firstName { get; set; }
public string lastName { get; set; }
public string fullName { get; set; }
public ICollection<Friend> friends { get; set; }
}
public class Friend
{
public string Name { get; set; }
}
}
我在客户端的代码如下所示:
'@{
ViewBag.Title = "Home Page";
}
<script src="../../Scripts/jquery.tmpl.js" type="text/javascript"></script>
<p>First name: <input data-bind="value: firstName"/></p>
<p>Last name: <input data-bind="value: lastName"/></p>
<p>Full name: <span data-bind="text: fullName"></span></p>
<h2>Friends (<span data-bind="text: friends().length"></span>)</h2>
<ul data-bind="template: { name: 'friendsTemplate', foreach: friends }"></ul>
<script id="friendsTemplate" type="text/html">
<li>
<input data-bind="value: name"/>
<button data-bind="click: remove">Remove</button></li>
</script>
<button data-bind="click: addFriend, enable: friends().length < 5">Add Friend</button>
<button data-bind="click: save">Save</button>
<script type="text/javascript">
function friend(name) {
return {
name: ko.observable(name),
remove: function () {
viewModel.friends.remove(this);
}
};
}
var viewModel = {
firstName: ko.observable("Bartosz"),
lastName: ko.observable("Malinowski"),
friends: ko.observableArray([new friend("Zofia"), new friend("Zenon")]),
addFriend: function () {
this.friends.push(new friend("Jan"));
},
save: function () {
$.ajax({
url: "@Url.Action("Save")",
type: "post",
data: ko.toJSON(this),
contenttype: "application/json",
success: function (result) { alert(result.message) }
});
}
};
viewModel.fullName = ko.dependentObservable(function () {
return this.firstName() + " " + this.lastName();
}, viewModel);
ko.applyBindings(viewModel);
</script>
当我在调试模式下运行它并在 Save 方法参数中检查 person 时,每个 Person 属性都有空值。所以它只是不绑定到我?