Optgroup in DropDownlistFor MVC 4?

Question

I need to group elements within DropDownListFor in MVC 4.

I have couple of dropdowns as teams and projects. Based on team I am getting the projects for which I have a table as project which contains a column called as entitytype. There are 3 entitytypes as client,assignment and project.

I have written a query to get the projects based on the team. Now I want to group the projects based on the entitytype.

For example, for Team1, there are 5 projects as 2 clients, 2 assignments and 1 project. So, it should be displayed as:

In the first dropdown:

• Team: Team1

In the second dropdown:

• Project:

  1. Client
  2. Client 1
  3. Client 2

---

• Assignment:

  1. Assignment 1
  2. Assignment 2

---

• Project:

  1. Project 1

I searched regarding this a lot but totally got confused as I got a lot of results as most of them were like framework doesn't support any extension for this so custom one should be written.

My requirement is simple: I need to just group my query result into three categories as Clients,below that Assignments and next to that Projects. The one having entitytype Client should come under that and others accordingly.

Following is my code for getting the project based on the team:

 public List<Project> GetAllProjectForTeam(int teamId)
        {
            List<Project> project = new List<Project>();
            var query = (from p in db.Projects.AsEnumerable()
                             join pt in db.ProjectTeams.AsEnumerable() on p.ProjectId equals pt.ProjectId
                             join tm in db.Teams.AsEnumerable() on pt.TeamId equals tm.TeamId
                             where pt.TeamId == teamId
                             select p
                             ).ToList();

            project = query.Distinct().ToList<Project>();
            return project.ToList();
        }

and following is my razor code for dropdown:

<div class="editor-label">
         @Html.LabelFor(model => model.TeamId,"Team")
         </div>
            <div class="cssclass">
                 @Html.DropDownListFor(model => model.TeamId, new SelectList(Model.ddlTeam, "Value", "Text"), "Select Team", new { id = "TeamID", onchange = "GetProjects()", @class = "form-control", UpdateTargetId = "atag" })
              @Html.ValidationMessageFor(model => model.TeamId)
          </div>

              <div class="editor-label">
                  @Html.LabelFor(model => model.ProjectId, "Project")
               </div>
               <div class="cssclass">
                     @Html.DropDownListFor(model => model.ProjectId, new SelectList(Model.ddlProject, "Value", "Text"), "Select Project", new { id = "ProjectID", onchange = "ShowDocsList()", @class = "form-control" })
                       @Html.ValidationMessageFor(model => model.ProjectId)
                      </div>

So,this is what my problem is.Any help would be appreciated.I have already spent a lot of time in this but could not lead to any result. Thanks in advance.

Answer 1

As @EdSF alluded to, there isn't an Html helper that will allow an option group for dropDownList, yet. Details: http://www.kashyapas.com/2014/06/09/html-ldquooptgrouprdquo-support-in-dropdownlist-asp-net-mvc-5-2/.

If you don't want to download an RC, you can always create your own custom helper to add support for grouped drop down lists. Example: http://weblogs.asp.net/raduenuca/asp-net-mvc-extending-the-dropdownlist-to-show-the-items-grouped-by-a-category

It may seem daunting, at first, to extend or create your own helpers but it's WELL WORTH the time and effort. It can save you loads of headache and code for more complicated projects if you can do this type of customization.