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. {
  6. //DropDown : SelectListItem Define for Month & Year DropDownList.
  7. List<SelectListItem> ddlMonths = new List<SelectListItem>();
  8. List<SelectListItem> ddlYears = new List<SelectListItem>();
  10. // GET: DropDown
  11. public ActionResult Index(int? Year) {...}
  14. //DropDown : GetYears() will fill Year DropDown and Return List.
  15. private SelectList GetYears(int? iSelectedYear) {...}
  18. //DropDown : GetMonths() will fill Months as per selected Year and Return List.
  19. private SelectList GetMonths(int? iSelectedYear) {...}
  20. }
  21. }
Index Method
  1. // GET: DropDown
  2. public ActionResult Index(int? Year)
  3. {
  4. if (Year == null)
  5. {
  6. Year = DateTime.Now.Year;
  7. }
  9. ViewBag.linktoYearId = GetYears(Year);
  10. ViewBag.linktoMonthId = GetMonths(Year);
  11. return View();
  12. }
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;
  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. }
  15. //Default It will Select Current Year
  16. return new SelectList(ddlYears, "Value", "Text", iSelectedYear);
  18. }
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. });
  10. int CurrentMonth = 1; //January
  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. }
  22. foreach (var item in months)
  23. {
  24. ddlMonths.Add(new SelectListItem { Text = item.B.ToString(), Value = item.A.ToString() });
  25. }
  27. //Default It will Select Current Month
  28. return new SelectList(ddlMonths, "Value", "Text", CurrentMonth);
  30. }

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">
  3. function ChangeYear(obj) {
  4. window.location.href = '@Url.Action("Index","DropDown")?Year=' + obj.value;
  5. }
  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>
  26. }
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.