ASP.NET MVC JSON将HTML表单发布到视图？

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.