jQuery post array – ASP.Net MVC 4

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!

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 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

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0