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

Question

Hi all,

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

Why not have the list of items in checkboxes. Then you could iterate through the checkboxes in your action and grab all selected checkboxes.

<% foreach(var item in Model.Items) { %>

   <%= Html.CheckBox(String.Format("ItemID.{0}", item.ID)) %> // each item tagged by the items id

<% } %>

public ActionResult MyAction(FormCollection formCollection)
{

            foreach (var key in collection.AllKeys.Where(k => !k.Contains("SubmitButton")).ToArray<string>())
            {
                 // iterates thru check boxes we got rid of the button 

            }
}

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>

Answer 3

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