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);
}

I am also seeing an error in the Error alert box that says [object Object] — Chuck B
– Chuck B, Commented Feb 19, 2014 at 20:16
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. — Dismissile
– Dismissile, Commented Feb 19, 2014 at 21:35
@Dismissile do you mean like this: error: function(xhr, status, errorThrown) { alert("Status: " + status + " Error: " + errorThrown); } - if so, it just says Error: not found. — Chuck B
– Chuck B, Commented Feb 20, 2014 at 13:32
@Dismissile Thank you - that's odd because it hits the breakpoint in the ResolutionFormDisplay method. I wonder what it's not finding.... — Chuck B
– Chuck B, Commented Feb 20, 2014 at 14:02

Colin DeClue · Accepted Answer · 2014-02-19 20:14:48Z

2

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);
}

answered Feb 19, 2014 at 20:14

Colin DeClue

2,2643 gold badges28 silver badges50 bronze badges

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

1 Comment

Chuck B Over a year ago

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

Jason Goemaat · Accepted Answer · 2014-02-19 20:20:57Z

1

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)},

answered Feb 19, 2014 at 20:20

Jason Goemaat

29.3k15 gold badges89 silver badges119 bronze badges

2 Comments

Chuck B Over a year ago

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 Over a year ago

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

gamegeek24 · Accepted Answer · 2014-02-19 21:36:08Z

0

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
}

answered Feb 19, 2014 at 21:36

gamegeek24

236 bronze badges

1 Comment

Chuck B Over a year ago

Sorry, that had no effect.

Chuck B · Accepted Answer · 2014-02-21 15:07:29Z

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);
}

Collectives™ on Stack Overflow

Can't send array from jQuery to MVC 4 controller

4 Answers 4

1 Comment

2 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

2 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related