How to pass a javascript object to a C# MVC 4 controller

Question

In MVC4, how do you pass a javascript object to a C# controller in AJAX? Finally I tried this but it did not work.

Javascript Client side:

    var myData = {Propr1: '', Propr2: ''};
    $.ajax({
        type: 'POST',
        data: JSON.stringify(myData),
        url: '/Home/SubmitMyData',
        contentType: 'application/json',
        dataType: 'json',
        success: alert('Youhou'),
        error: alert('not good')
    });

C# Server side method:

    public ActionResult SubmitMyData(MyParamModel myParam)
    {
        // Do my stuff here with my parameter
        return View();
    }

    public class MyParamModel
    {
        string Prop1 { get; set; }
        string Prop2 { get; set; }
    }

My parameter is always null. I tried to change the contentType but it still not work. Where are my mistakes? I found some posts but I did not find what I did wrong.

Thanks a lot.

Answer 1

1. Make sure the property names match between the javascript and the C# model. In your question you had Propr1 and Propr2 for the javascript object, but in the C# model you had Prop1 and Prop2 (missing the "r").
2. Do not stringify the data before sending it, and do not set dataType to json . MVC can parse just fine with a collection of post parameters without the json serialization in your code.
3. Omit the contentType , it is not necessary. WebAPI should autodetect this. You can leave it, but it's extraneous.
4. Make sure the model properties are public.

Javascript Client side:

    var myData = {Prop1: '', Prop2: ''}; // #1
    $.ajax({
        type: 'POST',
        data: myData, // #2
        url: '/Home/SubmitMyData',
        //contentType: 'application/json', #3
        //dataType: 'json', #2
        success: alert('Youhou'),
        error: alert('not good')
    });

C# Server side method:

    public ActionResult SubmitMyData(MyParamModel myParam)
    {
        // Do my stuff here with my parameter
        return View();
    }

    public class MyParamModel // #4
    {
        public string Prop1 { get; set; }
        public string Prop2 { get; set; }
    }

Answer 2

The value you pass for the data property should be an object, not a string:

data: myData,

the property names need to match:

var myData = { Prop1: '', Prop2: ''};

you need to use the [FromBody] attribute on your parameter value:

public ActionResult SubmitMyData([FromBody] MyParamModel myParam)

and the properties on your model type need to be public :

public class MyParamModel
{
    public string Prop1 { get; set; }
    public string Prop2 { get; set; }
}