Post
Ask Question

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

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:

  1. <!DOCTYPE html>  
  2. <html>  
  3. <body>  
  4.   
  5. <select>  
  6.   <optgroup label="Mens Clothing">  
  7.     <option value="T-shirts">T-shirts</option>  
  8.     <option value="TrackSuit">Track Suit</option>  
  9.   </optgroup>  
  10.   <optgroup label="Mens Footwear">  
  11.     <option value="Shoes">Shoes</option>  
  12.     <option value="Sandals">Sandals</option>  
  13.   </optgroup>  
  14. </select>  
  15.    
  16. </body>  
  17. </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.
web application
                                                                            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.

mvc controller 
                                                                     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:
  1.    
  2. private testEntities db = new testEntities();  
  3.   
  4. // GET: Products  
  5.   
  6. public ActionResult Index()  
  7.   
  8. {  
  9.   
  10. ViewBag.ProductList = new SelectList(db.Products.ToList(), "Id", "Name", "Category", 1);  
  11.   
  12. return View();  
  13.   
  14. }  

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.

code  
                                                                                              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:

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

Figure 9 shows the result in a browser:

   
                                     Figure 9

I hope you have enjoyed this article.


Similar Articles