DropDownList en MVC 4 con Razor


142

Estoy tratando de crear una DropDownListvista de navaja.

¿Alguien me ayudaría con esto?

Código HTML5 normal:

<select id="dropdowntipo">
    <option value="Exemplo1">Exemplo1</option>
    <option value="Exemplo2">Exemplo2</option>
    <option value="Exemplo3">Exemplo3</option>
</select>

Intenté esto:

@{
    var listItems = new List<ListItem> { 
        new ListItem { Text = "Exemplo1", Value = "Exemplo1" }, 
        new ListItem { Text = "Exemplo2", Value = "Exemplo2" }, 
        new ListItem { Text = "Exemplo3", Value = "Exemplo3" } 
    };
}

@Html.DropDownListFor(model => 
    model.tipo, 
    new SelectList(listItems), 
    "-- Select Status --"
)

77
el var listItems = ...debería estar en su controlador no su punto de vista.
Liam

1
este es MVC3 pero es la misma sintaxis que MVC4: stackoverflow.com/questions/5070762/…
Liam

2
@Liam: Probablemente pertenece al modelo de vista, no al controlador. El controlador no debería depender de ListItemél, ya que es un concepto vinculado a la interfaz de usuario. Ni siquiera debería estar realmente en el modelo de vista, solo en la vista. El controlador debe construir el modelo de vista, el modelo de vista debe contener los datos, la vista debe construir elementos de la interfaz de usuario (como ListItem) a esos datos.
David

2
¿Cuál es el valor de usar Razor sobre HTML nativo? ¿Es rendimiento o funcionalidad? Como no se extraen datos del controlador.
Barry MSIH

1
Alguien dígame qué representa la propiedad model.tipo, en un sentido genérico.

Respuestas:


249
@{
   List<SelectListItem> listItems= new List<SelectListItem>();
   listItems.Add(new SelectListItem
        {
          Text = "Exemplo1",
          Value = "Exemplo1"
        });
   listItems.Add(new SelectListItem
        {
            Text = "Exemplo2",
            Value = "Exemplo2",
            Selected = true
        });
   listItems.Add(new SelectListItem
        {
            Text = "Exemplo3",
            Value = "Exemplo3"
        });
}

@Html.DropDownListFor(model => model.tipo, listItems, "-- Select Status --")

2
Si definió la Lista en el controlador, entonces necesita en Vista para emitirla, así: @ Html.DropDownListFor (model => model.model_year, ViewBag.Years as List <SelectListItem>, "- Seleccione Year -")
Bashar Abu Shamaa

44
En la última línea: ¿cómo sabe a qué modelo llamar? ¿De dónde viene el "tipo"?
Andre

2
@Andre Es el nombre de la propiedad del modelo. Lo leyó de la pregunta. El valor se une a ese campo.
Hrvoje T

Debe tener cuidado ya que ninguna de las soluciones publicadas realiza ningún tipo de validación del lado del servidor. Aquí hay una solución elegante que realiza validación tanto del lado del cliente como del lado del servidor para garantizar que se publiquen datos válidos en el modelo. stackoverflow.com/a/56185910/3960200
Etienne Charland

73
@{var listItems = new List<ListItem>
    {
          new ListItem { Text = "Exemplo1", Value="Exemplo1" },
          new ListItem { Text = "Exemplo2", Value="Exemplo2" },
          new ListItem { Text = "Exemplo3", Value="Exemplo3" }
    };
    }
        @Html.DropDownList("Exemplo",new SelectList(listItems,"Value","Text"))

Para que este ejemplo funcione, agregué esto usando arriba de este segmento de código. @using System.Web.UI.WebControls;
Badar

42

Puedes usar esto:

@Html.DropDownListFor(x => x.Tipo, new List<SelectListItem>
    {
                        new SelectListItem() {Text = "Exemplo1", Value="Exemplo1"},
                        new SelectListItem() {Text = "Exemplo2", Value="Exemplo2"},
                        new SelectListItem() {Text = "Exemplo3", Value="Exemplo3"}
    })  

