Comment remplir une liste déroulante Razor à partir d'une liste dans MVC ?

Remplir une liste déroulante Razor à partir d'une liste dans MVC

Pour remplir une liste déroulante avec les données d'un objet List dans MVC, vous pouvez utiliser un modèle de vue et transformer vos données dans un format conforme aux exigences de la liste déroulante.

Création d'un modèle de vue

Créez un modèle de vue avec les propriétés nécessaires pour piloter la liste déroulante, comme une propriété pour la valeur sélectionnée et une liste d'éléments à afficher. Dans ce cas, nous l'appellerons UserRoleViewModel.

Préparation des données DropDownList

Dans votre contrôleur, construisez une méthode pour récupérer les données de votre liste déroulante. Dans cette méthode, vous pouvez transformer les données du fichier List dans les objets SelectListItem. La classe SelectListItem fournit les propriétés nécessaires à la fois pour la valeur de l'élément et la représentation textuelle, et la classe SelectList fournit une structure hiérarchique pour les données de votre liste déroulante.

Consommation du modèle de vue dans la vue

À votre avis, utilisez la directive @model pour accéder au UserRoleViewModel. Ensuite, utilisez les assistants Razor LabelFor et DropDownListFor pour afficher la liste déroulante et son étiquette. L'assistant DropDownListFor remplira automatiquement la liste déroulante avec la collection UserRoles définie dans le modèle de vue.

Exemple d'implémentation

Voici un exemple d'implémentation pour le modèle de vue, le contrôleur et vue :

ViewModel :

public class UserRoleViewModel { public int SelectedUserRoleId { get; set; } public IEnumerable UserRoles { get; set; } } Copier après la connexion Contrôleur :

public IEnumerable GetRoles() { var dbUserRoles = new DbUserRoles(); var roles = dbUserRoles .GetRoles() .Select(x => new SelectListItem { Value = x.UserRoleId.ToString(), Text = x.UserRole });

return new SelectList(roles, "Value", "Text"); }

public ActionResult AddNewUser() { var model = new UserRoleViewModel { UserRoles = GetRoles() }; return View(model); } Copier après la connexion Vue :

@model UserRoleViewModel

@Html.LabelFor(m => m.SelectedUserRoleId) @Html.DropDownListFor(m => m.SelectedUserRoleId, Model.UserRoles) Copier après la connexion En suivant cette approche, vous pouvez remplir efficacement une liste déroulante avec les données d'un Liste dans MVC, fournissant une interface utilisateur propre et intuitive pour sélectionner des valeurs.