HTML “optgroup” support in DropDownList – ASP.NET MVC 5.2

On May 27th Microsoft’s .NET Web Dev & Tools team released the RC or Release Candidate of ASP.NET MVC 5.2. You can read about the announcement here: http://blogs.msdn.com/b/webdev/archive/2014/05/27/release-candidates-for-asp-net-mvc-5-2-web-api-2-2-and-web-pages-3-2.aspx. As with anybody i was excited to see what’s coming up and i started going through the what’s new in ASP.NET MVC 5.2. The team also has a release post titled “What’s New in ASP.NET MVC 5.2 RC”. You can read that post here: http://blogs.msdn.com/b/webdev/archive/2014/05/27/release-candidates-for-asp-net-mvc-5-2-web-api-2-2-and-web-pages-3-2.aspx

What caught my attention was one item in Bug Fixes. I was just going through all the bug fixes that made it to 5.2 RC. If you are curious to know the bugs that were fixed as part of 5.2 RC, head over to this page on codeplex: https://aspnetwebstack.codeplex.com/workitem/list/advanced?keyword=&status=Closed&type=All&priority=All&release=v5.2%20RC&assignedTo=All&component=MVC&sortField=AssignedTo&sortDirection=Ascending&reasonClosed=Fixed&size=25. Take a look at the work item ID 1703. The work item title is “Add an extra constructor to SelectList class making it easier to create grouped lists.”. This is what made me look into this bug fix and figure what feature has been provided.

Here is what has been added as a feature with this bug fix: <optgroup> support for HTML <select>. HTML <select> provides a <optgroup> tag option to group the items of the select list. Here is a screenshot of <optgroup> in action:

Check out the documentation of optgroup on W3C site – http://www.w3schools.com/tags/tag_optgroup.asp

Prior to ASP.NET MVC 5.2 we were not able to add the optgroup by using the DropDownList wrapper & SelectList/MultiSelectList object. The select list objects were providing only the feature of selected value when creating a DropDownList. With this bug fix in ASP.NET 5.2 RC, we will be able to get the optgroup support when creating a DropDownList. So lets see how to work with this new feature step by step.

Pre Requisites:

• If you are using Visual Studio 2012, download ASP.NET and Web Tools 2013.1 for Visual Studio 2012.
• If you are using Visual Studio 2013, download Visual Studio 2013 Update 1  or above. This update is needed for editing ASP.NET MVC 5.2 Razor Views.

Step 1: Create a ASP.NET MVC App

I will be using Visual Studio 2013 Ultimate as my IDE. In order to create a new web app start VS2013 and select File > New > Project. In the New Project Dialog select Visual C# > Web > ASP.NET Web Application.

Next, you will presented with a template selection. Select MVC and leave the rest of the options as is and click on Ok.

Visual Studio will go ahead and prepare the ASP.NET MVC Project.

Step 2: Install ASP.NET MVC 5.2 RC Nuget Package

ASP.NET MVC 5.2 RC has been made available through Nuget package. Once the ASP.NET MVC Project is created, open the Package Manager Console window from Tools > Nuget Package Manager > Package Manager Console. Run the command: Install-Package Microsoft.AspNet.Mvc -Version 5.2.0-rc –Pre. This will go ahead and put the ASP.NET MVC 5.2 bits to the project we just created.

Step 3: Create a Model to use

For the demo purpose, i will be creating a simple Car object. The Car object will have a ID of the Car, Name of the Car and a Category property. Category property is the column we will use to group the cars based on their origin and we want the the select list to group the cars by the category. Here is the source code of the Car model object:
https://gist.github.com/lohithgn/5e36dd76382971a3b929.js

Step 4: Prepare SelectList in Controller

For the sake of the demo, i am using the HomeController and i will add a CarsList ViewBag item in Index action method. The CarsList ViewBag item is nothing but a SelectList which contains the list of cars and also has information about the data text field, data value field, default selected value and last but not the least grouping field which will be used to create the optgroup. Here is the code snippet:
https://gist.github.com/lohithgn/9b3cfc9c072259284749.js

 

The SelectList now contains 3 more overloaded constructors which take the grouping field name as one of the parameter. Here is a snapshot of the constructors supported by SelectList:

In my code, Id maps to data value field, Name maps to data text field and Category maps to data group field. I have created a ViewBag item called CarsList and this Item will be used to create a DropDownList in the Index.cshtml.
Step 5: Prepare the UI

In Index.cshtml i.e. the view – i will create a simple DropDownList and its name will be set to “CarsList” so that the DropDownlist helper will automatically look for a ViewBag item with that name and use it as the source of the DropDownList. What we should see as a output is the values of Category field in the Car object will be used as optgroup value and the options will be grouped accordingly in the <select> tag. Here is the UI code:

https://gist.github.com/lohithgn/ac6dbf270aab32cc5978.js

Following is a screen shot of the output:

 

Through this post we looked a simple and very trivial feature which is now provided out of the box my ASP.NET MVC. Although simple, i felt that this is one of the scenario that many web project will call for. So its good that this item was picked up and was made available as a feature in 5.2 release. Hope this post was interesting enough for you and that you will also like to play around with this.

Till next time – Happy Coding. Code with Passion, Decode with Patience.