Easiest way to create a cascade dropdown in ASP.NET MVC 3 with C#
As always you start with a model:
public class MyViewModel{ public int? Year { get; set; } public int? Month { get; set; } public IEnumerable<SelectListItem> Years { get { return Enumerable.Range(2000, 12).Select(x => new SelectListItem { Value = x.ToString(), Text = x.ToString() }); } }}
then a controller:
public class HomeController : Controller{ public ActionResult Index() { var model = new MyViewModel(); return View(model); } public ActionResult Months(int year) { if (year == 2011) { return Json( Enumerable.Range(1, 3).Select(x => new { value = x, text = x }), JsonRequestBehavior.AllowGet ); } return Json( Enumerable.Range(1, 12).Select(x => new { value = x, text = x }), JsonRequestBehavior.AllowGet ); }}
and finally a view:
@model AppName.Models.MyViewModel@Html.DropDownListFor( x => x.Year, new SelectList(Model.Years, "Value", "Text"), "-- select year --")@Html.DropDownListFor( x => x.Month, Enumerable.Empty<SelectListItem>(), "-- select month --")<script type="text/javascript"> $('#Year').change(function () { var selectedYear = $(this).val(); if (selectedYear != null && selectedYear != '') { $.getJSON('@Url.Action("Months")', { year: selectedYear }, function (months) { var monthsSelect = $('#Month'); monthsSelect.empty(); $.each(months, function (index, month) { monthsSelect.append($('<option/>', { value: month.value, text: month.text })); }); }); } });</script>
Obviously you will notice that in my example I have hardcoded all the values. You should improve this logic by using notions like current year, current month, probably even fetch those values from a repository, etc... but for the purpose of the demonstration this should be enough to put you on the right track.