Comment créer sans effort des listes déroulantes en cascade dans ASP.NET MVC 3 avec C# ?

Créez facilement un menu déroulant en cascade ASP.NET MVC 3 à l'aide de C#

Avec une technologie mise à jour, la mise en œuvre de menus déroulants en cascade dans ASP.NET MVC 3 est un jeu d'enfant. Ce guide vous guidera tout au long du processus, en fournissant des solutions claires utilisant C# et Razor View Engine.

Obtenir un effet en cascade

Pour créer l'effet cascade, nous construisons d'abord un modèle :

<code>public class MyViewModel
{
    public int? Year { get; set; }
    public int? Month { get; set; }
    // ...
}</code>

Ensuite, nous définissons le contrôleur correspondant :

<code>public class HomeController : Controller
{
    // ...
    public ActionResult Months(int year)
    {
        // 根据所选年份填充月份的逻辑
        // ...
    }
}</code>

Remplir le menu déroulant

Dans la vue Razor nous utilisons le code suivant :

<code>@Html.DropDownListFor(x => x.Year, new SelectList(Model.Years, "Value", "Text"), "-- 选择年份 --")
@Html.DropDownListFor(x => x.Month, Enumerable.Empty(), "-- 选择月份 --")</code>

Nous remplissons initialement le menu déroulant "Année" avec une liste prédéfinie, tandis que le menu déroulant "Mois" reste actuellement vide.

Mettre en œuvre un comportement en cascade

Le code JavaScript implémente l'effet en cascade :

<code>$('#Year').change(function () {
    var year = $(this).val();
    if (year) {
        // AJAX请求，根据所选年份获取月份
        $.getJSON('@Url.Action("Months")', { year: year }, function (months) {
            $('#Month').empty();
            $.each(months, function (index, month) {
                // 使用获取的数据填充“月份”下拉菜单
            });
        });
    }
});</code>

Lorsqu'une année est sélectionnée, ce script déclenchera un appel AJAX au contrôleur, récupérera le mois associé et mettra à jour la liste déroulante Mois en conséquence.

Avec cette méthode, vous pouvez facilement créer des menus déroulants en cascade dans ASP.NET MVC 3, offrant une expérience utilisateur fluide.

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!