Wie erstelle ich mit C# ein kaskadierendes Dropdown-Menü in ASP.NET MVC 3?

Erstellen kaskadierender Dropdown-Menüs in ASP.NET MVC 3 mit C#: Vereinfachter Ansatz

Einführung

Dieser Artikel bietet eine einfache und unkomplizierte Methode zum Erstellen kaskadierender Dropdown-Menüs in ASP.NET MVC 3 und C#.

Modell

Definieren Sie zunächst eine Modellklasse zur Darstellung der Ansichtsdaten:

<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

Der Controller übernimmt die Bedienung von zwei Dropdown-Menüs:

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

Ansicht

Die Ansicht enthält das Dropdown-Menü und den JavaScript-Code, der die Kaskadenfunktion implementiert:

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

Dieser modifizierte Code nimmt geringfügige Anpassungen am Modell vor und fügt Funktionen zum Abrufen von Jahresdaten vom Controller hinzu, wodurch der Code klarer und einfacher zu warten und zu erweitern ist. Auch das JavaScript in der Ansicht wurde leicht angepasst, um es konformer zu machen. Bitte stellen Sie sicher, dass die erforderlichen jQuery-Bibliotheken in Ihrem Projekt korrekt referenziert werden.

Das obige ist der detaillierte Inhalt vonWie erstelle ich mit C# ein kaskadierendes Dropdown-Menü in ASP.NET MVC 3?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!