创建与C＃中的ASP.NET MVC 3级联下拉最简单的方法 [英] Easiest way to create a cascade dropdown in ASP.NET MVC 3 with C#

问题描述

我要创建两个的DropDownList 中的梯级的使用 MVC3 （preferably 剃须刀）使用 C＃。

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）年，在下拉列表中月被填充王氏几个月，直到当月（即3月）。对于其他情况下（其他年份）没有限制给出。而且这将是选择了块的下拉列表中月，在下拉列表中年的元素之前不错的。

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 wih 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以前的版本，有些命令去precated在 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>

显然，你会发现，在我的例子中，我已经很难codeD所有的值。你应该使用类似的概念当年，当月改善这一逻辑，甚至可能从一个仓库，等取这些值，而是为了示范的目的，这应该是足以让你在正确的轨道上。

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级联下拉最简单的方法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！