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

Posted 2023-04-12

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

【英文标题】：Easiest way to create a cascade dropdown in ASP.NET MVC 3 with C#

【发布时间】：2011-07-26 17:36:20

【问题描述】：

我想使用MVC3（最好是Razor）和C#在一个级联中创建两个DropDownList。

我希望有一个下拉菜单供您选择年份，而另一个下拉菜单供您根据所选年份选择一组特定月份。

让我们简单地说。当我在下拉列表“年”中选择当前年份（即 2011 年）时，下拉列表“月”将填充当前月份（即 3 月）之前的月份。对于其他情况（其他年份）没有限制。此外，最好在选择下拉列表“年”中的任何元素之前“阻止”下拉列表“月”。

我已经在 Internet 上查找了一些解决方案，使用 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>

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

【讨论】：

回答速度惊人，完整且容易理解！非常感谢！

我需要在程序中添加任何特殊的 AJAX 引用吗？谢谢

@Francesco，是的，你需要 jquery。

是怎么回事？我不明白。

Roberto Bonini， 是选择列表项。它附加在列表元素中。