Comment écrire un simple Html.DropDownListFor ()?


133

Dans ASP.NET MVC 2, j'aimerais écrire une liste déroulante très simple qui donne des options statiques. Par exemple, j'aimerais proposer des choix entre "Rouge", "Bleu" et "Vert".

Réponses:


188

Consultez cet article MSDN et un exemple d'utilisation ici sur Stack Overflow .

Disons que vous avez la classe Linq / POCO suivante:

public class Color
{
    public int ColorId { get; set; }
    public string Name { get; set; }
}

Et disons que vous avez le modèle suivant:

public class PageModel 
{
   public int MyColorId { get; set; }
}

Et, enfin, disons que vous avez la liste de couleurs suivante. Ils peuvent provenir d'une requête Linq, d'une liste statique, etc.:

public static IEnumerable<Color> Colors = new List<Color> { 
    new Color {
        ColorId = 1,
        Name = "Red"
    },
    new Color {
        ColorId = 2,
        Name = "Blue"
    }
};

Dans votre vue, vous pouvez créer une liste déroulante comme ceci:

<%= Html.DropDownListFor(n => n.MyColorId, 
                         new SelectList(Colors, "ColorId", "Name")) %>

1
c'est vraiment clair. J'aimerais savoir où dois-je mettre le IEnumerable <Color> dans mon code? Je sais que cela semble stupide comme question mais je suis très perdu et nouveau dedans: s
Rinesse

7
Pas de soucis, mon ami. Je sais ce que ça fait. :) Comme vous l'avez suggéré dans votre question initiale, est-ce une liste statique que vous allez créer dans le code ou allez-vous extraire cette liste d'une base de données?
Evan Nagle

une liste statique qui contient 4 options pas frop une base de données
Rinesse

6
Créez une classe statique appelée "HtmlLists" ou quelque chose. Placez la classe statique dans l'espace de noms System.Web.Mvc. Dans votre classe statique, ajoutez votre liste statique de couleurs IEnumerable <Color>. Ensuite, sur votre vue, vous pouvez le référencer en appelant HtmlLists.Colors. J'espère que cela a du sens. Faites le moi savoir. :)
Evan Nagle

2
Je ne savais pas comment faire: '(... je ne sais pas où mettre la classe Color et les HtmlLists (dans le dossier models peut-être?) Et comment faire référence dans la vue. Aloso a ne sais pas comment mettre le résultat de la liste dans un attribut de la vueModèle..Je suis tellement confus: /
Rinesse

61
<%: 
     Html.DropDownListFor(
           model => model.Color, 
           new SelectList(
                  new List<Object>{ 
                       new { value = 0 , text = "Red"  },
                       new { value = 1 , text = "Blue" },
                       new { value = 2 , text = "Green"}
                    },
                  "value",
                  "text",
                   Model.Color
           )
        )
%>

ou vous pouvez n'écrire aucune classe, mettre quelque chose comme ça directement dans la vue.


2
Je reçois l'erreur ci-dessous lorsque vous essayez votre code: "La référence d'objet n'est pas définie sur une instance d'un objet."
Bashar Abu Shamaa

12
mauvaise idée d'ajouter une logique de modèle à votre vue
Daniël Tulp

34

Évitez de gros doigté en commençant par un dictionnaire dans le modèle

namespace EzPL8.Models
{
    public class MyEggs
    {
        public Dictionary<int, string> Egg { get; set; }

        public MyEggs()
        {
            Egg = new Dictionary<int, string>()
            {
                { 0, "No Preference"},
                { 1, "I hate eggs"},
                { 2, "Over Easy"},
                { 3, "Sunny Side Up"},
                { 4, "Scrambled"},
                { 5, "Hard Boiled"},
                { 6, "Eggs Benedict"}
            };

    }


    }

Dans la vue, convertissez-le en liste pour l'affichage

@Html.DropDownListFor(m => m.Egg.Keys,
                         new SelectList(
                             Model.Egg, 
                             "Key", 
                             "Value"))

32

Salut, voici comment je l'ai fait dans un projet:

