使用 C# 在 ASP.NET MVC 3 中创建级联下拉列表的最简单方法

问题描述

我想使用 MVC3(最好是 Razor)和 在 cascade 中创建两个 DropDownListC#.

I want to create two DropDownList in a cascade using MVC3 (preferably Razor) with C#.

我想要一个下拉菜单，您可以在其中选择年份，另一个可以根据所选年份选择一组特定的月份.

I would like to have one dropdown where you can choose the year and another one where you can choose a specific set of months depending on the selected year.

让我们说得简单点.当我在下拉列表年"中选择当前年份(即 2011 年)时，下拉列表月"将填充到当前月份(即三月)之前的月份.对于其他情况(其他年份)，没有限制.此外，在选择下拉列表年份"中的任何元素之前阻止"下拉列表月份"会很好.

Let's put it simple. When I choose the current year (i.e. 2011) in the dropdown list "year", the dropdown list "month" gets populated with the months until the current month (i.e. March). For the other cases (other years) no restriction is given. Moreover it would be nice to "block" the dropdown list "month" before any element in the dropdown list "year" is selected.

我已经在互联网上寻找了一些解决方案，使用 jQuery 甚至自制方法，但它们都参考了过去版本的 MVC，并且一些命令在 MVC3 中已弃用.

I already looked in the Internet for some solutions, using jQuery or even homemade approaches, but they all refer to past versions of MVC and some commands are deprecated in MVC3.

推荐答案

一如既往地从模型开始:

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

然后是控制器:

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>

显然您会注意到，在我的示例中，我对所有值进行了硬编码.您应该通过使用诸如当前年份、当前月份之类的概念来改进此逻辑，甚至可能从存储库中获取这些值等……但出于演示的目的，这应该足以让您走上正轨.

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.

这篇关于使用 C# 在 ASP.NET MVC 3 中创建级联下拉列表的最简单方法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！