Meilleure façon de créer un menu déroulant en cascade dans ASP.NET MVC 3 avec C #

Question

Je veux créer deux DropDownList dans une cascade à l'aide de MVC3 (de préférence Razor) avec C#.

Je voudrais avoir une liste déroulante où vous pouvez choisir l'année et une autre où vous pouvez choisir un ensemble spécifique de mois en fonction de la sélection de l'année.

Nous allons faire simple. Lorsque je choisis l'année en cours (c'est à dire 2011) dans la liste déroulante "année", la liste déroulante "mois" est renseignée avec les mois jusqu'à ce que le mois en cours (c'est à dire de Mars). Pour les autres cas (les autres années) aucune restriction n'est donné. De plus, il serait sympa de "bloquer" la liste déroulante "mois" avant de tout élément dans la liste déroulante "année" est sélectionné.

J'ai déjà regardé sur Internet pour certaines solutions, à l'aide de jQuery ou même maison approches, mais elles se réfèrent toutes les dernières versions de MVC et certaines commandes sont déconseillés en MVC3.

Merci beaucoup pour votre aide.

Answer 1

Comme toujours, vous démarrez avec un modèle:

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

    public IEnumerable<SelectListItem> Years
    {
        get
        {
            return Enumerable.Range(2000, 12).Select(x => new SelectListItem
            {
                Value = x.ToString(),
                Text = x.ToString()
            });
        }
    }
}

un contrôleur:

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

et enfin une vue:

@model AppName.Models.MyViewModel

@Html.DropDownListFor(
    x => x.Year, 
    new SelectList(Model.Years, "Value", "Text"),
    "-- select year --"
)

@Html.DropDownListFor(
    x => x.Month, 
    Enumerable.Empty<SelectListItem>(),
    "-- select month --"
)

<script type="text/javascript">
    $('#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>

Évidemment, vous remarquerez que dans mon exemple, j'ai codé en dur toutes les valeurs. Vous devez améliorer cette logique en utilisant des notions comme le courant de l'année, le mois en cours, probablement même aller chercher ces valeurs à partir d'un référentiel, etc... mais pour les fins de la démonstration, cela devrait être suffisant pour vous mettre sur la bonne piste.