CODEWITHSUNDEEP
asp.net-mvcjquery
user1662409
user1662409

Reputation: 157

Posting object AJAX to MVC controller results in all properties being null

I am trying to post an object from jquery to MVC controller. The object is passed successfully but all the properties are null (or false for bools).

fwiw, if I JSON.stringify myObect then it does not pass at all, theObect in the controller is null.

I am using MVC4, .net 4.5, jQuery 1.9.1

Any help appreciate.

jQuery function

var myObject =
{
    Property1: true,
    Proerty2: true
};

$.ajax({
    type: 'POST',
    url: '/myController/StartProcess/',
    data: { theObject: myObject }
});

Controller

private async void StartProcess(myObject theObject)
{
     // theObect can be seen successfully but property1 and property2 are false
     // if I change them to strings they are null
     ...
}

Class

public class myObject
{
    public bool Property1 { get; set; }
    public bool Property2 { get; set; }
}

EDIT:

The solution was:

$.ajax({
    type: 'POST',
    url: '/myController/StartProcess/',
    data:  myObject
});

If anyone can shed some light as to why this works and nothing else does it would be greatly appreciated. It is not a great solution because I have to put all my parameters in myObject, I cannot pass any additional parameters using this technique. also curious as to why all the info I find online, including official tutorials, say to use data: JSON.Strinify(myObect) but for me this causes all the properties of myObject to be null (or false).

Thanks to Roar all the same, at least I can move past this.

Upvotes: 2

Views: 5531

Answers (6)

Marc Roussel
Marc Roussel

Reputation: 509

Here's what can also make all properties null : 

public ActionResult GetPaymentView(CardModel Card)
{
}

If the view is a collection of a model, when you pass a serialized form of one element in the collection to ajax call, the controller expects the same name instance as the class name. I assume that this is the same way without collection but never tried. In this code example we serialize one element of the collection

$.ajax({
    url: '/Shipments/GetPaymentView',
    type: 'POST',
    data: $('#' + ID).serialize(),
    success: { onSuccess(); },
    error: { onError(jqXHR, textStatus, errorThrown); }
});

The reason why this happens is because the view model is a collection of the CardModel and the serialization is adding CardModel before each properties like this : CardModel.ID=foo&CardModel.bar The model binder takes it as granted and tries to match the instance sent with the property of the controller which it can't and instantiate a new instance for you hence all properties are nulls.

Upvotes: 1

user1662409
user1662409

Reputation: 157

OK, finally figured it out. Here is a full and proper solution showing how to pass additional parameters along with the object:

jQuery:

var myString= "my paramter";
var myObject =
{
     Property1: true,
     Property2: true
};

var DTO = { param1: myString, param2: myObject };

$.ajax({
    contentType: "application/json; charset=utf-8",
    type: 'POST',
    url: 'myController/StartProcess',
    data: JSON.stringify(DTO)
});

Controller:

[HttpPost] // notice this additional attribute!
private async void StartProcess(string param1, myObject param2)
{
     // param2 parameters are all true! param1 shows correctly too.
     ...
}

Class

public class myObject
{
    public bool Property1 { get; set; }
    public bool Property2 { get; set; }
}

Upvotes: 0

Knelis
Knelis

Reputation: 7159

If you tried to POST your object to an API controller, it would probably work. I had some trouble with this myself. If you're using jQuery, you need to specify that you're sending JSON so the MVC controller will correctly interpret the data.

You could try this:

$.ajax({
    contentType: 'application/json',
    data: { theObject: myObject },
    dataType: 'json',
    type: 'POST',
    url: '/myController/StartProcess/'
});

Upvotes: 1

njbartz
njbartz

Reputation: 1

Try adding contentType: "application/json; charset=utf-8" to your ajax call.

Upvotes: 0

Roar
Roar

Reputation: 2167

try this

$.ajax({
    type: 'POST',
    url: '/myController/StartProcess/',
    data: myObject
});

Upvotes: 1

Gabe
Gabe

Reputation: 50523

Get this JSON library and stringify() the object like this:

$.ajax({
    type: 'POST',
    url: '/myController/StartProcess/',
    data: JSON.stringify(myObject)
});

Upvotes: 1

Related Questions