¿Cómo escribir un simple Html.DropDownListFor ()?


133

En ASP.NET MVC 2, me gustaría escribir una lista desplegable muy simple que ofrezca opciones estáticas. Por ejemplo, me gustaría proporcionar opciones entre "Rojo", "Azul" y "Verde".

Respuestas:


188

Vea este artículo de MSDN y un ejemplo de uso aquí en Stack Overflow .

Digamos que tiene la siguiente clase de Linq / POCO:

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

Y digamos que tiene el siguiente modelo:

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

Y, finalmente, digamos que tiene la siguiente lista de colores. Podrían provenir de una consulta de Linq, de una lista estática, etc.

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

Desde su punto de vista, puede crear una lista desplegable así:

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

1
Eso realmente claro. Me gustaría saber dónde debo poner el IEnumerable <Color> en mi código. Sé que parece una pregunta estúpida, pero estoy muy perdido y nuevo: s
Rinesse

77
No te preocupes, amigo. Sé como se siente. :) Como sugirió en su pregunta inicial, ¿es esta una lista estática que va a crear en el código, o va a extraer esta lista de una base de datos?
Evan Nagle

una lista estática que contiene 4 opciones no Frop una base de datos
Rinesse

66
Cree una clase estática llamada "HtmlLists" o algo así. Coloque la clase estática en el espacio de nombres System.Web.Mvc. En su clase estática, agregue su lista estática de colores IEnumerable <Color>. Luego, desde su punto de vista, puede consultarlo llamando a HtmlLists.Colors. Espero que tenga sentido. Házmelo saber. :)
Evan Nagle

2
No sabía cómo hacerlo: '(... no sé dónde poner el color classe y las HtmlLists (¿en la carpeta de modelos puede ser?) Y cómo hacer referencia en la vista. También no sé cómo poner el resultado de la escucha en un atributo de la vista Modelo ... Estoy tan confundido: /
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
           )
        )
%>

o no puede escribir clases, ponga algo como esto directamente en la vista.


2
Recibo el siguiente error cuando pruebo su código: "Referencia de objeto no establecida en una instancia de un objeto".
Bashar Abu Shamaa

12
mala idea para agregar lógica de modelo a su punto de vista
Daniël Tulp

34

Evite muchos dedos gordos comenzando con un Diccionario en el 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"}
            };

    }


    }

En la vista, conviértalo en una lista para mostrar

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

32

Hola, así es como lo hice en un proyecto:

     @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 ayude a alguien. Gracias


12

O si es del contexto de una base de datos, puede usar

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

22
Por favor, no aliente este tipo de tonterías. Si le gusta hacer referencia a su contexto db en las vistas de Razor que tiene sobre usted, pero para aquellos de nosotros que nos gusta construir software de la manera correcta, esta es una idea terrible. Vincula tu vista Razor a una clase de modelo de vista, cualquier dato necesario para la vista se almacena en una instancia del modelo de vista creado por el controlador. Esta es parte de la razón por la que me estoy alejando de .Net, porque demasiados desarrolladores terribles están haciendo cosas terribles con su código y causan enormes dolores de cabeza para todos los demás. ¡Apuesto a que pones toda tu lógica de negocios en tus controladores!
JBeckton

77
Primero, perdón por cualquier error gramatical ya que el inglés no es mi lengua materna. Siempre es agradable ver a alguien hacer un comentario tan reflexivo, le aplaudo señor que se tomó el tiempo para contribuir. También es siempre tranquilizador que la profesión de desarrolladores esté en tan buenas manos como la tuya, ya que la mía no lo hará. Lo que me gusta de tu comentario ignorante es por qué nunca publico más aquí. Permítanme informarles que cuando escribí esto tenía 8 meses en mi educación y nunca antes había tocado el desarrollo web. Quería compartir un enfoque diferente con el poco conocimiento que tenía.
Joel Wahlund

77
8 meses en? Entonces, ¿por qué tratar de resolver problemas cuando no sabes cómo? Mi comentario está lejos de ser ignorante, veo estas cosas día tras día. Debe comenzar a considerar la cantidad de trabajo manual que está obligando a sus colegas. imagine que tiene una aplicación empresarial con cientos de vistas y su CTO quiere cambiar a Oracle DB. ¡Imagine el costo literal de refactorizar todas las vistas y controladores que usan listas desplegables solo por su única línea de código! No estoy tratando de insultarlo, solo estoy tratando de explicarle cómo un pequeño mal consejo puede tener grandes efectos.
JBeckton

2
No es diferente a la necesidad de refactorizar las soluciones estáticas basadas en enumeración. Al menos no fue un cambio de código cada vez que la empresa quería agregar un color a la lista. Si más personas pensaran en usar una base de datos, el mundo sería un lugar mejor.
m12lrpv

3
Bueno, este hilo trae una sonrisa a mi cara cuando lo visito de vez en cuando. Entiendo que @SeanT apunta un poco más mejor. Supongo que sentí un ataque en general cuando estaba tratando de ayudar. Hoy prefiero mantener todo separado por capas, y no dejar que nada toque la vista a menos que esté separado en ViewModels. Es como me gusta hacerlo yo mismo. Agradezco que m12lrpv me lleve en defensa, tú :-)
Joel Wahlund

7

Con "Seleccione un artículo"

@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 de los códigos: Master Programmer && Joel Wahlund ;
Rey de referencia: https://stackoverflow.com/a/1528193/1395101 JaredPar ;

Gracias Master Programmer && Joel Wahlund && JaredPar ;

Buena suerte amigos.


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

Creo que esta respuesta es similar a la de Berat, ya que pones todo el código de tu DropDownList directamente en la vista. Pero creo que esta es una forma eficiente de crear una lista desplegable ay / n (booleana), por lo que quería compartirla.

Algunas notas para principiantes:

  • No se preocupe por cómo se llama 'x': se crea aquí, por primera vez, y no se vincula a ninguna otra parte de la aplicación MVC, por lo que puede llamarlo como quiera: 'x', 'modelo', 'm' etc.
  • El marcador de posición que los usuarios verán en la lista desplegable es "Elegir una opción", por lo que puede cambiar esto si lo desea.
  • Hay un texto que precede al menú desplegable que dice "¿Te gusta la pizza?"
  • Esto debería ser texto completo para un formulario, incluido un botón de envío, creo

Espero que esto ayude a alguien,

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.