Самый простой способ создать каскадное выпадающее меню ASP.NET MVC 3 с помощью С#

Я хочу создать два DropDownList в каскаде, используя MVC3 (желательно Razor) с C#.

Я хотел бы иметь один раскрывающийся список, где вы можете выбрать год и другой, где вы можете выбрать определенный набор месяцев в зависимости от выбранного года.

Проще говоря. Когда я выбираю текущий год (т.е. 2011) в раскрывающемся списке "год", раскрывающийся список "месяц" заполняется месяцами до текущего месяца (т.е. Март). В других случаях (в другие годы) никаких ограничений не предусмотрено. Кроме того, было бы неплохо "заблокировать" раскрывающийся список "месяц", прежде чем будет выбран какой-либо элемент в раскрывающемся списке "год".

Я уже просматривал в Интернете некоторые решения, используя jQuery или даже домашние методы, но все они относятся к прошлым версиям MVC, а некоторые команды устарели в MVC3.

Большое спасибо за помощь.

ОТВЕТЫ

Ответ 1

Как всегда вы начинаете с модели:

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()
            });
        }
    }
}

тогда контроллер:

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
        );
    }
}

и, наконец, представление:

@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>

Очевидно, вы заметите, что в моем примере я жестко закодировал все значения. Вы должны улучшить эту логику, используя понятия, как текущий год, текущий месяц, возможно, даже извлечь эти значения из хранилища, и т.д... но для целей демонстрации этого должно быть достаточно, чтобы поставить вас на правильном пути.Р >