formcollection only holds the selected html.listbox items values? MVC

Question

My scenario is this: I have two listbox's, one that contains all my database items, and an empty one. The user adds the items needed from the full listbox to the empty listbox.

I'm using a form to submit all the items the user has added.

The problem is, only the selected items from the listbox are submitted. So if the user deselects some of the items, they wont be submitted in the form. My view looks like so:

<% using (Html.BeginForm("MyAction", "MyController"))
   { %>

    <%= Html.ListBox("AddedItems", Model.Items)%>

    <input type="submit" value="Submit" name="SubmitButton"/>
<% } %>

My Controller looks like so:

public ActionResult MyAction(FormCollection formCollection)
{
    var addedItems = formCollection["AddedItems"].Split(',');

    //....more code that does stuff with the items
}

Am I going about everything the wrong way? Is there better way to submit the items? What would you do?

Answer 1

I am doing this as well, I think the way I solved it is a bit more elegant. Essentially I just have a Jquery function that runs before the form post that selects all the options.

    $(function () {
        $("form").submit(function (e) {
            $("#box2View option").attr("selected", "selected");
        });
    });

Answer 2

Because it's just selectbox. You cannot post all values in selectbox. You have to use javascript to catch added items and store them in hidden input.

Un-tested code, but i think it help you.

<script type="text/javascript">
    function addItem() {
        var allItems = document.getElementById("AllItems");
        var op = allItems.options[allItems.selectedIndex];
        var hdSelectedItems = document.getElementById("hdSelectedItems");
        var lbSelectedItems = document.getElementById("lbSelectedItems");

        lbSelectedItems.options[lbSelectedItems.options.length] = op;

        if (hdSelectedItems.value != '') {
             hdSelectedItems.value += ","
        }
        hdSelectedItems.value += op.value;
    }
</script>
<%= Html.Hidden("hdSelectedItems") %>
<%= Html.ListBox("AllItems", Model.Items)%>
<%= Html.ListBox("lbSelectedItems") %>
<a href="#" onclick="addItem(); return false;">Add</a>