mvc - binding JSON object

Question

I am following a simple video tutorial for Knockout.js by Steve Sanderson: http://channel9.msdn.com/Events/MIX/MIX11/FRM08

At the very end of it he performs an AJAX call to show how can you use knockout to process data on the server. I repeat all of what he is doing, but for some reason my JSON object doest bind to a POCO class correctly. This is an object I send from the view:

{"firstName":"Bartosz","lastName":"Malinowski","friends":[{"name":"Zofia"},{"name":"Zenon"}],"fullName":"Bartosz Malinowski"}

and then use this code to read it in the controller:

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

My code on the client side looks like this:

'@{
    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>

When I run it in debug mode and check person in the Save method parameter I've got null value for each Person property. So it just doesn't bind to me??

Also, when you say 'doest bind to a POCO class correctly', does that mean that some of the fields bind? — Ian Routledge
– Ian Routledge, Commented Nov 14, 2012 at 10:48
Thanks for an answer, I have added my code from the client side to the original question. — Bartosz
– Bartosz, Commented Nov 14, 2012 at 13:49

remi bourgarel · Accepted Answer · 2012-11-15 13:44:01Z

1

I do exactly the same here is my code

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

There is a few differences : dataType and the charset, I'd say that it's the dataType.

I also have the [HttpPost] on my action.

answered Nov 15, 2012 at 13:44

remi bourgarel

9,4494 gold badges46 silver badges76 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Bartosz Over a year ago

Yes, it was a typo in the contenttype which should be contentType. I just couldn't spot it. Thanks

Collectives™ on Stack Overflow

mvc - binding JSON object

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related