Implementing HTML Optgroup in DropDownList Using ASP.NET MVC 5 and Entity Framework

Gowtham K

23 Comments

Join the conversation! Your thoughts help the community grow.

Ketan Shinde8y ago
It is simple way
Ketan Shinde8y ago
I want dynamically
- Gowtham K8y ago
  Ketan Shinde the control binds the data dynamically
Sunny Kachwala9y ago
I would like to add attribute data-max-options="1" like following <optgroup label="Reg01 Form Status" data-selval="3" data-max-options="1"> <option data-selval="8">Any</option> <option data-selval="9">Not Verified</option> <option data-selval="10">Verified</option> </optgroup>
- Gowtham K9y ago
  Sunny Kachwala, please can you explain it with more detail
Arul R11y ago
Nice share!!!
Upendra Pratap Shahi11y ago
nice explain sir..
Sanjay Sabariya11y ago
nice one..
Rajeesh Menoth11y ago
Good One
Ankit Bansal11y ago
Good one..Thanks for sharing..
Santhakumar Munuswamy11y ago
Good article. Thanks for sharing
Ratnesh Singh11y ago
Nice. ....
- Gowtham K11y ago
  Thanks a lot Ratnesh
Debasis Saha11y ago
Good One..
- Gowtham K11y ago
  Thank You
Yashwanth Muthineni11y ago
Nice Article
- Gowtham K11y ago
  Thank You
Vaikesh K P11y ago
Nice Share :)
- Gowtham K11y ago
  Thank You
Karthikeyan K11y ago
Good one
- Gowtham K11y ago
  Thank You
Karthikeyan K11y ago
Thanks for share sir...
- Gowtham K11y ago
  Thank You

Introduction

Here I will explain how to implement the HTML optgroup in a dropdownlist dynamically using ASP.NET MVC and Entity Framework.

Description

The HTML optgroup tag groups related options in a drop-down list. If you have a long list of options, groups of related options are easier to handle for a user.

For example:

<!DOCTYPE html>
<html>
<body>
<select>
<optgroup label="Mens Clothing">
<option value="T-shirts">T-shirts</option>
<option value="TrackSuit">Track Suit</option>
</optgroup>
<optgroup label="Mens Footwear">
<option value="Shoes">Shoes</option>
<option value="Sandals">Sandals</option>
</optgroup>
</select>
</body>
</html>

The result is as in Figure 1.

Figure 1

Click here for more information about optgroup.

Now, we will do the same thing dynamically using ASP.NET MVC and Entity Framework.

Step 1

Create an MVC 5 project as in the following:

Open Visual Studio 2012 and create a new project.
Select "File" -> "New" -> "Project...".
Select Web in the installed templates and click ASP.NET Web Application.
Provide the name for the project and click OK as in Figures 2 and 3.

Figure 2

Figure 3

I am using the Entity Framework with Database First approach, so the Entity Framework builds default model classes and context classes.

My database schema is as in Figure 4.

Figure 4

My table structure is as in Figure 5.

Figure 5

Step 2

Now to scaffold the Controller. Create a MVC5 Controller class.

Right-click on Controller folder then select Add, click Controller and create an MVC 5 controller class as in Figures 6 and 7.

Figure 6

Figure 7

The ProductsController class is created with some predefined code. For demo purposes I have modified the Index Action method in the ProductsController.

Write the following code in ProductsController.cs:

private testEntities db = new testEntities();
// GET: Products
public ActionResult Index()
{
ViewBag.ProductList = new SelectList(db.Products.ToList(), "Id", "Name", "Category", 1);
return View();
}

The ProductList ViewBag item is a SelectList that contains the list of Products and also has information about the data text field, data value field, default selected value and finally the least grouping field that will be used to create the optgroup.

The SelectList now contains three more overloaded constructors that take the grouping field name as one of the parameter as in Figure 8.

Figure 8

ID Maps to data value field
Name Maps to data text field
Category Maps to group field

I have created a ViewBag item ProductList and this item will be used to create a dropdownlist in the Index.cshtml.

Step 3

Now to work on the UI.

In the Index.cshtml under product view, I will create a dropdownlist and its name will be set to productlist, so the dropdownlist helper will automatically look for a view bag item with that name and use it as the source of dropdownlist.

Here is the UI code:

<div class="row">
<div class="col-md-4">
<h3>OptGroup</h3>
@Html.DropDownList("ProductList")
</div>
</div>

Figure 9 shows the result in a browser:

Figure 9

I hope you have enjoyed this article.