How to Submit Contents of 2 Select Boxes

Question

Hi All

I have an ASP.NET MVC applciation containing 2 list boxes: #AvailableItems & #AssignedItems. I can transfer items from one box to the other.

I also have some other related values stored as attributes on the Save link that need to get submitted too, like IDs and stuff. When I post the data, I can submit the attributes easily enough (and then ModelBind in the Action method) using the following jQuery:

$.post($(this).attr("href"), $.getAttributes($(this)), function(result)

{
    //do some fancy stuff
}

, "json");

When I click 'Save' I'd like to be able to submit the contents of both list boxes to an Action method on the associated controller. Ideally, the Action method would take the form of something like this:

[AcceptVerbs(HttpVerbs.Post)]
public JsonResult UpdateFactsheetUniverse(WebFactsheetUniverse wfu
    , List<string> availableItems
    , List<string> assignedItems)
{
    // do some fancy stuff
    return Json("saved");
}

Cany anyone suggest how I could gather the the contents of both list and submit them along with the rest of the data, so that my Action method can take them as parameters?

If not, could somebody suggest another solution?

Thanks

Dave

Answer 1

I think that eventually, for the model binder to work, you'll need to end up with form parameters that look like:

&availableItems[0]=blah&availableItems[1]=foo&assignedItems[0]=bar&...

This will allow the model binder to parse the form parameters into an array (not sure if it will do a List, but you could try it and if it doesn't work change to using string[] instead).

Assuming you're using a multiselect for it, it might look something like:

var params = ''
$('#AvailableItems option').each( function(i) {
    params += '&availableItems[' + i + ']=' + $(this).val();
});
$('#AssignedItems option').each( function(i) {
    params += '&assignedItems[' + i + ']=' + $(this).val();
});