Easiest way to create a cascade dropdown in ASP.NET MVC 3 with C# Easiest way to create a cascade dropdown in ASP.NET MVC 3 with C# json json

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.