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.

Answer 2

var myData = {               Parameter1: $("#someElementId").val(),               Parameter2: $("#anotherElementId").val(),               ListParameter: { /* Define IEnumerable collections as json array as well */}               // more params here              }   $.ajax({     url: 'someUrl',     type: 'POST',     dataType: "json",     contentType: 'application/json',     data: JSON.stringify(myData) });     [HttpPost] public JsonResult Create(CustomViewModel vm) {     // You can access your ViewModel like a non-ajax call here.     var passedValue = vm.Parameter1; } 

You can also serialize the whole form and pass it to your controller's action method. In you ajax call:

data: $('form').serialize()