Comment implémenter des listes déroulantes en cascade dans ASP.NET MVC 3 à l'aide de C# ?

Implémentation du menu déroulant en cascade dans ASP.NET MVC 3 à l'aide de C# : guide complet

Lors de la création de menus déroulants en cascade dans ASP.NET MVC 3, il peut être difficile de tomber sur des solutions ou des commandes obsolètes qui sont obsolètes dans cette version. Ce guide fournit une méthode étape par étape pour créer des menus déroulants en cascade à l'aide de C#, garantissant ainsi la compatibilité avec MVC 3.

Conception du modèle

Le fondement de toute application MVC est le modèle. Dans cet exemple, nous allons créer un modèle appelé MyViewModel pour représenter les données du menu déroulant :

public class MyViewModel
{
    public int? Year { get; set; }
    public int? Month { get; set; }

    // 第一个下拉菜单的年份选项集合
    public IEnumerable Years
    {
        get
        {
            return Enumerable.Range(2000, 12).Select(x => new SelectListItem
            {
                Value = x.ToString(),
                Text = x.ToString()
            });
        }
    }
}

Contrôleur de construction

Les contrôleurs agissent comme intermédiaires entre les modèles et les vues. Ici, nous définissons une action pour remplir la première liste déroulante avec l'année et une autre action pour fournir le mois en fonction de l'année sélectionnée :

public class HomeController : Controller
{
    public ActionResult Index()
    {
        var model = new MyViewModel();
        return View(model);
    }

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

Créer une vue

View affiche l'interface utilisateur de l'application. Dans cet exemple, nous utilisons la syntaxe Razor pour définir deux menus déroulants : un pour sélectionner l'année et un autre pour sélectionner le mois :

@model AppName.Models.MyViewModel

@Html.DropDownListFor(
    x => x.Year,
    new SelectList(Model.Years, "Value", "Text"),
    "-- 选择年份 --"
)

@Html.DropDownListFor(
    x => x.Month,
    Enumerable.Empty(),
    "-- 选择月份 --"
)

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

Ce code JavaScript déclenche un appel AJAX à l'action du contrôleur Mois après le changement de l'année sélectionnée. Il utilise ensuite les données JSON renvoyées pour remplir le deuxième menu déroulant avec le mois approprié.

Conclusion

Cette approche fournit un moyen clair et concis d'implémenter des menus déroulants en cascade dans ASP.NET MVC 3 à l'aide de C#. En suivant ces étapes, vous pouvez facilement créer une interface conviviale et réactive pour gérer les données hiérarchiques.

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!