How to Simplify Cascading Dropdowns in ASP.NET MVC 3 with C#?

Simplify cascading drop-down menu using C# in ASP.NET MVC 3

Creating cascading drop-down menus (where the options of one drop-down menu depend on the selection of another drop-down menu) can seem like a daunting task. However, with ASP.NET MVC 3 and C#, it can be made very simple.

Data Modeling

Start by defining a model to represent your data:

public class MyViewModel
{
    public int? Year { get; set; }
    public int? Month { get; set; }
    public IEnumerable<SelectListItem> Years { get; set; }
}

Implement controller operation

Next, configure your controller action:

public class HomeController : Controller
{
    public ActionResult Index()
    {
        var model = new MyViewModel { Years = GetYears() }; //获取年份数据
        return View(model);
    }

    public ActionResult Months(int year)
    {
        var months = GetMonths(year);
        return Json(months, JsonRequestBehavior.AllowGet);
    }

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

    private IEnumerable<SelectListItem> GetMonths(int year)
    {
        //  此处替换为您的实际月份数据获取逻辑,  考虑闰年
        int maxMonth = (year == 2011) ? 3 : 12; // 示例，实际需根据年份判断
        return Enumerable.Range(1, maxMonth).Select(month => new SelectListItem { Value = month.ToString(), Text = month.ToString() });
    }
}

Create View

Finally, in your view:

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

Conclusion

Using this method, you can easily create cascading drop-down menus in ASP.NET MVC 3 using C#. The provided example provides a simple yet effective way to populate a second drop-down menu based on selections from the first drop-down menu, thus ensuring a user-friendly target user experience. Note that the GetYears and GetMonths methods have been improved in the code to make them more extensible, and use the SelectListItem type to make them more consistent with the specifications of the MVC framework. At the same time, the JavaScript code in the view has also been slightly adjusted to add options in a safer way.

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