mvc - 绑定 JSON 对象

Question

我正在关注 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 属性都有空值。所以它只是不绑定到我？？

Answer 1

我的代码完全一样

 $.ajax({
                url: url,
                type: "POST",
                dataType: "json",
                data: ko.toJSON(viewModel),
                contentType: 'application/json; charset=utf-8',
                success: function (returnedData)
                {
                    window.location.replace(urlRedirect);
                }
            });

有一些区别：数据类型和字符集，我会说它是数据类型。

我的操作也有 [HttpPost]。