ajax post data null in mvc3 controller method

Question

One of my jquery ajax posts sends post data to my .NET MVC3 controller method, but at the controller method, the data shows up as null. I have many other ajax posts that use practically the same method body, and they all work fine, so I'm not sure what is happening.

Ajax post:

$.ajax({
    url: '/Entity/Relate',
    type: 'POST',
    dataType: 'json',
    contentType: 'applicaiton/json; charset=utf-8',
    data: { primaryEntityId: parseInt(entityParentId, 10), relatedEntityId: _createdId },
    success: function (data)
    {
        //do stuff
    },
    error: function ()
    {
        // throw error
    },
    complete: function ()
    {
        //do more stuff
    }
});

Controller method:

[HttpPost]
public int Relate(int primaryEntityId, int relatedEntityId)
{
    return relationshipRepository.Add(primaryEntityId, relatedEntityId);
}

The problem is when I break on the Relate method, primaryEntityId and relatedEntityId are null, even though in the post data in Firebug, it shows that {primaryEntityId: 13, relatedEntityId: 486} have been posted to the method.

Any suggestions or ideas as to why the post looks good, but the controller isn't picking up the data?

Darin Dimitrov · Accepted Answer · 2012-12-23 17:37:22Z

4

but at the controller method, the data shows up as null

That's not possible because Int32 is a value type and value types in .NET cannot be null. You probably meant that they are assigned to the default value. Anyway.

The problem is related to the contentType parameter that you have set in your AJAX request. You need to remove it because you are not sending JSON but a standard application/x-www-form-urlencoded request:

$.ajax({
    url: '/Entity/Relate',
    type: 'POST',
    dataType: 'json',
    data: { 
        primaryEntityId: parseInt(entityParentId, 10), 
        relatedEntityId: _createdId 
    },
    success: function (data)
    {
        //do stuff
    },
    error: function ()
    {
        // throw error
    },
    complete: function ()
    {
        //do more stuff
    }
});

If you want to send a JSON request define a view model:

public class RelateViewModel
{
    public int PrimaryEntityId { get; set; }
    public int RelatedEntityId { get; set; }
}

then have your controller take this view model as argument:

[HttpPost]
public int Relate(RelateViewModel model)
{
    return relationshipRepository.Add(model.PrimaryEntityId, model.RelatedEntityId);
}

and finally send a real JSON request (using the JSON.stringify method):

$.ajax({
    url: '/Entity/Relate',
    type: 'POST',
    dataType: 'json',
    contentType: 'application/json;charset=utf-8',
    data: JSON.stringify({ 
        primaryEntityId: parseInt(entityParentId, 10), 
        relatedEntityId: _createdId 
    }),
    success: function (data)
    {
        //do stuff
    },
    error: function ()
    {
        // throw error
    },
    complete: function ()
    {
        //do more stuff
    }
});

edited Dec 23, 2012 at 17:37

answered Dec 23, 2012 at 17:32

Darin Dimitrov

1.0m275 gold badges3.3k silver badges3k bronze badges

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

1 Comment

keithhamilton Over a year ago

thanks for correcting me, my mistake. the problem was that the response from the server was saying that the value of INT32 could not be null. As it turns out, there is a very small typo that was causing the whole problem, namely I misspelled 'application' in the contentType statement...that, and in my example I didn't use JSON.stringify. Thanks for the information, this helped.

Collectives™ on Stack Overflow

ajax post data null in mvc3 controller method

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related