jQuery post array - ASP.Net MVC 4

Question

I have spent 8 hours or so today trying to figure this out. I have viewed lots of solutions but cannot get the same results. I have a hunch it has everything to do with being relatively new to ASP.Net.

Here is the latest question I tried mimicking with no luck. https://stackoverflow.com/questions/10007722/post-array-as-json-to-mvc-controller#=

How to post an array of complex objects with JSON, jQuery to ASP.NET MVC Controller?

Basic Rundown of Problem: I have an array of json objects I would like to pass to my controller. When I pass the data it shows lets say for example 3 items, but their values are not passed or it just shows nothing was passed. Firebug shows it passed it so I assume that something is not setup right and its not allowing it to set that variable up correctly on the C# side.

I have tried a few things and ill list them below: Setup 1: I tried mocking what I seen at the second link:

$.ajax({
        type: 'Post',
        cache: false,
        url: '/Workflow/Home/UpdateStepPositions',
        data: { 'steps': ['1','2','3'] },
        async: false,
        success: function (data) {
            console.debug(data);
        },
        error: function (data) {
            console.debug(data);
        }
    });

 Controller
 [HttpPost]
    public ActionResult UpdateStepPositions(string[] steps){

        var bresults = new {
            Success = false,
            Message = "Unable to update step positions."
        };

        return Json(bresults);
    }

I couldn't even get that simple setup working.. It gets to the function and shows there was nothing passed....

Setup 2:

 list = new Array();
    list.push({ "step": 1, "position": 1 });
    list.push({ "step": 2, "position": 2 });
    list.push({ "step": 3, "position": 3 });

    $.ajax({
        type: 'Post',
        cache: false,
        url: '/Workflow/Home/UpdateStepPositions',
        data: JSON.stringify({ 'steps': list }),
        async: false,
        success: function (data) {
            console.debug(data);
        },
        error: function (data) {
            console.debug(data);
        }
    });

    Controller
   [HttpPost]
    public ActionResult UpdateStepPositions(List<UpdatedSteps> steps){
        var bresults = new {
            Success = false,
            Message = "Unable to update step positions."
        };

        return Json(bresults);
    }

   Class
   public class UpdatedSteps {
    public string Step { get; set; }
    public string Position { get; set; }
}

Can anyone shine some light on what I'm missing or point me in the right direction? Hopefully its something simple and just a newbie mistake!

Answer 1

MVC detects what type of data it receive by contentType. Here is working example:

$(function () {
    $.ajax({
        type: 'Post',
        dataType: 'json',
        url: '/Workflow/Home/UpdateStepPositions',
        data: JSON.stringify({ steps: ['1', '2', '3'] }),
        contentType: 'application/json; charset=utf-8',
        async: false,
        success: function (data) {
            console.debug(data);
        },
        error: function (data) {
            console.debug(data);
        }
    });
});

Now everything ok with request:

Content-Type:        application/json; charset=utf-8
X-Requested-With:    XMLHttpRequest

and response:

Content-Type:        application/json; charset=utf-8