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!

unless absolutely necessary, you should not be using async: false in an ajax call. AJAX is supposed to be asynchronous, by turning that off you can cause the browser to become non-responsive during the ajax call. — MrOBrian
– MrOBrian, Commented Sep 24, 2012 at 21:08

webdeveloper · Accepted Answer · 2013-07-15 07:58:34Z

40

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

edited Jul 15, 2013 at 7:58

answered Sep 24, 2012 at 21:04

webdeveloper

17.3k3 gold badges51 silver badges47 bronze badges

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

6 Comments

Silent Over a year ago

I will try this and report back.

Silent Over a year ago

Ok I copied and pasted that code and here is what I got in the controller, same issue Ive been battling most the day! steps=null

webdeveloper Over a year ago

@Austin Reynolds Sorry, try new solution.

Silent Over a year ago

Your the man that did the trick. I had that in there before but I didnt have the stringify setup correctly. Thanks a ton for your help!

Nullius Over a year ago

The cache:false property is useless with a POST request: api.jquery.com/jQuery.ajax . However, good post, it helped me! +1

|

logeshpalani31 · Accepted Answer · 2024-03-27 14:39:48Z

0

If you applied above solution and not working, then enable traditional

traditional: true,

Sample Below

url: 'GetOrgs/CourseCatalog',
method: "POST",
traditional: true,
data: {'checkedOrgIds': orgIds},

edited Mar 27, 2024 at 14:39

answered Oct 3, 2022 at 17:53

logeshpalani31

1,65815 silver badges37 bronze badges

Collectives™ on Stack Overflow

jQuery post array - ASP.Net MVC 4

2 Answers 2

6 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related