ASP.NET MVC JSON Post a HTML Form to a View?

Question

I have the following code:

jQuery:

$.ajax({
 url: '/personcontroller/getperson',
 cache: false,
 type: "POST",
 data: $('#person').serialize(),
 success: function(data) {
   alert('yay');
 }
 });
});

Controller:

public ActionResult getPerson(Person person)
{
    return new Json(person);
}

Html Form/Spark:

<form id="person">
   <input id="person.Id" type="hidden" value="${ViewData.Model.Person.Id}" />
   <input id="person.Name" value="${ViewData.Model.Person.Name}"></input>
   <input id="person.Age" value="${ViewData.Model.Person.Age}"></input>
   <input value="${ViewData.Model.Person.Gender}"></input>
</form>

When I POST the ajax call with the form, and put a break point in my action. The person object is not being populated with the input values, I feel like I am overlooking something really simple... Can you please point it out to me :|

Answer 1

Inputs need a name attribute to post correctly. You should add a name attribute that matches the Id.

<form id="person">
   <input id="person.Id" name="person.Id" type="hidden" value="${ViewData.Model.Person.Id}" />
   <input id="person.Name" name="person.Name" value="${ViewData.Model.Person.Name}"></input>
   <input id="person.Age" name="person.Age" value="${ViewData.Model.Person.Age}"></input>
</form>

Answer 2

You should use:

public ActionResult getPerson([Bind(Prefix="person")]Person person)

EDIT

And as Michael Gattuso noticed, you should populate name property.