In this article I will explain with an example, how to implement
Grouped DropDownList using
HTML OptGroup element in
ASP.Net MVC Razor.
In
HTML DropDownList OptGroup element, which is used to Group items (options) of a
DropDownList while in
MVC, the Grouping of
DropDownList items (options) is done using
SelectListItem class and
SelectListGroup class.
Database
In order to populate
DropDownList with
Parent Child
relationship, I have made use of two tables namely
VehicleTypes and
VehicleSubTypes. The schema and the data present in both the tables are as follows.
VehicleTypes
![Implement Grouped DropDownList using OptGroup in ASP.Net MVC]()
![Implement Grouped DropDownList using OptGroup in ASP.Net MVC]()
VehicleSubTypes
![Implement Grouped DropDownList using OptGroup in ASP.Net MVC]()
![Implement Grouped DropDownList using OptGroup in ASP.Net MVC]()
Note: You can download the database table SQL by clicking the download link below.
Creating an Entity Data Model
Following is the Entity Data Model of the VehicleTypes and the VehicleSubTypes tables which will be used later in this project.
![Implement Grouped DropDownList using OptGroup in ASP.Net MVC]()
Controller
The Controller consists of following Action methods.
Action method for handling GET operation
Inside this Action method, first the records from the database are fetched using
Entity Framework.
Then a nested loop is executed over the records VehicleTypes and VehicleSubTypes tables, where the VehicleTypes are used to create a SelectListGroup item and the VehicleSubTypes are used to create the SelectListItem where the Group property is assigned with the respective Group.
Finally, the Generic List of SelectListItem class is returned to the View.
Action method for handling POST operation
This Action method handles the call made from the POST function from the View.
When the Form is submitted, the posted values are captured through the Request.Form collection.
The values of
VehicleId and
VehicleName are fetched and are set into a
TempData object which will be later displayed in View using
JavaScript Alert Message Box.
public class HomeController : Controller
{
// GET: Home
public ActionResult Index()
{
List<SelectListItem> items = new List<SelectListItem>();
VehiclesEntities entities = new VehiclesEntities();
//Loop and add the Parent Nodes.
foreach (VehicleType type in entities.VehicleTypes)
{
//Create the Group.
SelectListGroup group = new SelectListGroup() { Name =type.Name };
//Loop and add the Items.
foreach (VehicleSubType subType in entities.VehicleSubTypes.Where(v => v.VehicleTypeId == type.Id))
{
items.Add(new SelectListItem
{
Value = subType.Id.ToString(),
Text = subType.Name,
Group = group
});
}
}
return View(items);
}
[HttpPost]
public ActionResult Submit(FormCollection formcollection)
{
TempData["Message"] = "Vehicle Name: " + formcollection["VehicleName"];
TempData["Message"] += "\\nVehicle Id: " + formcollection["VehicleId"];
return RedirectToAction("Index");
}
}
View
HTML Markup
The View consists of an
HTML Form which has been created using the
Html.BeginForm method with the following parameters.
ActionName – Name of the Action. In this case the name is Submit.
ControllerName – Name of the Controller. In this case the name is Home.
FormMethod – It specifies the Form Method i.e. GET or POST. In this case it will be set to POST.
The Form consists of a
DropDownList, a Hidden Field and a Submit Button.
The
DropDownList is generated using the
Html.DropDownList Helper method.
The
first parameter is the
Name attribute of the
DropDownList.
The
second parameter is the Model object for populating the
DropDownList i.e. its source of data.
The
third parameter is the text of the
Default Item of the
DropDownList. If not specified there will be no default item in the
DropDownList.
Finally, the
fourth and the last parameter allows to specify the
HTML attributes such as id, class etc.
The
DropDownList has been assigned a
jQuery OnChange event handler, when an item is selected in the
DropDownList, the Text of the selected item is copied in the
Hidden Field.
When the
Submit Button is clicked, the Form gets submitted and the
VehicleId and
VehicleName values are sent to the Controller.
Finally, the
VehicleId and
VehicleName values of the selected Vehicle are displayed using
JavaScript Alert Message Box.
@model IEnumerable<SelectListItem>
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
</head>
<body>
@using (Html.BeginForm("Submit", "Home", FormMethod.Post))
{
@Html.DropDownList("VehicleId", Model, "Please select", new { @id = "ddlVehicles" })
@Html.Hidden("VehicleName", null, new { @id = "hfVehicleName" })
<input type="submit" value="Submit" />
}
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script type="text/javascript">
$("body").on("change", "#ddlVehicles", function () {
$("#hfVehicleName").val($(this).find("option:selected").text());
});
</script>
@if (TempData["Message"] != null)
{
<script type="text/javascript">
$(function () {
alert("@TempData["Message"]");
});
</script>
}
</body>
</html>
Screenshot
![Implement Grouped DropDownList using OptGroup in ASP.Net MVC]()
Downloads
