passing array from javascript to controller MVC 4

Question

I am using razor and I'm having a hard time passing an array to a controller. the array contains objects that I made and I am trying to do this:

$.ajax({
     type: "POST",
     url: "HomePage/HandleOperations",
     data: JSON.stringify(operationCollection),
     success: function (data) { alert("SUCESS");},
     dataType: "json",
     contentType: "application/json"
});

and my controller is:

 public void HandleOperations(List<string> operationCollection)
 {

 }

I am not required to use ajax but I am not sure how else it could be done. In the controller it shows that the "operationCollection" contains elements but they are all null.

Side note - You don't need to call JSON.stringify, jQuery (or XHR2) will do this for you. — Benjamin Gruenbaum
– Benjamin Gruenbaum, Commented Aug 7, 2013 at 19:56
did you try adding traditional: true to your ajax options? — lbstr
– lbstr, Commented Aug 7, 2013 at 19:57
still same problem, it shows the right number of elements but they are all null — laitha0
– laitha0, Commented Aug 7, 2013 at 19:59

Nalan Madheswaran · Accepted Answer · 2013-09-22 15:10:04Z

11

the Ajax parameter

traditional : true

will do the trick.

answered Sep 22, 2013 at 15:10

Nalan Madheswaran

10.6k1 gold badge60 silver badges44 bronze badges

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

2 Comments

radbyx Over a year ago

What do you mean? Where should I write traditional??

puddinman13 Over a year ago

$.ajax({ type: "POST", url: "HomePage/HandleOperations", data: {operations: operationCollection}, traditional: true, success: function (data) { alert("SUCCESS"); } });

Community · Accepted Answer · 2017-05-23 12:24:38Z

4

Usage of the traditional: true parameter for an ajax call:

To help radbyx, using the "traditional: true" property of an ajax call, like the following, will tell ajax to use the traditional form of serialization. More details: http://api.jquery.com/jQuery.param/ or What is "traditional style of param serialization' in JQuery.

$.ajax({
     type: "POST",
     url: "HomePage/HandleOperations",
     data: {operations: operationCollection},
     traditional: true,
     success: function (data) { alert("SUCCESS"); }
});

edited May 23, 2017 at 12:24

CommunityBot

11 silver badge

answered Dec 20, 2013 at 20:21

puddinman13

1,4084 gold badges18 silver badges35 bronze badges

Comments

Anders Lindén · Accepted Answer · 2013-08-07 20:40:52Z

3

Client side:

$.ajax({
     type: "POST",
     url: "HomePage/HandleOperations",
     data: {operations: operationCollection},
     success: function (data) { alert("SUCCESS"); }
});

and declare a class server side like this:

public class Operation
{
  public int Index;
  public string Source;
  public string Target;
  public int AddOrDel;
}

then you can have this action:

public void HandleOperations(Operation[] operations)
{
}

answered Aug 7, 2013 at 20:40

Anders Lindén

7,44413 gold badges62 silver badges122 bronze badges

4 Comments

laitha0 Over a year ago

this works! I did not know that I need a model for it. Thanks

Anders Lindén Over a year ago

Well, need and need, you will get the opportunity to put words on the items, they are after all operations :)

Anders Lindén Over a year ago

In the json version, you keep the call to JSON.Stringify, and dataType: "json" and have an action that takes a string as parameter, public void HandleOperations(string operations), then you call var operationArr = JavaScriptSerializer.Deserialize<Operation>(operations);, you need to add a reference to System.Web.Extensions to your project

Sakthivel Over a year ago

you actually dont need a model, using traditional:true will do it in ajax post.

Mohammad Imran · Accepted Answer · 2016-05-03 13:18:57Z

-1

Add "traditional:true" parameter in your ajax.

Example:

var parentValueToPush=new Array();
$('[name=SelectedUsers]:checked').each(function () {
            parentValueToPush.push($(this).val());
            temp.push($(this).val());
        });
        $.ajax({
            url: //URL,
            type: 'get',
            traditional: true,
            dataType: 'html',
            cache: false,
            data: { SelectedUsers: parentValueToPush},
            success: function (data) {
                   //Result
            }
        });

edited May 3, 2016 at 13:18

answered May 3, 2016 at 12:28

Mohammad Imran

1251 silver badge6 bronze badges

Collectives™ on Stack Overflow

passing array from javascript to controller MVC 4

4 Answers 4

2 Comments

Comments

4 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related