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?

Stonefly

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

Fafnir

ya thats actually what i ended up doing. – Stonefly

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>

Incept

Thanks I went with a solution similar to this. I just added the items to a Hidden and got it from my FormCollection in the controller – Stonefly

Not at all, other option is simple than this, you can do it with selecting all items when form submitting but i think its not good solution. – Incept

Answer 3

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 

            }
}

Tenantry

The database items could literally be in the thousands. The items the user will be needing will range from 1 - 10 in most cases. I wanted an easy way for the user to see all the items selected. I was hoping that I could bind the html.listbox or something and get all the items that way...don't really know if that is possible / the right approach – Stonefly