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