Gary Pretty’s Blog

Recently I have been working on an MVC site using the Entity Framework. 

I have some related entities in my EF model, as show below in the form of “Reader” and “Category”, and the relationship between them, i.e. many to many.

When it came to proucing a view and action to perofrm the Create Reader action, I was somewhat puzzled as to how I could allow the user to select one or more categories for a reader. 

I started by having a view model that contained a list of all possible categories and then looping around these in my view and writing a check box out for each one.  When the form was submitted I looked through the form collection to find if any of the category check boxes had been selected.  I didn’t like this one bit and so I set out to find a cleaner way of carrying it out.

After some (quite a lot actually) searching, I stumbled accross the MultiSelectList type, which I could use in my ViewModel and then allow the default model binding to step in and do the leg work for me Great!

So, I created a view model, a simplified version of which you can see below;

    public class ReaderCreateViewModel : CustomViewModelBase
    {

        public ReaderCreateViewModel()
        {
            ReaderDetails = new Reader();
            CategoriesList = GetCategories(null);
        }

        public Reader ReaderDetails { get; set; }
        public MultiSelectList CategoriesList { get; private set; }
        public int[] SelectedCategories { get; set; }

        public MultiSelectList GetCategories(int[] selectedValues)
        {
            var te = new myEntities();
            List<Category> categories = te.Categories.ToList();
            return new MultiSelectList(categories, “id”, “Name”, selectedValues);
        }
    }

 As you can see from the code above, the view model contains my Reader entity, a list of type MultiSelectList, which is a list of available categories and an array of integers which represent the Id of any selected Categories.

Then to add a listbox to my view that will bind the MultiSelectList, I simply insert the following into my view.

            <p>
             <label for=”SelectedCategories”>Categories:</label>
        <%= Html.ListBox(“SelectedCategories”, Model.CategoriesList) %>
            </p>

Finally in my controller, I can simply check the SelectedItems object in my model for any selected Ids and add them to the Reader Categories list like this;

            if (model.SelectedCategories != null)
            {
                foreach (var selectedCat in model.SelectedCategories)
                {
                    int selectedCatId = selectedCat;
                    Category category = DataContext.Categories.Where(c => c.id                  == selectedCatId).FirstOrDefault();
                    reader.Categories.Add(category);
                }
            }

And that’s it.  Now there is probably a much better way of doing all or some of the above, but this worked perfectly for me when I needed it, so I hope it helps someone else out as well.  The final multi-select list box looked something like this;

Technorati Tags: ASP.NET MVC, Entity Framework, MVC