jQuery ajax post not calling method in my controller

Question

I have a list of tasks that I allow a user to sort, currently I am working on the dragging/dropping from one container to the other.

While the dragging/dropping works , I can't get the jQuery post to fire. Not sure what's going on here.

Here is what I am currently working with for my jQuery:

<script type="text/javascript"> 
    $(function() {
        $(".sortable").sortable({
            connectWith: '.connectedSortable',
            cursor: 'move',
            items: '.queueItem',
            receive: function(event, ui) {
                //Extract column num from current div id
                var stageId = $(this).attr("id").replace("stage", "");
                var taskId = $(ui.item).attr("id").replace("task", "");
                $.ajax({
                    url: '/Task/EditStage',
                    type: 'POST',
                    data: { 'taskId': taskId, 'stageId': stageId }
                });
            }
        }).disableSelection();
    });    
</script> 

My controller action methods looks like:

    [AcceptVerbs(HttpVerbs.Post), Authorize]
    public ActionResult EditStage()
    {
        Task task = this.TaskRepository.GetTask(
            int.Parse(this.Request.QueryString["taskId"]));
        Stage stage = this.StageRepository.GetStage(
            this.Request.QueryString["stageId"]);

        task.StageId = stage.StageId;

        this.TaskCommentRepository.Save();

        return this.Content(string.Format("The stage for Task {0} has been changed to {1}", task.TaskId, stage.Name));
    }

The user is authorized, just curious as to what I am overlooking? Going forward, how can I test this to see what the hang-up is?

Thanks in advance!

Answer 1

You are trying to grab the taskID and stageID from the querystring, but you are sending them as a POST, which means they are in the body of the message. Change you method signature to this:

public ActionResult EditStage(int taskID, intstageID)

and access the parameters instead.

Or, just change the JQuery AJAX method to a GET and your action to allow gets.

Or, append the values to the URL like,

var url = '/Task/EditStage?taskID=' + taskID + "&instageID=" + instaveID;

and use that url variable in the AJAX call with no data.