Display DropdownList Item By Group in Asp.Net MVC Using C#.Net

This article will show you how you can bind and display the dropdown list value in group form in asp.net mvc application using C#.net and how you can retrieve selected value of the dropdown list in asp.net.

Some of my previous articles are as follows: C# Conversion of DateTime to 24 Hours Time in Asp.Net | Display 24 Hour Time In DropDownList In Asp.net, jQuery DatePicker Calendar With Dropdown Month and Year in Asp.Net, Load Partial View By Selecting Value in Dropdown Using C# in Asp.net MVC, Bind DropDownList Using Entity Framework in ASP.Net MVC Using C#, DropDownList Bind By Using XmlDataSource in Asp.Net.

So for this article first we will create a new asp.net mvc application in this we first we will create a new model class.

using System; using System.Collections.Generic; using System.Linq; using System.Web; namespace MvcApplication5.Models {     public class DropdownModel     {         public List<Parent> DropdownDataModel { get; set; }         public List<Parent> ParentDataModel { get; set; }         public List<Clild> ClildDataModel { get; set; }         public int SelectedValue { get; set; }     }     public class Parent     {         public int ParentId { get; set; }         public string ParentName { get; set; }     }     public class Clild     {         public int ParentId { get; set; }         public int ChildId { get; set; }         public string ChildName { get; set; }     } }

Now we will create controller. In this we will add the add the get and post method code.

using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Mvc; namespace MvcApplication5.Models {     public class HomeController : Controller     {         //         // GET: /Home/         public ActionResult Index()         {             DropdownModel objdropdownmodel = new DropdownModel();             objdropdownmodel.ParentDataModel = new List<Parent>();             objdropdownmodel.ParentDataModel = GetParentData();             objdropdownmodel.ClildDataModel = new List<Clild>();             objdropdownmodel.ClildDataModel = GetClildData();             return View(objdropdownmodel);         }         [HttpPost]         public ActionResult Index(int TeavelMode)         {             DropdownModel objdropdownmodel = new DropdownModel();             objdropdownmodel.ParentDataModel = new List<Parent>();             objdropdownmodel.ParentDataModel = GetParentData();             objdropdownmodel.ClildDataModel = new List<Clild>();             objdropdownmodel.ClildDataModel = GetClildData();             objdropdownmodel.SelectedValue = TeavelMode;             ViewBag.SelectedValue = "Selected Value :" + objdropdownmodel.ClildDataModel.Where(m => m.ChildId == TeavelMode).FirstOrDefault().ChildName;             return View(objdropdownmodel);         }         ///         /// You can use DB to access data for this section             ///         public List<Parent> GetParentData()         {             List<Parent> objparent = new List<Parent>();             objparent.Add(new Parent { ParentId = 1, ParentName = "--Car--" });             objparent.Add(new Parent { ParentId = 2, ParentName = "--Bike--" });             return objparent;         }         ///         /// You can use DB to access the data         ///         ///         public List<Clild> GetClildData()         {             List<Clild> objchild = new List<Clild>();             objchild.Add(new Clild { ParentId = 1, ChildId = 1, ChildName = "Honda City" });             objchild.Add(new Clild { ParentId = 1, ChildId = 2, ChildName = "Vento Polo" });             objchild.Add(new Clild { ParentId = 1, ChildId = 3, ChildName = "Audy" });             objchild.Add(new Clild { ParentId = 1, ChildId = 4, ChildName = "Honda Amaze" });             objchild.Add(new Clild { ParentId = 2, ChildId = 5, ChildName = "CBR 250" });             objchild.Add(new Clild { ParentId = 2, ChildId = 6, ChildName = "CBR 150" });             objchild.Add(new Clild { ParentId = 2, ChildId = 6, ChildName = "Pulsar 200" });             objchild.Add(new Clild { ParentId = 2, ChildId = 8, ChildName = "Bajaj Discover 125" });             return objchild;         }     } }

   

In above code I have created the list of parent and child item of the dropdown list item.  In post method I have retrieved the selected value of the dropdown. In this we are getting the id of the selected item in dropdown.

Now we will create view for the controller action result.

@model MvcApplication5.Models.DropdownModel @{     ViewBag.Title = "Display DropdownList Item By Group in Asp.Net MVC Using C#.Net"; } @using (Html.BeginForm("Index", "Home")) {         <div>         Trevel Mode:         <select name="TeavelMode" id="ddltravelmode">             <option value="0">Select</option>             @foreach (var pitem in Model.ParentDataModel)             {                 <optgroup label="@pitem.ParentName">                     @{                             var childitemfilter = Model.ClildDataModel.Where(m => m.ParentId == pitem.ParentId);                             if (childitemfilter != null)                             {                                 foreach (var citem in childitemfilter)                                 {                                     string selectedValue = "";                                     if (Model.SelectedValue == citem.ChildId)                                     {                                         selectedValue = "selected='selected'";                                     }                                                            <option value="@citem.ChildId" @selectedValue>@citem.ChildName</option>                                 }                             }                     }                 </optgroup>             }         </select>         <input type="submit" value="Submit" />     </div>     <div>     </div>     <div style="font-weight:bold">@ViewBag.SelectedValue</div> }

In above code in on the bases of the selected value and the child item value getting selected state. Now run the page for the output.

Select the item and click on submit button. In this you will not able to select car and bike which are parent in dropdown.

DOWNLOAD