MVC3 Passing ViewModel to controller method using JQuery Ajax

Question

I'm trying to pass a form's data to my controller method using JQuery Ajax, but I'm not sure how you do this as my ViewModel is null when I use debugger on the Controller Side.

My ViewModel is:

public class PremisesViewModel
{

    public string createPremisesErrorMessage { get; set; }
    public string updatePremisesErrorMessage { get; set; }

    public SelectList listOfCounties = Initialise.countiesSelectList;

    public Premise premises { get; set; }
}

where premises is an entity/table in my database.

The form contains the 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 bound correctly. Thanks

If you use firebug and look at the post request, does it send the correct data to the Create page? — Marco Johannesen, Mar 26 '12 at 11:40

score 6 · Answer 1 · edited May 23 '17 at 12:10

If you wanted to automatically build the model from the bound view model of a form, you can use the code from this answer https://stackoverflow.com/a/1186309 to properly serialize to a JSON object.

You'd then need to pass it as a string to your $.ajax call. All in all, very similar to what you originally had. Something like:

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');
        }
    });

Quite strange that there's no core function to convert to a JSON object, but there you go.

score 5 · Accepted Answer · answered Mar 26 '12 at 11:55

Your JSON format exactly 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}
                                }

Changed as you suggested and works a treat. Thanks for the in-depth code as this made it much clearer to me. — user1079925, Mar 26 '12 at 12:05

score 4 · Answer 3 · answered Mar 26 '12 at 11:42

4

The names of the variables in the data that you are posting does not correspond with the names of the properties of your ASP.Net MVC ViewModel, so the data can not be binded properly.

answered Mar 26 '12 at 11:42

Christofer Eliasson

32,939
7
74
103

MVC3 Passing ViewModel to controller method using JQuery Ajax

3 Answers3

Linked