Como escrever um Html.DropDownListFor simples ()?

133

No ASP.NET MVC 2, gostaria de escrever uma lista suspensa muito simples que oferece opções estáticas. Por exemplo, eu gostaria de fornecer opções entre "Vermelho", "Azul" e "Verde".

Rinesse
fonte

Respostas:

188

Consulte este artigo do MSDN e um exemplo de uso aqui no Stack Overflow .

Digamos que você tenha a seguinte classe Linq / POCO:

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

E digamos que você tenha o seguinte modelo:

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

E, finalmente, digamos que você tenha a seguinte lista de cores. Eles podem vir de uma consulta Linq, de uma lista estática, etc .:

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

Na sua opinião, você pode criar uma lista suspensa da seguinte maneira:

<%= Html.DropDownListFor(n => n.MyColorId, 
                         new SelectList(Colors, "ColorId", "Name")) %>
Evan Nagle
fonte
1
isso realmente claro. Gostaria de saber onde devo colocar o IEnumerable <Color> no meu código? Eu sei que parece estúpido como questão, mas estou muito perdido e novo nele: s
Rinesse 16/06/10
7
Não se preocupe, amigo. Sei como se sente. :) Como você sugeriu na sua pergunta inicial, essa é uma lista estática que você criará no código ou irá extrair essa lista de um banco de dados?
precisa
uma lista estática que contém 4 opções não Frop uma base de dados
Rinesse
6
Crie uma classe estática chamada "HtmlLists" ou algo assim. Coloque a classe estática no espaço para nome System.Web.Mvc. Na sua classe estática, adicione sua lista estática de cores IEnumerable <Color>. Em sua opinião, você pode consultá-lo chamando HtmlLists.Colors. Espero que isso faça sentido. Avise-se me. :)
Evan Nagle
2
Eu não sabia como fazê-lo: '(... não sei onde colocar a classe Color e as HtmlLists (na pasta modelos pode estar?) E como fazer referência na exibição. Aloso não sei como colocar o resultado da lista em um atributo do viewModel .. Estou tão confuso: /
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 você não pode escrever aulas, coloque algo assim diretamente na visualização.

Berat
fonte
2
Eu recebo o erro abaixo ao tentar seu código: "Referência de objeto não definida para uma instância de um objeto".
Bashar Abu Shamaa
12
má idéia para adicionar lógica modelo para seu ponto de vista
Daniël Tulp
34

Evite muito dedilhado de gordura, começando com um dicionário no modelo

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

    }


    }

Na tela, converta-o em uma lista para exibição

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

Oi, aqui está como eu fiz isso em um projeto:

     @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"})

Espero que ajude alguém. obrigado

Programador Mestre
fonte
12

Ou se for de um contexto de banco de dados, você pode usar

@Html.DropDownListFor(model => model.MyOption, db.MyOptions.Select(x => new SelectListItem { Text = x.Name, Value = x.Id.ToString() }))
Joel Wahlund
fonte
22
Por favor, não incentive esse tipo de bobagem. Se você gosta de referenciar seu contexto db em suas visualizações do Razor, mas para aqueles de nós que gostam de criar software da maneira correta, essa é uma péssima idéia. Ligue a visualização do Razor a uma classe de modelo de visualização, todos os dados necessários para a visualização são armazenados em uma instância do modelo de visualização criado pelo controlador. Isso é parte da razão pela qual estou me afastando do .Net, muitos desenvolvedores terríveis fazendo coisas terríveis com seu código, causando enormes dores de cabeça para todos os outros. Aposto que você coloca toda a sua lógica de negócios em seus controladores!
JBeckton
7
Primeiro, desculpe-me por qualquer incorrecção gramatical, uma vez que o inglês não é a minha primeira língua. É sempre bom ver alguém fazer um comentário tão pensativo que eu o aplaudo, senhor, que dedicou um tempo para contribuir. Também é sempre tranquilizador que a profissão de desenvolvedor esteja em boas mãos como a sua, já que a minha não funcionará. Gostos do seu comentário ignorante é o motivo pelo qual eu nunca posto mais aqui. Posso informá-lo que, quando escrevi isso, eu tinha 8 meses de educação e nunca havia tocado em Desenvolvimento Web antes. Eu queria compartilhar uma abordagem diferente com o pouco conhecimento que tinha.
Joel Wahlund
7
8 meses em? Então, por que tentar resolver problemas quando você não sabia como? Meu comentário está longe de ser ignorante, eu vejo essas coisas dia após dia. Você deve começar a considerar a quantidade de trabalho manual que está obrigando aos seus colegas. imagine que você tenha um aplicativo corporativo com centenas de visualizações e seu CTO queira mudar para o Oracle DB. Imagine o custo literal de refatorar todas as visualizações e controladores que usam listas suspensas apenas por causa de sua única linha de código! Não estou tentando insultá-lo, apenas tentando lhe explicar como um pequeno conselho ruim pode ter efeitos enormes.
JBeckton
2
Não é diferente de precisar refatorar as soluções baseadas em enum estático. Pelo menos não era uma alteração de código toda vez que a empresa queria adicionar uma cor à lista. Se mais pessoas pensassem em usar um banco de dados, o mundo seria um lugar melhor.
M12lrpv
3
Bem, esta discussão traz um sorriso ao meu rosto quando eu a visito de vez em quando. Entendo o @SeanT apontar um pouco mais melhor. Acho que senti um ataque em geral quando estava tentando ajudar. Hoje em dia, prefiro manter tudo separado por camadas e não deixar nada tocar na visualização, a menos que seja separado em ViewModels. É exatamente como eu gosto de fazer isso sozinho. Eu aprecio m12lrpv por me defender:
Joel Wahlund
7

Com "Por favor, selecione um item"

@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" })  

Derivado dos códigos: Master Programmer && Joel Wahlund ;
Referência King: https://stackoverflow.com/a/1528193/1395101 JaredPar ;

Obrigado Mestre Programador && Joel Wahlund && JaredPar ;

Boa sorte amigos.

Amin Ghaderi
fonte
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" />
} 

Acho que essa resposta é semelhante à de Berat, na medida em que você coloca todo o código do seu DropDownList diretamente na exibição. Mas acho que essa é uma maneira eficiente de criar uma lista suspensa ay / n (booleana), então eu queria compartilhá-la.

Algumas notas para iniciantes:

  • Não se preocupe com o que 'x' é chamado - ele é criado aqui, pela primeira vez e não vincula a qualquer outro lugar do aplicativo MVC, para que você possa chamá-lo como quiser - 'x', 'modelo', 'm' etc.
  • O espaço reservado que os usuários verão na lista suspensa é "Escolha uma opção", para que você possa alterar isso, se desejar.
  • Há um texto antes do menu suspenso que diz "Você gosta de pizza?"
  • Deve ser um texto completo para um formulário, incluindo um botão de envio, eu acho

Espero que isso ajude alguém,

user5138047
fonte