How do you properly create a MultiSelect <select> using the DropdownList helper?

Question

(sorry, there are several item here but none seems to allow me to get this working.)

I want to create a DropDownList which allows multiple selection. I am able to populate the list but I can't get the currently selected values to seem to work.

I have the following in my controller:

ViewBag.PropertyGroups = from g in db.eFinGroups
                              where g.GroupType.Contents == "P"
                              select new
                              {
                                  Key = g.Key,
                                  Value = g.Description,
                                  Selected = true
                              };

ViewBag.SelectedPropertyGroups = from g in company.Entities .First().Properties.First().PropertyGroups select new { g.eFinGroup.Key, Value = g.eFinGroup.Description };

In the view I have:

@Html.DropDownListFor(model => model.PropertyGroupsX, 
   new MultiSelectList(ViewBag.PropertyGroups
             , "Key", "Value"
             , ViewBag.SelectedPropertyGroups), 
new { @class = "chzn-select", data_placeholder = "Choose a Property Group", multiple = "multiple", style = "width:350px;" })

PropertyGroupX is a string[] in the model.

I have tried all types of iterations with the selected properties... passing just the value, just the key, both, etc.

Also, what type is PropertyGroupX supposed to be? Is string array correct? Or should it be a dictionary that contains the current propertygroups? I really am having a hard time finding doc on this.

Someone suggested I should be using ListBoxFor. I have changed to that and still have the same issue. The selected values are not being set as selected when the option tags are rendered. Here is what I have tried:

@Html.ListBoxFor(model => model.PropertyGroups, new MultiSelectList(ViewBag.PropertyGroups, "Key", "Value"))

I have tried the model.PropertyGroups as a collection of string matching the Values, as a collection of Guid matching this IDs and as an anonymous type with both a Key and Value to match the items in the ViewBag. Nothing seems to work.

Answer 1

You don't use DropDownListFor if you want to create a multiselect list. You use the ListBoxFor helper.

View model:

public class MyViewModel
{
    public string[] SelectedIds { get; set; }
    public IEnumerable<SelectListItem> Items { get; set; }
}

Controller:

public ActionResult Index()
{
    var model = new MyViewModel
    {
        // preselect the first and the third item given their ids
        SelectedIds = new[] { "1", "3" }, 

        // fetch the items from some data source
        Items = Enumerable.Range(1, 5).Select(x => new SelectListItem
        {
            Value = x.ToString(),
            Text = "item " + x
        })
    };
    return View(model);
}

View:

@model MyViewModel
@Html.ListBoxFor(x => x.SelectedIds, Model.Items)