Implementing Cascading Dropdown Menu in ASP.NET MVC 3 using C#: Complete Guide

When creating cascading dropdown menus in ASP.NET MVC 3, it can be overwhelming to come across outdated solutions or commands that are deprecated in that version. This guide provides a step-by-step method for creating cascading drop-down menus using C#, ensuring compatibility with MVC 3.

Model Design

The foundation of any MVC application is the model. In this example, we will create a model called MyViewModel to represent the data of the drop-down menu:

public class MyViewModel
{
    public int? Year { get; set; }
    public int? Month { get; set; }

    // 第一個(gè)下拉菜單的年份選項(xiàng)集合
    public IEnumerable Years
    {
        get
        {
            return Enumerable.Range(2000, 12).Select(x => new SelectListItem
            {
                Value = x.ToString(),
                Text = x.ToString()
            });
        }
    }
}

Build Controller

Controllers act as intermediaries between models and views. Here we define an action to populate the first dropdown with the year and another action to provide the month based on the selected year:

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

Create View

View displays the user interface of the application. In this example, we use Razor syntax to define two drop-down menus: one for selecting the year and another for selecting the month:

@model AppName.Models.MyViewModel

@Html.DropDownListFor(
    x => x.Year,
    new SelectList(Model.Years, "Value", "Text"),
    "-- 選擇年份 --"
)

@Html.DropDownListFor(
    x => x.Month,
    Enumerable.Empty(),
    "-- 選擇月份 --"
)

<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>

This JavaScript code triggers an AJAX call to the controller action Months after changing the selected year. It then uses the returned JSON data to populate the second dropdown menu with the appropriate month.

Conclusion

This approach provides a clear and concise way to implement cascading drop-down menus in ASP.NET MVC 3 using C#. By following these steps, you can easily create a user-friendly and responsive interface for managing hierarchical data.

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