SelectList with SelectListGroup

Question

I'm trying to return a SelectList with <optgroup>'s using SelectListGroup, but the code below only returns the values in the SelectList without the groups. How can I have my select list separated by groups?

public SelectList MyList()
{
   var group1 = new SelectListGroup() { Name = "Group 1" };
   var group2 = new SelectListGroup() { Name = "Group 2" };

   var items = new List<SelectListItem>();

   items.Add(new SelectListItem() { Value = "1", Text = "Item 1", Group = group1 });
   items.Add(new SelectListItem() { Value = "2", Text = "Item 2", Group = group2 });

   return new SelectList(items, "Value", "Text");
}

Answer 1

I find this method works, which uses a strongly-typed approach:

View model:

public class PageViewModel
{
    public int SelectedDropdownItem { get; set; }
    public IEnumerable<SelectListItem> DropdownList { get; set; }
}

Example entity model (for this example):

public class Entity
{
    public int Id { get; set; }
    public string Name { get; set; }
    public bool IsActive { get; set; }
    public bool IsDefault { get; set; }
}

Controller:

// Get list for the dropdown (this uses db values)
var entityList = db.Entity.ToList();

// Define the Groups
var group1 = new SelectListGroup { Name = "Active" };
var group2 = new SelectListGroup { Name = "Allowed" };

// Note - the -1 is needed at the end of this - pre-selected value is determined further down
// Note .OrderBy() determines the order in which the groups are displayed in the dropdown
var dropdownList = new SelectList(entityList.Select(item => new SelectListItem
{
    Text = item.Name,
    Value = item.Id,
    // Assign the Group to the item by some appropriate selection method
    Group = item.IsActive ? group1 : group2
}).OrderBy(a => a.Group.Name).ToList(), "Value", "Text", "Group.Name", -1);

// Assign values to ViewModel
var viewModel = new PageViewModel
{
    // Assign the pre-selected dropdown value by appropriate selction method (if needed)
    SelectedDropdownItem = entityList.FirstOrDefault(a => a.IsDefault).Id,
    DropdownList =  dropdownList
};

View:

<!-- If needed, change 'null' to "Please select item" -->
@Html.DropDownListFor(a => a.SelectedDropdownItem, Model.DropdownList, null, new { @class = "some-class" })

Hope it helps someone.