DropDownList dans MVC 4 avec Razor

142

J'essaie de créer une vue DropDownListsur un rasoir.

Est-ce que quelqu'un m'aiderait avec ça?

Code HTML5 normal:

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

J'ai essayé ceci:

@{
    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 --"
)
c#  asp.net-mvc  razor 
— user2232273
source
7
votre var listItems = ...devrait être dans votre contrôleur pas votre vue.
— Liam
1
c'est MVC3 mais c'est la même syntaxe que MVC4: stackoverflow.com/questions/5070762/...
— Liam
2
@Liam: Il appartient probablement au modèle de vue, pas au contrôleur. Le contrôleur ne devrait pas avoir de dépendance ListItemcar il s'agit d'un concept lié à l'interface utilisateur. Cela ne devrait même pas vraiment être dans le modèle de vue, juste dans la vue. Le contrôleur doit créer le modèle de vue, le modèle de vue doit contenir les données, la vue doit créer des éléments d'interface utilisateur (comme ListItem) sur ces données.
— David
2
Quelle est la valeur de l'utilisation de Razor par rapport au HTML natif; S'agit-il de performances ou de fonctionnalités? Puisqu'aucune donnée n'est extraite du contrôleur.
— Barry MSIH
1
Quelqu'un, s'il vous plaît, dites-moi ce que représente la propriété model.tipo, au sens générique.

Réponses:

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 --")
— Chridam
source
2
Si vous avez défini la liste dans le contrôleur, vous devez alors la diffuser dans View, comme suit: @ Html.DropDownListFor (model => model.model_year, ViewBag.Years as List <SelectListItem>, "- Select Year -")
— Bashar Abu Shamaa
4
Sur la dernière ligne - Comment savez-vous quel modèle appeler? D'où vient le "tipo"?
— Andre
2
@Andre C'est le nom de la propriété du modèle. Il l'a lu à partir de la question. La valeur est liée à ce champ.
— Hrvoje T
Vous devez être prudent car aucune des solutions publiées n'effectue de validation côté serveur. Voici une solution élégante qui effectue à la fois une validation côté client et côté serveur pour garantir que des données valides sont publiées dans le modèle. 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"))
— John Peralta
source
Pour que cet exemple fonctionne, j'ai ajouté ceci en utilisant au-dessus de ce segment de code. @using System.Web.UI.WebControls;
— Badar
42

Vous pouvez utiliser ceci:

@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"}
    })
— Gabriel Simas
source
1
Qu'est-ce que "tipo"?
— Andre
1
@Andre. Propriété Tipo sur modèle. Regardez le premier message.
— Gabriel Simas
1
merci, je n'ai toujours aucune idée d'où il a obtenu cela
— 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
}

// Action du contrôleur

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

// voir l'action

 <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>
— shuvo sarker
source
11

Voici la réponse la plus simple:

dans votre vue, ajoutez simplement:

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

OU dans votre contrôleur, ajoutez:

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

et votre vue ajoute simplement:

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

J'ai appris ça avec Jess Chadwick

— Ayman
source
8

Croyez-moi, j'ai essayé beaucoup d'options pour le faire et j'ai la réponse ici

mais je recherche toujours les meilleures pratiques et le meilleur moyen que je connaisse à ce jour pour les développeurs front-end et back-end est for loop(oui je ne plaisante pas)

Parce que lorsque le front-end vous donne les pages d'interface utilisateur avec des données factices, il a également ajouté des classes et des styles en ligne sur une option de sélection spécifique, donc c'est hard to dealavec l'utilisationHtmlHelper

Regardez ceci:

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

ceci du développeur front-end, donc la meilleure solution est d'utiliser la boucle for

fristly createou get your listdes données de (...) dans l'Action du contrôleur et placez-le dans ViewModel, ViewBag ou autre

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

Deuxièmement, dans la vue, faites cette simple boucle for pour remplir la liste déroulante

<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 cette façon, vous ne casserez pas la conception de l'interface utilisateur, et sa simplicité, sa facilité et sa lisibilité

j'espère que cela vous aidera même si vous n'avez pas utilisé de rasoir

— Basheer AL-MOMANI
source
7

L'utilisation d'un tableau serait un peu plus efficace que la création d'une liste.

@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"}})
— Bryan Légende
source
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"))

Référez-vous: - Créer une liste déroulante dans l'exemple de rasoir MVC 4

— Rameshbl
source
4

utilise juste ça

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

et dans View, utilisez ce qui suit.

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

si vous souhaitez obtenir des données à partir de l'ensemble de données et remplir ces données dans une zone de liste, utilisez le code suivant.

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

et en vue, écrivez le code suivant.

@Html.DropDownList("FeedBack", ViewData["FeedBack"] as List<SelectListItem>)
— Jeetendra Negi
source
3

Si vous utilisez ASP.net 5 (MVC 6) ou une version ultérieure, vous pouvez utiliser les nouveaux Tag Helpers pour une très belle syntaxe:

<select asp-for="tipo">
    <option value="Exemplo1">Exemplo1</option>
    <option value="Exemplo2">Exemplo2</option>
    <option value="Exemplo3">Exemplo3</option>
</select>
— Bryan Légende
source
Pouvez-vous donner un exemple où les éléments sont dynamiques? Pour une liste statique, inutile d'utiliser des assistants de balises. Et faites l'une des options sélectionnées.
— user3285954
Le fait est que c'est lié aux données. Il sélectionne automatiquement l'option sur laquelle la variable est définie et définit la variable lorsque le formulaire est soumis. Pour rendre les éléments dynamiques, il suffit de faire un rasoir pour chacun.
— Bryan Legend
1

Cela peut également être fait comme 

@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>
Développer l'extrait

— mut tony
source
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" })
Développer l'extrait

— Muhafil Saiyed
source
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.