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

Création de listes déroulantes en cascade dans ASP.NET MVC 3 à l'aide de C#

Le développement d'applications Web nécessite souvent la mise en œuvre de listes déroulantes en cascade, où les options d'une liste déroulante dépendent de la sélection dans une autre. Ce didacticiel montre comment réaliser cette fonctionnalité à l'aide d'ASP.NET MVC 3 et C#.

Modèle de données :

Commencez par définir un modèle pour représenter vos données, englobant l'année et le mois.

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

Actions du contrôleur :

Le contrôleur gère la récupération des données et leur livraison à la vue.

<code class="language-csharp">public class HomeController : Controller
{
    // ... other actions

    public ActionResult Months(int year)
    {
        // ... logic to retrieve months based on the selected year
    }
}</code>

Afficher la mise en œuvre :

La vue Razor utilise des méthodes d'assistance pour générer les listes déroulantes et intègre JavaScript pour les mises à jour dynamiques.

<code class="language-html">@Html.DropDownListFor(
    model => model.Year, 
    new SelectList(Model.Years, "Value", "Text"), 
    "-- Select Year --"
)

@Html.DropDownListFor(
    model => model.Month, 
    Enumerable.Empty<SelectListItem>(), 
    "-- Select Month --"
)

<script>
    $('#Year').change(function () {
        // ... AJAX call to update the month dropdown
    });
</script></code>

JavaScript côté client :

jQuery est utilisé pour gérer la requête AJAX déclenchée par l'événement de changement de liste déroulante de l'année. La requête récupère les mois appropriés à partir de l'action Months du contrôleur et remplit la liste déroulante des mois en conséquence.

Cette approche permet la création transparente de listes déroulantes en cascade dans ASP.NET MVC 3, améliorant ainsi l'expérience utilisateur.

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!