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.

[msdn.microsoft.com/en-us/magazine/hh781022.aspx](model binding) would be helpful to know the basics — ManirajSS
– ManirajSS, Commented Jan 8, 2015 at 6:22

danludwig · Accepted Answer · 2015-01-07 22:10:39Z

34

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").
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.
Omit the contentType, it is not necessary. WebAPI should autodetect this. You can leave it, but it's extraneous.
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; }
    }

edited Jan 7, 2015 at 22:10

answered Jan 7, 2015 at 21:59

danludwig

47.3k27 gold badges164 silver badges240 bronze badges

Sign up to request clarification or add additional context in comments.

10 Comments

RubberChickenLeader Over a year ago

Can you post a small explination of what was wrong and why your code works?

David L Over a year ago

I do not think the FromBody attribute appropriate here. The OP is using MVC 4, not Web API.

danludwig Over a year ago

@DavidL thanks for pointing that out, I thought this was a WebAPI question due to the title.

David L Over a year ago

@danludwig Good point. Perhaps the OP should adjust the title a bit :).

Régis NIOX Over a year ago

Sorry for the title. I tried again and it not worked for me :s My parameter is still null

|

JLRishe · Accepted Answer · 2015-01-07 22:00:21Z

1

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

answered Jan 7, 2015 at 22:00

JLRishe

102k19 gold badges138 silver badges171 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

10 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

10 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related