How can a multi-select-list be edited using asp.net mvc?

Question

I'd like to edit an object like the one below. I'd like the UsersSelectedList populated with one or more Users from the UsersGrossList.

Using the standard edit-views in mvc, I get only strings and booleans (not shown below) mapped. Many of the examples I find on google utilizes early releases of the mvc framework whereas I use the official 1.0 release.

Any examples of the view is appreciated.

public class NewResultsState
{
    public IList<User> UsersGrossList { get; set; }
    public IList<User> UsersSelectedList { get; set; }
}

Answer 1

Use Html.ListBox in combination with IEnumerable SelectListItem

View

         <% using (Html.BeginForm("Category", "Home",
      null,
      FormMethod.Post))
       { %>  
        <%= Html.ListBox("CategoriesSelected",Model.CategoryList )%>

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

Controller/Model:

        public List<CategoryInfo> GetCategoryList()
    {
        List<CategoryInfo> categories = new List<CategoryInfo>();
        categories.Add( new CategoryInfo{ Name="Beverages", Key="Beverages"});
        categories.Add( new CategoryInfo{ Name="Food", Key="Food"});
        categories.Add(new CategoryInfo { Name = "Food1", Key = "Food1" });
        categories.Add(new CategoryInfo { Name = "Food2", Key = "Food2" });
        return categories;
    }

    public class ProductViewModel
    {
        public IEnumerable<SelectListItem> CategoryList { get; set; }
        public IEnumerable<string> CategoriesSelected { get; set; }

    }
    public ActionResult Category(ProductViewModel model )
    {
      IEnumerable<SelectListItem> categoryList =
                                from category in GetCategoryList()
                                select new SelectListItem
                                {
                                    Text = category.Name,
                                    Value = category.Key,
                                    Selected = (category.Key.StartsWith("Food"))
                                };
      model.CategoryList = categoryList;

      return View(model);
    }

Answer 2

Assuming that User model has Id and Name properties:

<%= Html.ListBox("users", Model.UsersGrossList.Select(
    x => new SelectListItem {
        Text = x.Name,
        Value = x.Id,
        Selected = Model.UsersSelectedList.Any(y => y.Id == x.Id)
    }
) %>

Or with View Model

public class ViewModel {
    public Model YourModel;
    public IEnumerable<SelectListItem> Users;
}

Controller:

var usersGrossList = ...
var model = ...

var viewModel = new ViewModel {
    YourModel = model;
    Users = usersGrossList.Select(
        x => new SelectListItem {
            Text = x.Name,
            Value = x.Id,
            Selected = model.UsersSelectedList.Any(y => y.Id == x.Id)
        }
    }

View:

<%= Html.ListBox("users", Model.Users ) %>

Answer 3

@ eu-ge-ne < thankyou so much for your answer - was having real trouble finding a way to multiselect a list of values from and to model. Using your code I used the ListBoxFor Html control in my Edit/Update page and passed the whole model back to my controller (including the mulisple selected values) on Save.

<%= Html.ListBoxFor(model => model, Model.UsersGrossList.Select( 
x => new SelectListItem { 
    Text = x.Name, 
    Value = x.Id, 
    Selected = Model.UsersSelectedList.Any(y => y.Id == x.Id) 
} 

) %>