Comment créer une liste déroulante en cascade dans ASP.NET MVC 3 à l'aide de C# ?

Création de menus déroulants en cascade dans ASP.NET MVC 3 à l'aide de C# : approche simplifiée

Présentation

Cet article fournit une méthode simple et facile pour créer des menus déroulants en cascade dans ASP.NET MVC 3 et C#.

Modèle

Tout d'abord, définissez une classe de modèle pour représenter les données de la vue :

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

    public IEnumerable<SelectListItem> Years { get; set; }
}</code>

Contrôleur

Le contrôleur gère le fonctionnement de deux menus déroulants :

<code class="language-csharp">public ActionResult Index()
{
    var model = new MyViewModel { Years = GetYears() }; //添加获取年份数据的调用
    return View(model);
}

private IEnumerable<SelectListItem> GetYears()
{
    //此处替换为你的年份数据获取逻辑，例如从数据库获取
    return Enumerable.Range(2010, 15).Select(year => new SelectListItem { Value = year.ToString(), Text = year.ToString() });
}

public ActionResult Months(int year)
{
    if (year == 2011)
    {
        return Json(Enumerable.Range(1, 3).Select(x => new { value = x, text = x }), JsonRequestBehavior.AllowGet);
    }
    return Json(Enumerable.Range(1, 12).Select(x => new { value = x, text = x }), JsonRequestBehavior.AllowGet);
}</code>

Voir

La vue contient le menu déroulant et le code JavaScript qui implémente la fonctionnalité en cascade :

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

Ce code modifié apporte de légers ajustements au modèle et ajoute des fonctions permettant d'obtenir les données annuelles du contrôleur, rendant le code plus clair et plus facile à maintenir et à étendre. Le JavaScript dans la vue a également été légèrement ajusté pour le rendre plus conforme. Veuillez vous assurer que les bibliothèques jQuery nécessaires sont correctement référencées dans votre projet.

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!