asp.net mvc - How to send data in jquery.post to mvc controller which use ViewModel as parameter?

Question

I am writing application with asp.net mvc. I have controller with action, which use some ViewModel as parameter. How to send form data with jquery post to that mvc controller.

Answer 1

$.post("Yourcontroller/YourAction", { FirstName : $("#txtFirstName").val(), LastName : $("#txtLastName") } ,function(data){
  //do whatever with the response

});

Your ViewModel Property names and Parameter we are passing should be same. Ie : Your view model should have 2 properties called FirstName and LastName like his

public class PersonViewModel
{
  public string FirstName { set;get;}
  public string LastName { set;get;}
  // other properties

}

And your Post action method should accept a parameter of type PersonViewModel

[HttpPost]
public ActionResult YourAction(PersonViewModel model)
{
  //Now check model.FirstName 
}

Alternatively, If your view is strongly typed to the PersonViewModel, you can simply send the serialized form to the action method using jQuery serialize method

$.post("Yourcontroller/YourAction", $("#formId").serialize() ,function(data){
  //do whatever with the response

});

EDIT : As per the comment

Serialize will take care of the Child property as well. Assume you have a class called Profession like this

public class Profession
{
    public string ProfessionName { set; get; }
}

And your PersonViewModel has a property of type Profession

public class PersonViewModel
{
    //other properties
    public Profession Profession { set; get; }
    public PersonViewModel()
    {
        if (Profession == null)
            Profession = new Profession();
    }
}

You will get these data in your HttpPost Action method, if you fill that from your view.