Création d’un Menu déroulant en cascade dans ASP.NET MVC

Lorsque vous construisez des applications web, il est essentiel de fournir une expérience utilisateur fluide et interactive. Un motif d’interface utilisateur courant est le Menu déroulant en cascade—un menu déroulant qui met à jour ses options en fonction de la sélection d’un autre menu déroulant. Cette fonctionnalité est particulièrement utile lorsque l’on traite des ensembles de données connexes. Dans cet article, nous allons explorer comment mettre en œuvre un Menu déroulant en cascade en utilisant ASP.NET MVC et jQuery.

Comprendre le Problème

Vous vous demandez peut-être comment créer efficacement un Menu déroulant en cascade dans une application ASP.NET MVC. Des questions se posent souvent, telles que :

• Devriez-vous créer votre solution avec jQuery ou vous fier à l’outil Microsoft AJAX ?
• Vaut-il mieux créer un service web ou appeler une action de contrôleur pour retourner les données dépendantes ?

Historiquement, les développeurs ont eu diverses approches pour mettre en œuvre cette fonctionnalité. Cependant, avec l’intégration de jQuery dans ASP.NET MVC, la méthode préférée penche vers l’utilisation de jQuery pour une expérience plus fluide.

Solution étape par étape

Décomposons le processus en sections claires et gérables pour vous guider dans la mise en œuvre d’un Menu déroulant en cascade dans votre application ASP.NET MVC.

1. Configurez votre Projet

Assurez-vous d’avoir un projet ASP.NET MVC configuré avec jQuery inclus. Vous pouvez le faire facilement avec les derniers modèles de Visual Studio.

2. Créez vos Modèles

Nous aurons besoin de quelques modèles représentant les données sur lesquelles nous travaillons. Par exemple, supposons que nous travaillons avec les modèles Pays et Ville:

public class Pays {
    public int PaysId { get; set; }
    public string NomPays { get; set; }
}

public class Ville {
    public int VilleId { get; set; }
    public string NomVille { get; set; }
    public int PaysId { get; set; } // Clé étrangère vers le Pays
}

3. Actions du Contrôleur

Ensuite, vous devrez configurer votre contrôleur pour gérer les requêtes. Créez des actions qui retourneront la liste des pays et des villes en fonction du pays sélectionné.

public class LocationController : Controller {
    public JsonResult GetCountries() {
        var countries = // Récupérez vos pays depuis la base de données
        return Json(countries, JsonRequestBehavior.AllowGet);
    }

    public JsonResult GetCities(int countryId) {
        var cities = // Récupérez vos villes en fonction de countryId
        return Json(cities, JsonRequestBehavior.AllowGet);
    }
}

4. Construction des Vues

Dans votre vue, vous devrez ajouter deux menus déroulants : un pour le pays et un pour la ville. Commencez à charger les pays lorsque la vue est rendue:

<select id="countryDropdown"></select>
<select id="cityDropdown"></select>

5. Implémentation de jQuery pour un Comportement Dynamique

Maintenant, nous allons ajouter du code jQuery pour remplir le menu déroulant des villes en fonction du pays sélectionné.

$(document).ready(function() {
    $.getJSON('/Location/GetCountries', function(data) {
        $.each(data, function(index, item) {
            $('#countryDropdown').append($('<option>', { 
                value: item.PaysId,
                text : item.NomPays 
            }));
        });
    });

    $('#countryDropdown').change(function() {
        var countryId = $(this).val();
        $.getJSON('/Location/GetCities?countryId=' + countryId, function(data) {
            $('#cityDropdown').empty(); // Effacer les options existantes
            $.each(data, function(index, item) {
                $('#cityDropdown').append($('<option>', { 
                    value: item.VilleId,
                    text : item.NomVille 
                }));
            });
        });
    });
});

Conclusion

En suivant ces étapes, vous aurez un Menu déroulant en cascade pleinement fonctionnel dans votre application ASP.NET MVC. Cette approche améliore l’expérience utilisateur en mettant à jour dynamiquement les options du menu déroulant dépendant en fonction des sélections de l’utilisateur, éliminant ainsi le besoin de rechargements de page.

Pour plus de détails sur les ressources, assurez-vous de consulter cet article de blog, qui offre un contexte supplémentaire sur les valeurs en cascade avec des formulaires utilisant jQuery.

L’implémentation d’un Menu déroulant en cascade rend non seulement votre application plus conviviale, mais démontre également la puissance de la combinaison de jQuery avec ASP.NET MVC pour une interactivité riche.