Elenco a discesa in MVC 4 con Razor


142

Sto cercando di creare una vista DropDownListsu un rasoio.

Qualcuno mi aiuterebbe con questo?

Codice HTML5 normale:

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

Ho provato questo:

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

7
il vostro var listItems = ...dovrebbe essere nel vostro controller non la vista.
Liam,

1
questo è MVC3, ma è la stessa sintassi MVC4: stackoverflow.com/questions/5070762/...
Liam

2
@Liam: probabilmente appartiene al modello di visualizzazione, non al controller. Il controller non dovrebbe avere una dipendenza in ListItemquanto è un concetto associato all'interfaccia utente. Non dovrebbe nemmeno essere davvero nel modello di vista, solo nella vista. Il controller dovrebbe creare il modello di visualizzazione, il modello di visualizzazione dovrebbe contenere i dati, la vista dovrebbe creare elementi dell'interfaccia utente (come ListItem) per quei dati.
David,

2
Qual è il valore dell'utilizzo di Razor su HTML nativo; Sono prestazioni o funzionalità? Dal momento che nessun dato viene estratto dal controller.
Barry MSIH,

1
Qualcuno per favore mi dica cosa rappresenta la proprietà model.tipo, in senso generico.

Risposte:


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
Se hai definito l'elenco nel controller, devi visualizzarlo per visualizzarlo, in questo modo: @ Html.DropDownListFor (model => model.model_year, ViewBag.Years come List <SelectListItem>, "- Select Year -")
Bashar Abu Shamaa,

4
Nell'ultima riga: come fai a sapere quale modello chiamare? Da dove viene il "tipo"?
Andre

2
@Andre È il nome della proprietà del modello. Lo lesse dalla domanda. Il valore si lega a quel campo.
Hrvoje T

Devi stare attento poiché nessuna delle soluzioni pubblicate esegue alcun tipo di convalida sul lato server. Ecco una soluzione elegante che esegue la convalida sia lato client che lato server per garantire che i dati validi vengano registrati nel modello. 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"))

Per far funzionare questo esempio, l'ho aggiunto usando sopra questo segmento di codice. @using System.Web.UI.WebControls;
Badar,

42

Puoi usare questo:

@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
Che cos'è "tipo"?
Andre

1
@Andre. Proprietà Tipo sul modello. Guarda il primo post.
Gabriel Simas,

1
grazie, non ho ancora idea di dove l'abbia preso
Andre

22

// ViewModel

public class RegisterViewModel
{

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

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

    public string StudentGrade { get; set; }

  }

// Classe Enum:

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

// Azione del controller

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

// visualizza Azione

 <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

Ecco la risposta più semplice:

a tuo avviso basta aggiungere:

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

O nel controller aggiungere:

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

e la tua vista ti basta aggiungere:

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

L'ho imparato con Jess Chadwick


8

Credetemi, ho provato molte opzioni per farlo e ho una risposta qui

ma cerco sempre la migliore pratica e il modo migliore che conosco finora sia per gli sviluppatori front-end che back-end è for loop(sì, non sto scherzando)

Perché quando il front-end ti dà le pagine dell'interfaccia utente con dati fittizi, ha anche aggiunto classi e alcuni stili incorporati su un'opzione di selezione specifica, quindi è hard to dealcon l'utilizzoHtmlHelper

Dai un'occhiata a questo:

<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>

questo dallo sviluppatore front-end, quindi la soluzione migliore è usare il ciclo for

fristly createo get your listdi dati da (...) in Controller Action e inseriscili in ViewModel, ViewBag o altro

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

In secondo luogo, nella vista, esegui questo semplice ciclo per popolare l'elenco a discesa

<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>

in questo modo non romperai UI Design ed è semplice, facile e più leggibile

spero che questo ti aiuti anche se non hai usato il rasoio


7

L'uso di un array sarebbe un po 'più efficiente della creazione di un elenco.

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

Consultare: - Creare un elenco a discesa nell'esempio del rasoio MVC 4


4

usa questo

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();
}

e in Visualizza usare quanto segue.

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

se si desidera ottenere dati dal set di dati e popolare questi dati in una casella di riepilogo, utilizzare il seguente codice.

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();

e in vista scrivi il seguente codice.

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

3

Se stai utilizzando ASP.net 5 (MVC 6) o versioni successive, puoi utilizzare i nuovi Tag Helpers per una sintassi molto piacevole:

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

Potete fornire un esempio in cui gli articoli sono dinamici? Per un elenco statico non è necessario utilizzare helper di tag. E fai una delle opzioni selezionate.
user3285954

Il punto è che è legato ai dati. Seleziona automaticamente l'opzione su cui è impostata la variabile e imposta la variabile quando viene inviato il modulo. Per rendere gli oggetti dinamici, basta fare un rasoio per ogni cosa.
Bryan Legend

1

Questo può anche essere fatto come

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

Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.