Comment simplifier les listes déroulantes en cascade dans ASP.NET MVC 3 avec C# ?

Simplifiez le menu déroulant en cascade à l'aide de C# dans ASP.NET MVC 3

Créer des menus déroulants en cascade (où les options d'un menu déroulant dépendent de la sélection d'un autre menu déroulant) peut sembler une tâche ardue. Cependant, avec ASP.NET MVC 3 et C#, cela peut être rendu très simple.

Modélisation des données

Commencez par définir un modèle pour représenter vos données :

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

Fonctionnement du contrôleur d'outil

Ensuite, configurez l'action de votre contrôleur :

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

Créer une vue

Enfin, selon vous :

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

Conclusion

En utilisant cette méthode, vous pouvez facilement créer des menus déroulants en cascade dans ASP.NET MVC 3 en utilisant C#. L'exemple fourni fournit un moyen simple mais efficace de remplir un deuxième menu déroulant en fonction des sélections du premier menu déroulant, garantissant ainsi une expérience utilisateur cible conviviale. Notez que les méthodes GetYears et GetMonths ont été améliorées dans le code pour les rendre plus extensibles, et utilisent le type SelectListItem pour les rendre plus cohérentes avec les spécifications du framework MVC. Dans le même temps, le code JavaScript dans la vue a également été légèrement ajusté pour ajouter des options de manière plus sûre.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!