Comment créer une liste de sélection en cascade dans ASP.Net Core MVC

Je travaillais dans une application différente avec les mêmes valeurs de modèle, mais j’ai rencontré un problème cette fois-ci.

Ce que je veux réaliser, c’est que lorsque je sélectionne une valeur dans une SelectList , les valeurs d’une autre sont modifiées. Ceci ne fonctionne pas actuellement.

Disons que j’ai le modèle suivant:

 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 ssortingng StartQuarter { get; set; } public SelectList StartMonthList { get; set; } public ssortingng StartMonth { get; set; } public SelectList StartYearList { get; set; } public ssortingng StartYear { get; set; } .... public void SetDefaults() { ... TimeSliceList = new SelectList(new List { new SelectListItem {Selected = true, Text = "Monthly", Value = TimeSlice.ByMonth.ToSsortingng()}, new SelectListItem {Selected = false, Text = "Quarterly", Value = TimeSlice.ByQuarter.ToSsortingng()} }, "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"); 

Et à mon avis, une page Razor (.cshtml) présente les éléments suivants:

• Rediriger vers l’URL au lieu de 401 pour non authentifié
• Comment valider JWT lors d’une requête websocket. kernel .net
• Renvoyer dynamicment des champs à partir d’une méthode Web
• Partage de cookies entre deux applications ASP.NET Core
• Créer un serveur Websocket dans une application de console centrale .net

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

Existe-t-il un moyen de l’avoir de sorte que si la valeur de la première liste de sélection soit Mensuelle, les valeurs de la liste de mois soient affichées, et inversement, de sorte que lorsque la première zone est modifiée, la deuxième zone change également?

J’ai pu résoudre ce problème dans l’une de mes autres applications, mais la procédure était très lourde et dépendait du fait que les deux listes SelectLists accédaient à la même propriété de modèle. J’imagine qu’il doit y avoir une meilleure façon de faire cela.

• Comment injecter des dépendances dans les modèles dans le kernel asp.net?
• Implémenter le filtre OrganizationUnit dans ASP.NET Core
• OpenIdConnectAuthenticationHandler: message.State est null ou vide
• Instanciation de l’application ASP.NET Core en production
• Enregistrer le service au runtime via DI?

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

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

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

 @model DashboardChartsByMonthModel      

 $(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(ssortingng value) { if (value == TimeSlice.ByMonth.ToSsortingng()) { 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); }