DropDownList no MVC 4 com Razor

142

Estou tentando criar uma DropDownListexibição em uma navalha.

Alguém me ajudaria com isso?

Código HTML5 normal:

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

Eu tentei isso:

@{
    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
fonte
7
você var listItems = ...deve estar no seu controlador e não na sua View.
— Liam
1
este é o MVC3, mas é a mesma sintaxe que o MVC4: stackoverflow.com/questions/5070762/…
— Liam
2
@ Liam: Provavelmente pertence ao modelo de visualização, não ao controlador. O controlador não deve ter dependência ListItem, pois é um conceito vinculado à interface do usuário. Na verdade, nem deveria estar no modelo de exibição, apenas na exibição. O controlador deve criar o modelo de visualização, o modelo de visualização deve conter os dados, a visualização deve criar elementos da interface do usuário (como ListItem) para esses dados.
— David
2
Qual é o valor do uso do Razor sobre o HTML nativo; É desempenho ou funcionalidade? Como nenhum dado está sendo extraído do controlador.
— Barry MSIH
1
Alguém me diga o que a propriedade model.tipo representa, em um sentido genérico.

Respostas:

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
fonte
2
Se você definiu a Lista no controlador, precisará do modo de exibição Exibir, da seguinte forma: @ Html.DropDownListFor (model => model.model_year, ViewBag.Years como List <SelectListItem>, "- Select Year -")
— Bashar Abu Shamaa
4
Na última linha - como você sabe qual modelo chamar? De onde vem o "tipo"?
— 187 Andre Andre
2
@ André É o nome da propriedade do modelo. Ele leu da pergunta. O valor se liga a esse campo.
— precisa
Você deve ter cuidado, pois nenhuma das soluções postadas realiza qualquer tipo de validação no servidor. Aqui está uma solução elegante que executa a validação do lado do cliente e do servidor para garantir que dados válidos sejam postados no 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"))
— john Peralta
fonte
Para este exemplo funcionar, eu adicionei isso usando acima deste segmento de código. @ usando System.Web.UI.WebControls;
— Badar
42

Você pode usar isto:

@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
fonte
1
O que é "tipo"?
— 187 Andre Andre
1
@Andre. Propriedade Tipo no modelo. Veja o primeiro post.
— Gabriel Simas
1
obrigado, eu ainda não tenho idéia de onde ele conseguiu tudo isso embora
— 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
}

// Ação do 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 ação

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

Aqui está a resposta mais fácil:

na sua opinião, basta adicionar:

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

OU no seu controlador, adicione:

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

e sua visão basta adicionar:

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

Eu aprendi isso com Jess Chadwick

— Ayman
fonte
8

Acredite, eu tentei muitas opções para fazer isso e tenho resposta aqui

mas eu sempre procuro a melhor prática e a melhor maneira que conheço até agora para desenvolvedores de front-end e back-end for loop(sim, não estou brincando)

Como quando o front-end fornece as páginas da interface do usuário com dados fictícios, ele também adicionou classes e alguns estilos embutidos em uma opção de seleção específica, portanto, hard to dealuseHtmlHelper

Veja isto:

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

isso do desenvolvedor front-end, então a melhor solução é usar o loop for

primeiro createou get your listde dados de (...) na Ação do Controlador e coloque-o no ViewModel, ViewBag ou qualquer outro

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

Em segundo lugar, na exibição, faça este loop for simples para preencher a lista suspensa

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

Dessa forma, você não quebrará o UI Design, e é simples, fácil e mais legível

espero que isso ajude você mesmo se você não usou navalha

— Basheer AL-MOMANI
fonte
7

Usar uma matriz seria um pouco mais eficiente do que criar uma 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"}})
— Bryan Legend
fonte
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: - Criar lista suspensa no exemplo do MVC 4 razor

— Rameshbl
fonte
4

apenas use isto

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 no modo de exibição, use a seguir.

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

se você deseja obter dados do conjunto de dados e preenchê-los em uma caixa de listagem, use o código a seguir.

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, em vista, escreva o seguinte código.

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

Se você estiver usando o ASP.net 5 (MVC 6) ou posterior, poderá usar os novos Auxiliares de tags para obter uma sintaxe muito interessante:

<select asp-for="tipo">
    <option value="Exemplo1">Exemplo1</option>
    <option value="Exemplo2">Exemplo2</option>
    <option value="Exemplo3">Exemplo3</option>
</select>
— Bryan Legend
fonte
Você pode fornecer um exemplo em que os itens são dinâmicos? Para uma lista estática, não há sentido em usar auxiliares de marca. E faça uma das opções selecionadas.
— usar o seguinte comando
O ponto é que são dados vinculados. Ele seleciona automaticamente a opção em que a variável está definida e define a variável quando o formulário é enviado. Para dinamizar os itens, basta fazer uma navalha.
— Bryan Legend
1

Isso também pode ser feito 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>
Expandir snippet

— mut tony
fonte
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" })
Expandir snippet

— Muhafil Saiyed
fonte
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.