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

Implementieren eines kaskadierenden Dropdown-Menüs in ASP.NET MVC 3 mit C#: Vollständiger Leitfaden

Beim Erstellen kaskadierender Dropdown-Menüs in ASP.NET MVC 3 kann es überwältigend sein, auf veraltete Lösungen oder Befehle zu stoßen, die in dieser Version veraltet sind. Dieses Handbuch bietet eine Schritt-für-Schritt-Methode zum Erstellen kaskadierender Dropdown-Menüs mit C#, um die Kompatibilität mit MVC 3 sicherzustellen.

Modelldesign

Die Grundlage jeder MVC-Anwendung ist das Modell. In diesem Beispiel erstellen wir ein Modell namens MyViewModel, um die Daten des Dropdown-Menüs darzustellen:

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

    // 第一个下拉菜单的年份选项集合
    public IEnumerable Years
    {
        get
        {
            return Enumerable.Range(2000, 12).Select(x => new SelectListItem
            {
                Value = x.ToString(),
                Text = x.ToString()
            });
        }
    }
}

Build-Controller

Controller fungieren als Vermittler zwischen Modellen und Ansichten. Hier definieren wir eine Aktion, um das erste Dropdown-Menü mit dem Jahr zu füllen, und eine weitere Aktion, um den Monat basierend auf dem ausgewählten Jahr bereitzustellen:

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

Ansicht erstellen

Ansicht zeigt die Benutzeroberfläche der Anwendung an. In diesem Beispiel verwenden wir die Razor-Syntax, um zwei Dropdown-Menüs zu definieren: eines zum Auswählen des Jahres und eines zum Auswählen des Monats:

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

Dieser JavaScript-Code löst Monate nach der Änderung des ausgewählten Jahres einen AJAX-Aufruf an die Controller-Aktion aus. Anschließend werden die zurückgegebenen JSON-Daten verwendet, um das zweite Dropdown-Menü mit dem entsprechenden Monat zu füllen.

Fazit

Dieser Ansatz bietet eine klare und prägnante Möglichkeit, kaskadierende Dropdown-Menüs in ASP.NET MVC 3 mit C# zu implementieren. Wenn Sie diese Schritte befolgen, können Sie ganz einfach eine benutzerfreundliche und reaktionsfähige Oberfläche für die Verwaltung hierarchischer Daten erstellen.

Das obige ist der detaillierte Inhalt vonWie implementiert 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!