Data from ajax post is passing null to the controller

Question

AJAX call -

Here countryId is passed as "AU" for example -

$("#Countries").change(function () {
        var countryId = this.value;
        $.ajax({
            url: '/Registers/GetStates',
            type: "POST",
            data: { 'data': countryId },
            success: function (states) {
                $("#States").html(""); // clear before appending new list 
                $.each(states, function (i, state) {
                    $("#States").append(
                        $('<option></option>').val(state.Id).html(state.Name));
                });
            }
        });
    });

After calling the GetStates method 'countryId' is always passed as null in the controller method. Not sure what I'm missing here. I tried JSON.Stringify({ 'data': countryId }) also. Can anyone help me out ?

Controller Action - 

[HttpPost]
public SelectList GetStates(string countryId)
{
     return Helper.GetStates(countryId);
}

Anadi · Accepted Answer · 2016-12-03 17:25:17Z

6

The parameter in your action method should be exactly same as the parameter name in the 'data' option of ajax.

In your case it is 'countryId'

[HttpPost]
public SelectList GetStates(string countryId)
{
     return Helper.GetStates(countryId);
}

Change your ajax data option accordingly.

data: { countryId: countryId },

It will work.

answered Dec 3, 2016 at 17:25

Anadi

75411 silver badges25 bronze badges

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

Collectives™ on Stack Overflow

Data from ajax post is passing null to the controller

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related