How to Create a Cascading Dropdown in ASP.NET MVC 3 Using C#?

Creating cascading drop-down menus in ASP.NET MVC 3 using C#: Simplified approach

Introduction

This article provides a simple and easy method for creating cascading drop-down menus in ASP.NET MVC 3 and C#.

Model

First, define a model class to represent the view data:

<code class="language-csharp">public class MyViewModel
{
    public int? Year { get; set; }
    public int? Month { get; set; }

    public IEnumerable<SelectListItem> Years { get; set; }
}</code>

Controller

The controller handles the operation of two drop-down menus:

<code class="language-csharp">public ActionResult Index()
{
    var model = new MyViewModel { Years = GetYears() }; //添加获取年份数据的调用
    return View(model);
}

private IEnumerable<SelectListItem> GetYears()
{
    //此处替换为你的年份数据获取逻辑，例如从数据库获取
    return Enumerable.Range(2010, 15).Select(year => new SelectListItem { Value = year.ToString(), Text = year.ToString() });
}

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

View

The view contains a drop-down menu and JavaScript code that implements the cascading functionality:

<code class="language-html">@model AppName.Models.MyViewModel

@Html.DropDownListFor(
    x => x.Year, 
    Model.Years,
    "-- 选择年份 --"
)

@Html.DropDownListFor(
    x => x.Month, 
    Enumerable.Empty<SelectListItem>(),
    "-- 选择月份 --"
)

<script>
    $('#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></code>

This modified code makes slight adjustments to the model and adds functions for getting year data from the controller, making the code clearer and easier to maintain and extend. The JavaScript in the view has also been slightly adjusted to make it more compliant. Please make sure that the necessary jQuery libraries are correctly referenced in your project.

The above is the detailed content of How to Create a Cascading Dropdown in ASP.NET MVC 3 Using C#?. For more information, please follow other related articles on the PHP Chinese website!