Utilizar o HtmlHelper para criar um DropDownList em uma View do ASP.NET MVC pode ser um desafio para iniciantes em MVC, veja como facilitar seu trabalho utilizando uma técnica simples.
Existem diversas formas de popular e controlar o estado de um DropDownList gerado pelo HtmlHelper, algumas podem dar um certo trabalho e confundir o programador que está iniciando com ASP.NET MVC e ainda não dominou todas as técnicas.
Conforme o código a seguir, criamos na pasta Models uma classe chamada Cliente que será utilizada para popular um DropDownList, observe que foi criado um método que retorna uma lista de clientes pré definidos (apenas para facilitar a demonstração).
using System.Collections.Generic;
namespace DropDownList.Models
{
public class Cliente
{
public int ClienteId { get; set; }
public string Nome { get; set; }
public List<Cliente> ListaClientes()
{
return new List<Cliente>
{
new Cliente { ClienteId = 1, Nome = "Eduardo Pires"},
new Cliente { ClienteId = 2, Nome = "João Silva"},
new Cliente { ClienteId = 3, Nome = "Fulano de Tal"}
};
}
}
}
A classe de Controller possui dois ActionResults, um para Get e um para Post, no primeiro ActionResult é criada uma ViewBag utilizando um nome que facilite o entendimento (no caso o ClienteId).
Esta ViewBag recebe uma estrutura DropDownList que é criada através da classe SelectList e os parâmetros utilizados são: Source, Value, Name (Origem do dado [Método ListarClientes], valor do elemento e nome a ser exibido). Estes parâmetros precisam coincidir com as propriedades da estrutura do seu dado (classe Cliente).
using System.Web.Mvc;
using DropDownList.Models;
namespace DropDownList.Controllers
{
public class HomeController : Controller
{
public ActionResult Index()
{
// Criando uma ViewBag com uma lista de clientes.
// Utilizo o nome da ViewBag com ClienteId apenas
// para facilitar o entendimento do código
// new SelectList significa retornar uma
// estrutura de DropDownList
ViewBag.ClienteId = new SelectList
(
new Cliente().ListaClientes(),
"ClienteId",
"Nome"
);
return View();
}
[HttpPost]
// No Post o valor selecionado do DropDownList
// será recebido no parametro clienteId
public ActionResult Index(string clienteId)
{
// O quarto parametro "clienteId" diz qual é o ID
// que deve vir pré-selecionado ao montar o DropDownList
ViewBag.ClienteId = new SelectList
(
new Cliente().ListaClientes(),
"ClienteId",
"Nome",
clienteId
);
return View();
}
}
}
Ao observar o retorno da criação do SelectList no Quick Watch fica mais fácil de entender a estrutura retornada
Para o Razor HtmlHelper criar corretamente seu DropDownList basta informar (no formato String) o nome da ViewBag que contém a estrutura de dados, foi adicionado um segundo parâmetro para criar um elemento em branco na primeira posição, assim evitando que o primeiro item seja selecionado por engano.
@{
ViewBag.Title = "Teste DropDownList";
}
@using (Html.BeginForm("Index", "Home", FormMethod.Post))
{
@Html.AntiForgeryToken()
<div>
<h4>@ViewBag.Title</h4>
</div>
<div class="row">
<div class="col-md-8">
Escolha o cliente:
@* Passando o Nome da ViewBag *@
@Html.DropDownList("ClienteId", String.Empty)
<input type="submit" value="Enviar" class="btn btn-default" />
</div>
</div>
}
O resultado ficará assim
A View possui um Form que fará um post para a segunda ActionResult da Controller que já espera receber o valor do item selecionado no DropDownList, o mesmo processo é repetido só que no final da criação da estrutura da SelectList é repassado mais um parâmetro que é o valor do item que foi selecionado na tela anterior, esse parâmetro garante que o foco da seleção mantenha-se no item que foi previamente selecionado.
Com isso vimos que é muito simples utilizar o DropDownList utilizando esta técnica, caso queira treinar basta criar um projeto simples ASP.NET MVC e implementar o código disponibilizado aqui.
Caso desconheça o uso de ViewBag leia este meu artigo que explica os conceitos:
ASP.Net MVC – ViewData, ViewBag e TempData
Até a próxima! 😉
Eu já conhecia a técnica, mas não conhecia a convenção do nome da DropDownList com o nome da ViewBag. Valeu a dica. 😉
Muito mais prático né?
Abs!!!
Comigo não funciona nem a pau. Meu caso eu tragos de um REST os dados e está assim. No model funcionario, preciso trazer Cidades e sempre que faço, pego esse erro: System.InvalidOperationException: ‘Não existe item ViewData do tipo ‘IEnumerable’ que possui a chave ‘cidadeId’.’
Olá Eduardo, como você faria se precisasse aninhar dois ou mais DropDownList? Por exemplo, ao escolher um estado (UF) automaticamente atualizar a drop de cidades?
Grato.
Olá Yuri,
Nesse caso eu já partiria para a mescla com JS e ajax, preciso montar um post nesse aspecto para complementar este.
Abs!
Entendo, para resolver tal problema eu utilizei o KnockoutJS, fica muito prático e rápido. Seria ótimo ver um exemplo completo, obrigado!
Você conseguiu montar o post explicando o exemplo do Yuri?
Yuri, estou muito interessado em saber como vc implementou usando KnockoutJS. Se puder, manda seu GitHub.
Olá Eduardo,
você tem algum material sobre este assunto para indicar?
Obrigado.
Oi Eduardo,
Acompanhei a vídeo aula: Tutorial ASP.NET MVC 5 + DDD + EF + AutoMapper + IoC + Dicas e Truques e gostei muito !!!
Comecei um projeto, utilizando todo conceito do vídeo, mais quero saber como aninhar dois ou mais DropDownList?, utilizando a técnica utilizada na vídeo aula de DDD.
Na view precisa fazer o cast (SelectList) na hora de carregar o combo.
Depende, no seu não funcionou automático?
Olá Eduardo, uma dúvida, consigo popular o dropdownlist e pegar o Id salvar no banco tudo certinho o problema surgi ao carregar os dados para uma atualização não consegui fazer com que o dropdownlist já carregue com opção salva anteriormente.
http://www.casimages.com.br/i/141230013111193249.png.html
Na View eu tentei usar essas duas opções:
@Html.DropDownListFor(x => x.VinculoId(IEnumerable)ViewBag.VinculoId, new { @class = “form-control” })
@Html.DropDownList(“VinculoId”,string.Empty)
Você precisa passar um parâmetro extra, dê uma olhada no artigo:
public ActionResult Index(string clienteId)
{
// O quarto parametro “clienteId” diz qual é o ID
// que deve vir pré-selecionado ao montar o DropDownList
ViewBag.ClienteId = new SelectList
(
new Cliente().ListaClientes(),
“ClienteId”,
“Nome”,
clienteId
);
return View();
}
Muito legal. Estava procurando algo do tipo e não havia encontrado ainda.
Venho acompanhando os hangouts que tem feito, estão bem legais. Parabéns!
Hola Eduardo, tienes un proyecto en el cual se carguen los DropdownList en forma de cascada, Region, Estados, y que despliegue una lista con los clientes de esos dromdownlist.
gracias
Hola Eduardo, tienes un proyecto en el cual se carguen los DropdownList en forma de cascada, Region, Estados, y que despliegue una lista con los clientes de esos dromdownlist
2
gracias
Estou trabalhando em um projeto aspnet MVC onde o fomulário de cadastro possui muitos ‘dropdownlist’. Com isso meu controller fica lotado de ViewBags. Existe uma forma de deixar meu controller mais limpo mantendo os dropdownlist?
Cara, uma alternativa é criar uma ViewModel onde vc possa ter uma propriedade do item selecionado e outra propriedade para os itens possíveis. Como:
class MinhaViewModel
{
int ItemSelecionado {get;set;}
List ItensPossiveis{get;set;}
}
I think you can avoid the ViewBag. Having the model proposed by Eduardo, you should pass an instance of the model to the view ( controller):
public ActionResult Index()
{
return View(new Cliente());
}
[HttpPost]
public ActionResult Index(string clienteId)
{
return View(new Cliente { ClienteId = clienteId} );
}
and then, in the view, you may add the following lines of code:
@model DropDownList.Models.Cliente
@* … *@
@Html.DropDownListFor(model => model.ClienteId, new SelectList(Model.ListaClientes(), “Code”, “Name”, Model.ClienteId))
Olá Eduardo, como você faria se precisasse aninhar dois ou mais DropDownList? Por exemplo, ao escolher um estado (UF) automaticamente atualizar a drop de cidades?, utilizando o projeto que você fez na video aula de DDD?
Existe a possibilidade de efetuar um dropdowlist num campo string, eu tenho o campo sexo como string, que aceita M – Masculino , F – Feminino, teria como fazer baseado neste código que foi descrito , obrg
Excelente material, ajudou bastante!
Fala Eduardo!!! Muito bom o artigo..
Queria saber como eu faria pra colocar esse select como required com data anotattion!! Tentei fazer mas não entendi…
Grande abraço e parabéns!!!
colocar [Required] encima do campo EX:
public class Cliente
{
[Required]
public int ClienteId { get; set; }
public string Nome { get; set; }
public List ListaClientes()
{
return new List
{
new Cliente { ClienteId = 1, Nome = “Eduardo Pires”},
new Cliente { ClienteId = 2, Nome = “João Silva”},
new Cliente { ClienteId = 3, Nome = “Fulano de Tal”}
};
}
}
}
Fala Eduardo beleza?
Cara eu só consigo fazer isso no Post, na action normal de carregamento inicial eu não consigo.
No Caso eu monto um DropDownList com anos, um range de 2013 a 2018 por exemplo, e gostaria que ao carregar a pagina selecionasse o ano atual, mesmo colocando manualmente o ano 2016, ele carrega com o primeiro da lista que é o 2013
oi, ainda sou novato na área e quero saber o seguinte:
como listar na tela o item que foi selecionado anteriormente?
No método HttpPost, que deverá possuir os parâmetros submetidos pelo formulário. No seu controller, atribua o valor à um ViewBag, utilizando uma propriedade dynamic, ex: (ViewBag.Selecionado = id) e na sua view exiba o valor ViewBag.Selecionado utilizando o Razor, ex: @ViewBag.Selecionado
Boa tarde, Eduardo
utilizei sua dica e me ajudou muito. Mas estou com o seguinte problema, como selecionar um item em uma dropdownlist e alimentar uma outra dropdownlist com outra viewbag? Algo parecido como selecionar um estado e popular as cidades referentes aquele estado. Se puder dar uma dica, ajudaria muito. Desde já agradeço aos conteúdos que você publica.
Abraços.