1
¿Qué es "tipo"?
Andre

1
@Andre. Propiedad Tipo sobre modelo. Mira el primer post.
Gabriel Simas

1
gracias, todavía no tengo idea de dónde sacó eso, sin embargo
Andre

22

// ViewModel

public class RegisterViewModel
{

    public RegisterViewModel()
    {
        ActionsList = new List<SelectListItem>();
    }

    public IEnumerable<SelectListItem> ActionsList { get; set; }

    public string StudentGrade { get; set; }

  }

// Clase de enumeración:

public enum GradeTypes
{
    A,
    B,
    C,
    D,
    E,
    F,
    G,
    H
}

// Acción del controlador

 public ActionResult Student()
    {
RegisterViewModel vm = new RegisterViewModel();
IEnumerable<GradeTypes> actionTypes = Enum.GetValues(typeof(GradeTypes))
                                             .Cast<GradeTypes>();
        vm.ActionsList = from action in actionTypes
                         select new SelectListItem
                         {
                             Text = action.ToString(),
                             Value = action.ToString()
                         };
        return View(vm);
    }

// ver acción

 <div class="form-group">
                                <label class="col-lg-2 control-label" for="hobies">Student Grade:</label>
                                <div class="col-lg-10">
                                   @Html.DropDownListFor(model => model.StudentGrade, Model.ActionsList, new { @class = "form-control" })
                                </div>

11

Aquí está la respuesta más fácil:

desde tu punto de vista solo agrega:

@Html.DropDownListFor(model => model.tipo, new SelectList(new[]{"Exemplo1",
"Exemplo2", "Exemplo3"}))

O en su controlador agregue:

var exemploList= new SelectList(new[] { "Exemplo1:", "Exemplo2", "Exemplo3" });
        ViewBag.ExemploList = exemploList;

y tu vista solo agrega:

@Html.DropDownListFor(model => model.tipo, (SelectList)ViewBag.ExemploList )

Aprendí esto con Jess Chadwick


8

Créeme, he probado muchas opciones para hacerlo y tengo una respuesta aquí

pero siempre busco las mejores prácticas y la mejor manera que conozco hasta ahora para los desarrolladores tanto front-end como back-end es for loop(sí, no estoy bromeando)

Porque cuando el front-end le proporciona las páginas de la interfaz de usuario con datos ficticios, también agrega clases y algunos estilos en línea en una opción de selección específica, por lo que es hard to dealcon el usoHtmlHelper

Mira esto:

<select class="input-lg" style="">
    <option value="0" style="color:#ccc !important;">
        Please select the membership name to be searched for
    </option>
    <option value="1">11</option>
    <option value="2">22</option>
    <option value="3">33</option>
    <option value="4">44</option>
</select>

esto del desarrollador front-end, por lo que la mejor solución es usar el bucle for

fristly createo get your listde datos de (...) en la Acción del controlador y ponerlo en ViewModel, ViewBag o lo que sea

//This returns object that contain Items and TotalCount
ViewBag.MembershipList = await _membershipAppService.GetAllMemberships();

En segundo lugar, en la vista, haga este bucle simple para completar la lista desplegable

<select class="input-lg" name="PrerequisiteMembershipId" id="PrerequisiteMembershipId">
    <option value="" style="color:#ccc !important;">
        Please select the membership name to be searched for
    </option>
    @foreach (var item in ViewBag.MembershipList.Items)
    {
        <option value="@item.Id" @(Model.PrerequisiteMembershipId == item.Id ? "selected" : "")>
            @item.Name
        </option>
    }
</select>

de esta manera no romperá el diseño de la interfaz de usuario, y es simple, fácil y más legible

Espero que esto te ayude, incluso si no usaste navaja


7

Usar una matriz sería un poco más eficiente que crear una lista.

@Html.DropDownListFor(x => x.Tipo, new SelectListItem[]{
                new SelectListItem() {Text = "Exemplo1", Value="Exemplo1"},
                new SelectListItem() {Text = "Exemplo2", Value="Exemplo2"},
                new SelectListItem() {Text = "Exemplo3", Value="Exemplo3"}})

6
@{
List<SelectListItem> listItems= new List<SelectListItem>();
listItems.Add(new SelectListItem
    {
      Text = "One",
      Value = "1"
    });
listItems.Add(new SelectListItem
    {
        Text = "Two",
        Value = "2",
    });
listItems.Add(new SelectListItem
    {
        Text = "Three",
        Value = "3"
    });
listItems.Add(new SelectListItem
{
   Text = "Four",
   Value = "4"
});
listItems.Add(new SelectListItem
{
   Text = "Five",
   Value = "5"
});
}
@Html.DropDownList("DDlDemo",new SelectList(listItems,"Value","Text"))

Consulte: - Crear una lista desplegable en el ejemplo de MVC 4 razor


4

solo usa esto

public ActionResult LoadCountries()
{
     List<SelectListItem> li = new List<SelectListItem>();
     li.Add(new SelectListItem { Text = "Select", Value = "0" });
     li.Add(new SelectListItem { Text = "India", Value = "1" });
     li.Add(new SelectListItem { Text = "Srilanka", Value = "2" });
     li.Add(new SelectListItem { Text = "China", Value = "3" });
     li.Add(new SelectListItem { Text = "Austrila", Value = "4" });
     li.Add(new SelectListItem { Text = "USA", Value = "5" });
     li.Add(new SelectListItem { Text = "UK", Value = "6" });
     ViewData["country"] = li;
     return View();
}

y en Ver uso siguiente.

 @Html.DropDownList("Country", ViewData["country"] as List<SelectListItem>)

si desea obtener datos del conjunto de datos y completar estos datos en un cuadro de lista, utilice el siguiente código.

List<SelectListItem> li= new List<SelectListItem>();
for (int rows = 0; rows <= ds.Tables[0].Rows.Count - 1; rows++)
{
    li.Add(new SelectListItem { Text = ds.Tables[0].Rows[rows][1].ToString(), Value = ds.Tables[0].Rows[rows][0].ToString() });
}
ViewData["FeedBack"] = li;
return View();

y a la vista escriba el siguiente código.

@Html.DropDownList("FeedBack", ViewData["FeedBack"] as List<SelectListItem>)

3

Si está usando ASP.net 5 (MVC 6) o posterior, puede usar los nuevos Tag Helpers para una sintaxis muy agradable:

<select asp-for="tipo">
    <option value="Exemplo1">Exemplo1</option>
    <option value="Exemplo2">Exemplo2</option>
    <option value="Exemplo3">Exemplo3</option>
</select>

¿Puede proporcionar un ejemplo donde los elementos son dinámicos? Para una lista estática no tiene sentido usar ayudantes de etiqueta. Y haga una de las opciones seleccionadas.
user3285954

El punto es que está vinculado a datos. Selecciona automáticamente la opción en la que se establece la variable y establece la variable cuando se envía el formulario. Para hacer que los artículos sean dinámicos, solo haz una navaja de afeitar.
Bryan Legend

1

Esto también se puede hacer como

@model IEnumerable<ItemList>

<select id="dropdowntipo">
    <option value="0">Select Item</option>
    
    @{
      foreach(var item in Model)
      {
        <option value= "@item.Value">@item.DisplayText</option>
      }
    }

</select>


0

List<tblstatu> status = new List<tblstatu>();
            status = psobj.getstatus();
            model.statuslist = status;
            model.statusid = status.Select(x => new SelectListItem
            {
                Value = x.StatusId.ToString(),
                Text = x.StatusName
            });


  @Html.DropDownListFor(m => m.status_id, Model.statusid, "Select", new { @class = "form-control input-xlarge required", @type = "text", @autocomplete = "off" })

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.