Wie vereinfacht man kaskadierende Dropdowns in ASP.NET MVC 3 mit C#?

Vereinfachen Sie das kaskadierende Dropdown-Menü mit C# in ASP.NET MVC 3

Das Erstellen kaskadierender Dropdown-Menüs (wobei die Optionen eines Dropdown-Menüs von der Auswahl eines anderen Dropdown-Menüs abhängen) kann eine entmutigende Aufgabe sein. Mit ASP.NET MVC 3 und C# lässt sich dies jedoch sehr einfach gestalten.

Datenmodellierung

Beginnen Sie mit der Definition eines Modells zur Darstellung Ihrer Daten:

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

Bedienung der Gerätesteuerung

Als nächstes konfigurieren Sie Ihre Controller-Aktion:

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

Ansicht erstellen

Abschließend aus Ihrer Sicht:

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

Fazit

Mit dieser Methode können Sie ganz einfach kaskadierende Dropdown-Menüs in ASP.NET MVC 3 mit C# erstellen. Das bereitgestellte Beispiel bietet eine einfache, aber effektive Möglichkeit, ein zweites Dropdown-Menü basierend auf der Auswahl aus dem ersten Dropdown-Menü zu füllen und so eine benutzerfreundliche Zielgruppenbenutzererfahrung sicherzustellen. Beachten Sie, dass die Methoden GetYears und GetMonths im Code verbessert wurden, um sie erweiterbarer zu machen, und verwenden Sie den Typ SelectListItem, um sie konsistenter mit den Spezifikationen des MVC-Frameworks zu machen. Gleichzeitig wurde auch der JavaScript-Code in der Ansicht leicht angepasst, um Optionen sicherer hinzuzufügen.

Das obige ist der detaillierte Inhalt vonWie vereinfacht man kaskadierende Dropdowns in ASP.NET MVC 3 mit C#?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!