ASP.NET MVC DropDownList Implementation

Today, we are going to learn how to use DropDownList in MVC. We will also see how to set selected Item to ViewBag and show in DropDownList.

Remember
  • While creating ViewBag, if our ViewBag name is the same as the Control that we used in HTML page, then we have no need to specify that ViewBag in HTML.
  • It will automatically fetch particular ViewBag data to particular Controls.
  • So, it is a best practice to keep ViewBag name the same as HTML Control, so as to save time and reduce code complexity.
Let's start MVC DropDownList implementation. 
 

STEP 1 - Create Controller DropDownController

 
Note - For demo purposes, I used a particular Controller for better understanding. You can use DropDownController Code as per your requirement.

See the code to initialize DropDownList.
 
DropDownController 
  1. namespace MVCApplicationDropDownList.Controllers  
  2. {  
  3.     public class DropDownController : Controller  
  4.     {  
  5.   
  6.         //DropDown : SelectListItem Define for Month & Year DropDownList.  
  7.         List<SelectListItem> ddlMonths = new List<SelectListItem>();  
  8.         List<SelectListItem> ddlYears = new List<SelectListItem>();  
  9.   
  10.         // GET: DropDown  
  11.         public ActionResult Index(int? Year)    {...}  
  12.   
  13.   
  14.         //DropDown : GetYears() will fill Year DropDown and Return List.  
  15.         private SelectList GetYears(int? iSelectedYear)   {...}  
  16.          
  17.   
  18.         //DropDown : GetMonths() will fill Months as per selected Year and Return List.  
  19.         private SelectList GetMonths(int? iSelectedYear)  {...}  
  20.     }  

Index Method 
  1. // GET: DropDown  
  2. public ActionResult Index(int? Year)  
  3. {  
  4.     if (Year == null)  
  5.     {  
  6.         Year = DateTime.Now.Year;  
  7.     }  
  8.   
  9.     ViewBag.linktoYearId = GetYears(Year);  
  10.     ViewBag.linktoMonthId = GetMonths(Year);  
  11.     return View();  

Year Method 
  1. //DropDown : GetYears() will fill Year DropDown and Return List.  
  2. private SelectList GetYears(int? iSelectedYear)  
  3. {  
  4.     int CurrentYear = DateTime.Now.Year;  
  5.   
  6.     for (int i = 2010; i <= CurrentYear; i++)  
  7.     {  
  8.         ddlYears.Add(new SelectListItem  
  9.         {  
  10.             Text = i.ToString(),  
  11.             Value = i.ToString()  
  12.         });  
  13.     }  
  14.   
  15.     //Default It will Select Current Year  
  16.     return new SelectList(ddlYears, "Value""Text", iSelectedYear);  
  17.   

Month Method 
  1. //DropDown : GetMonths() will fill Months as per selected Year and Return List.  
  2. private SelectList GetMonths(int? iSelectedYear)  
  3. {  
  4.     var months = Enumerable.Range(1, 12).Select(i => new  
  5.     {  
  6.             A = i,  
  7.             B = DateTimeFormatInfo.CurrentInfo.GetMonthName(i)  
  8.     });  
  9.   
  10.     int CurrentMonth = 1; //January  
  11.   
  12.     if(iSelectedYear == DateTime.Now.Year)  
  13.     {  
  14.         CurrentMonth = DateTime.Now.Month;  
  15.         months = Enumerable.Range(1, CurrentMonth).Select(i => new  
  16.         {  
  17.             A = i,  
  18.             B = DateTimeFormatInfo.CurrentInfo.GetMonthName(i)  
  19.         });  
  20.     }  
  21.   
  22.     foreach (var item in months)  
  23.     {  
  24.         ddlMonths.Add(new SelectListItem { Text = item.B.ToString(), Value = item.A.ToString() });  
  25.     }  
  26.   
  27.     //Default It will Select Current Month  
  28.     return new SelectList(ddlMonths, "Value""Text", CurrentMonth);  
  29.   

STEP 2  Add Index View 

Just right click on Controller Index() method and add Index View(). 
 
 

Add the following JavaScript to Index.cshtml.
  1. <script type="text/javascript">  
  2.   
  3.     function ChangeYear(obj) {  
  4.         window.location.href = '@Url.Action("Index","DropDown")?Year=' + obj.value;  
  5.     }  
  6.   
  7. </script> 
Add DropDownList to Index.cshtml.
  1. @using (Html.BeginForm())  
  2. {  
  3.     <div class="row" style="border:solid; border-width:thin; padding:20px; height:400px;">  
  4.         <div class="col-lg-12 text-center">  
  5.             <div class="row">  
  6.                 <div class="col-lg-6" align="right">  
  7.                     @Html.DropDownList("linktoMonthId", null, "--Select--", new  
  8.                {  
  9.                    @id = "ddlMonths",  
  10.                    @class = "form-control",  
  11.                    @style = "width:200px"  
  12.                })  
  13.                 </div>  
  14.                 <div class="col-lg-6" align="left">  
  15.                     @Html.DropDownList("linktoYearId", null, "--Select--", new  
  16.                {  
  17.                    @id = "ddlYears",  
  18.                    @onChange = "return ChangeYear(this)",  
  19.                    @class = "form-control",  
  20.                    @style = "width:200px"  
  21.                })  
  22.                 </div>  
  23.             </div>  
  24.         </div>  
  25.     </div>  

Now, just clean & build solution. Press F5.
 
Screen 1
 
Screen 2
 

OK, that's it. Hope this tutorial makes sense regarding implementation of Dropdownlist in ASP.NET MVC.