Can't send array from jQuery to MVC 4 controller

Question

I've googled this up and checked all over StackOverflow but I must be missing something... I have unobtrusive jQuery that hijaks a simple button click. It counts up the checkboxes and adds each checked boxes value to an array. The list is correct when I use an alert box in jQuery but the array never makes it to the controller side. The code flows to the controller but I break on var resolutionViewModel=new ResolutionViewModel(); and check trans - the argument is null. I'm new to jQuery and could really use the help here.

jQuery

// Return the selected transactions
function resolveTransactions() {
 $('#btnResolve').click(function() {
 var selectedTransactions = new Array();
 $('input[name="chkTransaction"]:checked').each(function() {
 selectedTransactions.push(this.value);
 });
 if (selectedTransactions.length > 0) {
 $.ajax({
 type: 'POST',
 dataType: 'json',
 url: 'http://localhost/AuditLog/Home/ResolutionFormDisplay',
 contentType: 'application/json; charset=utf-8',
 data: {trans : selectedTransactions},
 traditional: true,
 success: function (data) { alert(data); },
 error: function(xhr, status, errorThrown) { alert("Error: " + errorThrown); }
 });
 }
 });
};

Controller side

[HttpPost]
public PartialViewResult ResolutionFormDisplay(List<string> trans)
{
 var resolutionViewModel = new ResolutionViewModel();
 // fill Usernames dropdown selector in ViewModel
 // fill Status dropdown selector in ViewModel
 // fill list of transactionIds in ViewModel
 return PartialView("_ResolutionDialog", resolutionViewModel);
}

• Chuck B: I am also seeing an error in the Error alert box that says [object Object]
• Dismissile: Just a note that the error callback takes 3 parameters in the following order: xhr, status, errorThrown so I would change your error handler so pass in those parameters and alert on that instead of the xhr, which converted to a string will just show [object Object] like you noticed.
• Chuck B: @Dismissile do you mean like this: error: function(xhr, status, errorThrown) { alert("Status: " + status + " Error: " + errorThrown); } - if so, it just says Error: not found.
• Dismissile: not found means a 404
• Chuck B: @Dismissile Thank you - that's odd because it hits the breakpoint in the ResolutionFormDisplay method. I wonder what it's not finding....

Answer 1

Try having your controller accept a List, rather than just a single string (since you're not passing a single string):

[HttpPost]
public PartialViewResult ResolutionFormDisplay(List<string> value)
{
 var resolutionViewModel = new ResolutionViewModel();
 // fill Usernames dropdown selector in ViewModel
 // fill Status dropdown selector in ViewModel
 // fill list of transactionIds in ViewModel
 return PartialView("_ResolutionDialog", resolutionViewModel);
}

• Chuck B: I made the change Colin and had no difference after restart. Thanks for the suggestion though.

Answer 2

Posted JSON needs to have named properties matching parameters in your controller method. Check the 'network' tab in Chrome dev tools and see exactly what you're posting, it's probably something like this:

"{\"value\":\"...\"}"

There is no value property to pass to your controller method's value parameter. I think the best would be just to get rid of the `JSON.stringify" and accept a list like Colin's answer, but if you want to take it as a string, the JSON string needs to be the value property of an object, not the other way around:

data: {value : JSON.stringify(selectedTransactions)},

• Chuck B: I got rid of the JSON.Stringify and changed the signature to List<string> but no change in behavior. Tried Goggle Chrome Network tab and form data in headers lists the data out.
• Chuck B: Jason, The data in Google Chrome lists like this: transaction_table_length=10&chkTransaction=22&chkTransaction=23&chkTransaction=24&chkTransaction=25&chkTransaction=26&chkTransaction=27&chkTransaction=28&chkTransaction=29&chkTransaction=30&chkTransaction=31

Answer 3

Try passing your array as follows:

data:"{'trans':" + JSON.stringify(selectedTransactions)+"}"

Your method should be as follows:

 public void Method(List<string> trans)
{
 //Your implementation
}

• Chuck B: Sorry, that had no effect.

Answer 4

SOLUTION: The $.ajax postback was not sending properly formatted data to the controller. I discovered this by using the network tab in IE and looking at the Request Body of the POSTed http. It looked like this:transaction_table_length=10&chkTransaction=22&chkTransaction=23 -- It should have looked like this: {"trans":["22","23"]}. To solve this issue I stringified the property name and array as shown below, changed the dataType to 'text', and made the parameter on the controller action method take a String[] trans.

jQuery

// Return the selected transactions
function resolveTransactions() {
 $('#btnResolve').click(function() {
 var selectedTransactions = new Array();
 $('input[name="chkTransaction"]:checked').each(function() {
 selectedTransactions.push(this.value);
 });
 if (selectedTransactions.length > 0) {
 $.ajax({
 type: 'POST',
 dataType: 'text',
 url: 'http://localhost/AuditLog/Home/ResolutionFormDisplay',
 contentType: 'application/json; charset=utf-8',
 data: JSON.stringify({ trans:selectedTransactions }),
 traditional: true,
 success: function (data) { alert(data); },
 error: function(xhr, status, errorThrown) { alert(" Error: " + errorThrown); }
 });
 } else {
 alert('You must select (check) at least one transaction to apply a resolution.');
 return false;
 }
 return false;
 });
};

MVC 4 controller action

[HttpPost]
public PartialViewResult ResolutionFormDisplay(string[] trans)
{
 var resolutionViewModel = new ResolutionViewModel();
 // fill Usernames dropdown selector in ViewModel
 // fill Status dropdown selector in ViewModel
 // fill list of transactionIds in ViewModel
 return PartialView("_ResolutionDialog", resolutionViewModel);
}