Heim >Backend-Entwicklung >C++ >Wie vereinfacht man kaskadierende Dropdowns in ASP.NET MVC 3 mit C#?
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!