Uma técnica simples para utilizar DropDownList no ASP.NET MVC

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

DropDownList ASP.NET MVC

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

DropDownList ASP.NET MVC

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

30 ideias sobre “Uma técnica simples para utilizar DropDownList no ASP.NET MVC

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

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

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

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

  4. 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))

  5. 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?

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

  7. 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”}
      };
      }
      }
      }

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

    • 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

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

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *