Heim >Backend-Entwicklung >C++ >Wie vereinfacht man kaskadierende Dropdowns in ASP.NET MVC 3 mit C#?

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

Mary-Kate Olsen
Mary-Kate OlsenOriginal
2025-01-11 15:46:43738Durchsuche

How to Simplify Cascading Dropdowns in ASP.NET MVC 3 with 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:

<code class="language-csharp">public class MyViewModel
{
    public int? Year { get; set; }
    public int? Month { get; set; }
    public IEnumerable<SelectListItem> Years { get; set; }
}</code>

Bedienung der Gerätesteuerung

Als nächstes konfigurieren Sie Ihre Controller-Aktion:

<code class="language-csharp">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() });
    }
}</code>

Ansicht erstellen

Abschließend aus Ihrer Sicht:

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

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!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn