Самый простой способ создать каскадный выпадающий в ASP.NET MVC 3 с C # - PullRequest
Новая
       15

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

69 голосов
/ 31 марта 2011

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

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

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

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

1 Ответ

140 голосов
/ 31 марта 2011

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

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>

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

...