MVC3 Passing ViewModel to a controller method using jQuery Ajax

Question

I'm trying to pass form data to my controller method using jQuery Ajax, but I'm not sure how you do it, since my ViewModel is null when I use the debugger on the controller side.

My ViewModel:

public class PremisesViewModel { public string createPremisesErrorMessage { get; set; } public string updatePremisesErrorMessage { get; set; } public SelectList listOfCounties = Initialise.countiesSelectList; public Premise premises { get; set; } } 

where room is an entity / table in my database.

The form contains fields in the Premises table.

In my javascript function, I do this:

  var premisesViewModel = { Id: 0, PremisesDescription: $('#premises_PremisesDescription').val(), OrdnanceSurveyReference: $('#premises_OrdnanceSurveyReference').val(), PartRestrictedNotes: $('#premises_PartRestrictedNotes').val(), NatureOfPremises: $('#premises_NatureOfPremises').val(), AddressLine1: $('#premises_AddressLine1').val(), AddressLine2: $('#premises_AddressLine2').val(), Town: $('#premises_Town').val(), CountyId: $('#premises_CountyId').val(), Postcode: $('#premises_Postcode').val() } alert(form.serialize); $.ajax({ url: form.attr('action'), type: 'POST', dataType: "json", contentType: 'application/json', data: JSON.stringify(premisesViewModel), success: function (data) { alert('done'); } }) 

However, when I check the viewModel parameter in my method, it is null:

  [HttpPost] public JsonResult Create(PremisesViewModel pvm) { return null; } 

Any ideas on how to map this so that the viewmodel is properly bound. Thanks

Answer 1

Your JSON format is exactly the same as your model class.

Current example

 public class PremisesViewModel { public string createPremisesErrorMessage { get; set; } public string updatePremisesErrorMessage { get; set; } public SelectList listOfCounties = Initialise.countiesSelectList; public Premise premises { get; set; } } 

Your json like

  var premisesViewModel = { createPremisesErrorMessage : $('#premises_PremisesDescription').val(), updatePremisesErrorMessage: $('#premises_OrdnanceSurveyReference').val(), premises : {Define more properties here as per your Premise structure} } 

Answer 2

If you want to automatically build a model from a model of related form views, you can use the code from this answer fooobar.com/questions/847 / ... to properly serialize the JSON Object.

Then you need to pass it as a string to your call to $ .ajax. In general, it is very similar to what you originally had. Sort of:

 var premisesViewModel = $('form').serializeObject(); $.ajax({ url: form.attr('action'), type: 'POST', dataType: "json", contentType: 'application/json', data: JSON.stringify(premisesViewModel), success: function (data) { alert('done'); } }); 

Oddly enough, there is no main function to convert to a JSON object, but there you go.

Answer 3

The variable names in the data you publish do not match the property names of your ASP.Net MVC ViewModel, so the data cannot be bound properly.