jquery - How can I post an array of string to ASP.NET MVC Controller without a form?

ID : 20255

viewed : 13

Tags : jqueryasp.net-mvcjsonjquery

Top 5 Answer for jquery - How can I post an array of string to ASP.NET MVC Controller without a form?

vote vote

95

I modified my response to include the code for a test app I did.

Update: I have updated the jQuery to set the 'traditional' setting to true so this will work again (per @DustinDavis' answer).

First the javascript:

function test() {     var stringArray = new Array();     stringArray[0] = "item1";     stringArray[1] = "item2";     stringArray[2] = "item3";     var postData = { values: stringArray };      $.ajax({         type: "POST",         url: "/Home/SaveList",         data: postData,         success: function(data){             alert(data.Result);         },         dataType: "json",         traditional: true     }); } 

And here's the code in my controller class:

public JsonResult SaveList(List<String> values) {     return Json(new { Result = String.Format("Fist item in list: '{0}'", values[0]) }); } 

When I call that javascript function, I get an alert saying "First item in list: 'item1'". Hope this helps!

vote vote

82

FYI: JQuery changed the way they serialize post data.

http://forum.jquery.com/topic/nested-param-serialization

You have to set the 'Traditional' setting to true, other wise

{ Values : ["1", "2", "3"] } 

will come out as

Values[]=1&Values[]=2&Values[]=3 

instead of

Values=1&Values=2&Values=3 
vote vote

76

Thanks everyone for the answers. Another quick solution will be to use jQuery.param method with traditional parameter set to true to convert JSON object to string:

$.post("/your/url", $.param(yourJsonObject,true)); 
vote vote

61

Don't post the data as an array. To bind to a list, the key/value pairs should be submitted with the same value for each key.

You should not need a form to do this. You just need a list of key/value pairs, which you can include in the call to $.post.

vote vote

58

In .NET4.5, MVC 5

Javascript:

object in JS: enter image description here

mechanism that does post.

    $('.button-green-large').click(function() {         $.ajax({             url: 'Quote',             type: "POST",             dataType: "json",             data: JSON.stringify(document.selectedProduct),             contentType: 'application/json; charset=utf-8',         });     }); 

C#

Objects:

public class WillsQuoteViewModel {     public string Product { get; set; }      public List<ClaimedFee> ClaimedFees { get; set; } }  public partial class ClaimedFee //Generated by EF6 {     public long Id { get; set; }     public long JourneyId { get; set; }     public string Title { get; set; }     public decimal Net { get; set; }     public decimal Vat { get; set; }     public string Type { get; set; }      public virtual Journey Journey { get; set; } } 

Controller:

[AcceptVerbs(HttpVerbs.Post)] public ActionResult Quote(WillsQuoteViewModel data) { .... } 

Object received:

enter image description here

Hope this saves you some time.

Top 3 video Explaining jquery - How can I post an array of string to ASP.NET MVC Controller without a form?

Related QUESTION?