Question

I am trying to pass two values to the following controller action using jQuery

[HttpPost]
        public JsonResult Cancel(Guid Id, string cancelReason)
        {
            //do something
        }

.js:

    CancelProgram = function (Id) {
//this is basically the value from a select tag placed on the form            
var reason = $("#CancelReasons").val();
            alert(reason);

            Origin.ajax({
                url: '/ZYX/Cancel?Id=' + Id,
                type: 'POST',
                dataType: 'json',
                data: { cancelReason: reason },
                success: function (data) {
                    alert('success!');
                }
            });
        };
    });

The value of cancelReason in the action method is always null. Any pointers on why this is not working?

Answer 1

There must be something wrong with another part of your code. I would start by sending a normal AJAX request by hardcoding the values and ensuring that they are properly sent:

$.ajax({
    url: '/ZYX/Cancel',
    type: 'POST',
    data: { 
        id: '24fe0c97-c227-4312-91fc-6e651df8b64f', 
        cancelReason: 'some reason' 
    },
    success: function (data) {
        alert('success!');
    }
});

Once you ensure that this simple example works start making it more dynamic by using variables. This way you will be able to narrow down and find the origin of your problem. Also I would very strongly recommend you using a javascript debugging tool such as FireBug. It allows you to see in the Console whether you have javascript errors as well as many other useful information such as the exact requests/responses being sent.

In the case of a successful AJAX request here’s what you should see in the Network Tab of FireBug:

Accept:             */*
Accept-Encoding:    gzip, deflate
Accept-Language:    en-us,en;q=0.5
Connection:         keep-alive
Content-Length:     64
Content-Type:       application/x-www-form-urlencoded; charset=UTF-8
User-Agent:         Mozilla/5.0 (Windows NT 6.1; WOW64; rv:10.0) Gecko/20100101 Firefox/10.0
X-Requested-With:   XMLHttpRequest

id=24fe0c97-c227-4312-91fc-6e651df8b64f&cancelReason=some+reason

Notice how both the id and the cancelReason parameters are sent using application/x-www-form-urlencoded.

You should really learn to debug those kind of problems and the way to debug them is by using the proper tools.