如何在ASP.Net Core MVC中创建级联SelectList

我使用相同的模型值在不同的应用程序中工作，但这次我遇到了一个问题。

我想要实现的是，当我在一个SelectList选择一个值时，不同的值中的值会发生变化。 这目前无效。

说我有以下型号：

 public class DashboardChartsByMonthModel { ... public SelectList TimeSliceList { get; set; } public TimeSlice TimeSliceVal { get; set; } // Timeslice is an Enum containing "ByMonth" and "ByQuarter" public SelectList StartQuarterList { get; set; } public string StartQuarter { get; set; } public SelectList StartMonthList { get; set; } public string StartMonth { get; set; } public SelectList StartYearList { get; set; } public string StartYear { get; set; } .... public void SetDefaults() { ... TimeSliceList = new SelectList(new List { new SelectListItem {Selected = true, Text = "Monthly", Value = TimeSlice.ByMonth.ToString()}, new SelectListItem {Selected = false, Text = "Quarterly", Value = TimeSlice.ByQuarter.ToString()} }, "Value", "Text"); } StartQuarterList = new SelectList(new List { new SelectListItem {Selected = true, Text = "Q1", Value = "1"}, new SelectListItem {Selected = false, Text = "Q2", Value = "4"}, new SelectListItem {Selected = false, Text = "Q3", Value = "7"}, new SelectListItem {Selected = false, Text = "Q4", Value = "10"} }, "Value", "Text"); StartMonthList = new SelectList(new List { new SelectListItem {Selected = true, Text = "January", Value = "1"}, new SelectListItem {Selected = false, Text = "February", Value = "2"}, new SelectListItem {Selected = false, Text = "March", Value = "3"}, new SelectListItem {Selected = false, Text = "April", Value = "4"}, new SelectListItem {Selected = false, Text = "May", Value = "5"}, new SelectListItem {Selected = false, Text = "June", Value = "6"}, new SelectListItem {Selected = false, Text = "July", Value = "7"}, new SelectListItem {Selected = false, Text = "August", Value = "8"}, new SelectListItem {Selected = false, Text = "September", Value = "9"}, new SelectListItem {Selected = false, Text = "October", Value = "10"}, new SelectListItem {Selected = false, Text = "November", Value = "11"}, new SelectListItem {Selected = false, Text = "December", Value = "12"} }, "Value", "Text"); StartYearList = new SelectList(new List { new SelectListItem {Selected = false, Text = "2016", Value = "2016"}, new SelectListItem {Selected = true, Text = "2017", Value = "2017"} }, "Value", "Text"); 

我的观点是Razor（.cshtml）页面，它具有以下内容：

  .... 
 
By Month or Quarter
  Start:  .... 

有没有办法让它如此，如果第一个SelectList中的值是每月，它显示MonthList的值，反之亦然，以便当第一个框更改时，第二个框也会更改？

我能够在我的其他应用程序中解决此问题，但它非常麻烦，并且依赖于访问相同模型属性的两个SelectLists。 我想有必要有一个更好的方法来做到这一点。

Answer 1

通过javascript这应该很简单。 我的方法将使用JQuery，如果你不使用JQuery，有可用的资源来帮助你将它转换为本机的javascript代码。

 $(document).ready(function() { $("#TimeSlice").on("change", function() { var selectedValue = $(this).val(); if(val === "Whatever the value of Monthly is here") { $("#StartMonth").show(); $("#StartYear").hide(); } else if(val === "Whatever the value of Quarterly is here"){ $("#StartYear").show(); $("#StartMonth").hide(); }else{ //If you have any other options in the dropdown, such as a default value or placeholder, this will hide both quarterly and monthly $("#StartYear").hide(); $("#StartMonth").hide(); } } }); 

Answer 2

这样做并不复杂。 你所要做的就是，首先渲染第一个下拉列表，然后听取其中的更改事件并读取值并使用选定的值对服务器进行ajax调用，然后返回适当的SelectListItem列表以呈现第二个下拉列表。

 public class DashboardChartsByMonthModel { public List TimeSliceList { set;get;} public int SelectedTimeSlice { set;get;} public List TimeOptions{ set;get;} public int SelectedTimeOption { set;get;} } 

在您的GET操作中，您加载第一个下拉数据

 public IActionResult Create() { var vm= new DashboardChartsByMonthModel(); vm.TimeSliceList = new List { new SelectListItem {Selected = true, Text = "Monthly", Value = TimeSlice.ByMonth.ToString()}, new SelectListItem {Selected = false, Text = "Quarterly", Value = TimeSlice.ByQuarter.ToString()} }; return View(vm); } 

在您的视图中，使用SELECT标记帮助程序

 @model DashboardChartsByMonthModel      

使用jQuery处理更改事件的javascript非常简单

 $(function () { $("#SelectedTimeSlice").change(function() { var v = $(this).val(); var url = $("#SelectedTimeOption").data("url") + '?value=' + v; $.getJSON(url,function(data) { $("#SelectedTimeOption").empty(); $.each(data, function(i, item) { $("#SelectedTimeOption") .append($("").text(item.text).val(item.value)); }); }); }); }); 

这要求您有一个操作方法，它接受第一个下拉列表的选定选项值并返回第二个下拉列表所需的选项。

 public IActionResult GetTimes(string value) { if (value == TimeSlice.ByMonth.ToString()) { var l = new List { new SelectListItem {Selected = true, Text = "January", Value = "1"}, new SelectListItem {Selected = false, Text = "February", Value = "2"} }; return Json(l); } var t2 = new List { new SelectListItem {Selected = true, Text = "Q1", Value = "1"}, new SelectListItem {Selected = false, Text = "Q2", Value = "2"} }; return Json(t2); } 

需要注意的重要事项是，在asp.net核心中，返回的JSON是驼峰式的。 因此，对于每个选择选项，它是text和value而不是Text和Value