     @Html.DropDownListFor(model => model.MyOption,                
                  new List<SelectListItem> { 
                       new SelectListItem { Value = "0" , Text = "Option A" },
                       new SelectListItem { Value = "1" , Text = "Option B" },
                       new SelectListItem { Value = "2" , Text = "Option C" }
                    },
                  new { @class="myselect"})

J'espère que cela aide quelqu'un. Merci


12

Ou si c'est à partir d'un contexte de base de données, vous pouvez utiliser

@Html.DropDownListFor(model => model.MyOption, db.MyOptions.Select(x => new SelectListItem { Text = x.Name, Value = x.Id.ToString() }))

22
Veuillez ne pas encourager ce genre d'absurdités. Si vous aimez référencer votre contexte de base de données dans vos vues Razor qui vous concernent mais pour ceux d'entre nous qui aiment créer des logiciels correctement, c'est une idée terrible. Liez votre vue Razor à une classe de modèle de vue, toutes les données nécessaires pour la vue sont stockées dans une instance du modèle de vue créé par le contrôleur. C'est en partie la raison pour laquelle je m'éloigne de .Net, trop de développeurs terribles faisant des choses terribles avec leur code faisant d'énormes maux de tête pour tout le monde. Je parie que vous mettez toute votre logique métier dans vos contrôleurs!
JBeckton

7
Tout d'abord, désolé pour les incorrections de grammaire puisque l'anglais n'est pas ma langue maternelle. C'est toujours agréable de voir quelqu'un faire un commentaire aussi réfléchi, je vous félicite monsieur d'avoir pris le temps de contribuer. Il est également toujours rassurant que le métier de développeur soit entre de bonnes mains comme les vôtres, puisque le mien ne le fera pas. Les goûts de votre commentaire ignorant sont pourquoi je ne poste plus ici. Puis-je vous informer que lorsque j'ai écrit ceci, j'avais 8 mois dans mes études et n'avais jamais touché au développement Web auparavant. Je voulais partager une approche différente avec le peu de connaissances que j'avais.
Joel Wahlund

7
8 mois? Alors pourquoi essayer de résoudre des problèmes alors que vous ne pouviez pas savoir comment? Mon commentaire est loin d'être ignorant, je vois ce truc jour après jour. Vous devez commencer à considérer la quantité de travail manuel que vous engagez envers vos collègues. imaginez que vous disposez d'une application d'entreprise avec des centaines de vues et que votre CTO souhaite passer à Oracle DB. Imaginez le coût littéral de la refactorisation de toutes les vues et contrôleurs qui utilisent des listes déroulantes juste à cause de votre seule ligne de code! Je n'essaie pas de vous insulter, j'essaie simplement de vous expliquer comment un petit conseil malin peut avoir des effets énormes.
JBeckton

2
Pas différent du besoin de refactoriser les solutions basées sur l'énumération statique. Au moins, ce n'était pas un changement de code à chaque fois que l'entreprise voulait ajouter une couleur à la liste. Si plus de gens pensaient utiliser réellement une base de données, le monde serait un meilleur endroit.
m12lrpv

3
Eh bien, ce fil me fait sourire quand je le visite de temps en temps. Je comprends un peu plus le point @SeanT. Je suppose que j'ai juste ressenti une attaque en général lorsque j'essayais d'aider. Je préfère à moi-même de nos jours garder tout séparé par des calques et ne rien laisser toucher la vue à moins qu'elle ne soit séparée en ViewModels. C'est comme ça que j'aime le faire moi-même. J'apprécie m12lrpv de me prendre en défense toi :-)
Joel Wahlund

7

Avec "Veuillez sélectionner un article"

@Html.DropDownListFor(model => model.ContentManagement_Send_Section,
  new List<SelectListItem> { new SelectListItem { Value = "0", Text = "Plese Select one Item" } }
    .Concat(db.NameOfPaperSections.Select(x => new SelectListItem { Text = x.NameOfPaperSection, Value = x.PaperSectionID.ToString() })),
  new { @class = "myselect" })  

Dérivé des codes: Master Programmer && Joel Wahlund ;
Référence King: https://stackoverflow.com/a/1528193/1395101 JaredPar ;

Merci Maître Programmeur && Joel Wahlund && JaredPar ;

Bonne chance les amis.


1
@using (Html.BeginForm()) {
    <p>Do you like pizza?
        @Html.DropDownListFor(x => x.likesPizza, new[] {
            new SelectListItem() {Text = "Yes", Value = bool.TrueString},
            new SelectListItem() {Text = "No", Value = bool.FalseString}
        }, "Choose an option") 
    </p>
    <input type = "submit" value = "Submit my answer" />
} 

Je pense que cette réponse est similaire à celle de Berat, en ce sens que vous mettez tout le code de votre DropDownList directement dans la vue. Mais je pense que c'est un moyen efficace de créer une liste déroulante ay / n (booléen), donc je voulais la partager.

Quelques notes pour les débutants:

  • Ne vous inquiétez pas de ce que l'on appelle «x» - il est créé ici, pour la première fois, et n'est lié à rien d'autre nulle part ailleurs dans l'application MVC, vous pouvez donc l'appeler comme vous voulez - «x», 'modèle', 'm' etc.
  • L'espace réservé que les utilisateurs verront dans la liste déroulante est "Choisissez une option", vous pouvez donc le modifier si vous le souhaitez.
  • Il y a un peu de texte précédant le menu déroulant qui dit "Aimez-vous la pizza?"
  • Cela devrait être le texte complet d'un formulaire, y compris un bouton d'envoi, je pense

J'espère que cela aide quelqu'un,

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.