How can I pass more than one array using $.ajax to ASP.NET MVC action?

Question

I'd like to pass the contents of two sets of textboxes to an action on my controller using jQuery $.ajax. Code I have so far is as follows (all abbreviated for ease of reading):

In my html:

<div class="venue-holder">
    <input class="tb-venue" id="venue" name="venue" readonly="readonly" type="text" value="Esfahan" />
    <input class="oldVenue" id="oldvenue" name="oldvenue" type="hidden" value="Shiraz" />
    <input class="tb-venue" id="venue" name="venue" readonly="readonly" type="text" value="Tehran" />
    <input class="oldVenue" id="oldvenue" name="oldvenue" type="hidden" value="Tabriz" />
</div>

In my controller:

[AcceptVerbs(HttpVerbs.Post)]
public ActionResult UpdateVenue(string[] venue, string[] oldvenue)
{
    // do some stuff... 
}

In my jQuery:

$('form#formUpdateVenue').submit(function(event) {
    event.preventDefault();
    var venue = $('input[name=venue]');
    var oldvenue = $('input[name=oldvenue]')
    $.ajax({
        url: '/Admin/UpdateVenue',
        type: 'POST',
        dataType: 'json',
        data: {venue: venue, oldvenue: oldvenue},
        success: alert()
    });

The issue:

The jquery shown above does not work. When I submit the webpage 'hangs' and the action on my controller does not get called.

However, if I substitute the data: portion with either of the following all works fine:

data: venue,

or:

data: old venue,

In other words, I can pass one set of textboxes to my action and by debugging I confirm that I get a string array of the correct values.

However, when I try to pass both I get an error. I have tried all of the below to no avail:

data: {venue: venue, oldvenue: oldvenue},
data: {venue, oldvenue},

How can I pass both arrays?

Solved - updated jQuery based on input from Darin

$('form#formUpdateVenue').submit(function(event) {
    event.preventDefault();
    var tb = $('input[name=venue]');
    var tbVenue = new Array();

    tb.each(function() {
        tbVenue.push($(this).val());
    });

    var tbOld = $('input[name=oldvenue]');
    var tbOldVenue = new Array();

    tbOld.each(function() {
        tbOldVenue.push($(this).val());
    });


    $.ajax({
        url: '/Admin/UpdateVenue',
        type: 'POST',
        dataType: 'json',
        data: { venue: tbVenue, oldvenue: tbOldVenue },
        traditional: true,
        success: alert('Ok')
    });
});

Answer 1

Try this:

$.ajax({
    url: '/Admin/UpdateVenue',
    type: 'POST',
    dataType: 'json',
    data: { venue: [ 'elem1', 'elem2' ], oldvenue: [ 'elemA', 'elemB' ] },
    traditional: true,
    success: function(result) {
        alert('ok');
    }
});

Notice that the venue and oldvenue parameters have to be arrays and not strings as in your case. You were simply copying them from the values of an input field which returns a single string. So if you want an array you need to construct a javascript array object.

Also notice the traditional: true config value which is required to successfully perform the model binding if using jquery 1.4 and higher.

Answer 2

Remnant,

the 1st thing i notice about the above html in the div, is the duplicate ids (id="venue" - id="oldvenue"). this is going to cause you issues. I think you'd be better sorting that out first. then, take a look in fiddler or firebug and you should see the error that's occurring in your ajax call. My 'guess' is that your 'routes' may also need tweaking in the global.asax file, then your action 'should' (hopefully) fire correctly.

as i said, firebug/fiddler to the rescue perhaps...

[edit] - had a few 'obvious' further thoughts. have you tried the following action signature:

public ActionResult UpdateVenue(FormCollection collection)

and then examine the request as such:

var venue = collection["venue"]; 
var oldVenue = collection["oldvenue"];

etc, etc. see example at:

http://code-inside.de/blog-in/2009/04/06/howto-from-the-view-to-the-controller-in-aspnet-mvc-with-modelbinders/

also, look at the $ajax serialize() method to use in your code:

http://api.jquery.com/serialize/