Press "Enter" to skip to content

De Webforms para MVC – DropDownList

Continuando a séria para quem está interessado em MVC, mas ainda está no mundo dos Webforms, hoje vou mostrar como fazer um DropDownList, o artigo vai ser simples, no próximo vou mostrar um DropDownList em cascata, simulando o autopostback disponível no WebForms e carregando um segundo DropDownList, abaixo os primeiros artigos da série de WebForms para MVC:

Antes de começar, abaixo a imagem do DropDownList do WebForms.

Para quem saiu do mundo WinForms e foi para o WebForms, o ComboBox virou DropDownList, agora quando trabalhamos com HTML puro no MVC e não temos os Server Controls do WebForms, o DropDownList deve ser feito utilizando a tag select  do HTML, essa mesma tag é gerada pelo Server Control DropDownList quando é renderizado no WebForms, mas no MVC nós temos que fazer isso, pelo menos do jeito mais “manual”.

Bom para começar com os códigos das classes utilizadas, existe uma classe Livraria com uma lista de Autores.

[sourcecode language=”csharp”]
public class Autor
{
public int IdAutor { get; set; }
public string Nome { get; set; }
}

public class Livraria
{
public List<Autor> Autores { get; set; }
}
[/sourcecode]

Feito isso eu criei um Controller e passo para a View o Model  já com alguns autores.

[sourcecode language=”csharp”]
public ActionResult Index()
{
var autores = new List<Autor>
{
new Autor {IdAutor = 1, Nome = "Fiódor Dostoiévski"},
new Autor {IdAutor = 1, Nome = "Friedrich Nietzsche"}
};

return View(new Livraria{Autores = autores});
}
[/sourcecode]

Agora na View precisamos mostrar os autores para o usuário selecionar algum deles, vamos para a primeira forma de construir o select que é utilizando HTML com um pouco de Razor.

[sourcecode language=”html”]
<p>
<select>
@foreach (var autor in Model.Autores)
{
<option value="@autor.IdAutor">@autor.Nome</option>
}
</select>
</p>
[/sourcecode]

O código é simples, eu crio um elemento select e dentro dele preciso criar as opções de seleção, pra isso crio uma tag option para cada item que veio no meu Model na coleção de Autores. No DropDownList do WebForms temos duas propriedades que são DataTextField e DataValueField, onde informo o campo que vou mostrar para o usuário e qual o campo de valor que vou obter da seleção feita, aqui o campo de valor vai para a propriedadee value da tag option e o campo que será mostrado vai entre as tags <option></option>.

Por mais básico que seja, tem quem não gosta de escrever HTML ou acha muito trabalhoso fazer isso, então existem alguns Helpers de HTML no MVC para facilitar esse trabalho, abaixo a segunda forma de criar esse código, utilizando o Helper DropDownListFor.

[sourcecode language=”html”]
<p>
@Html.DropDownListFor(m => m.Autores, new SelectList(Model.Autores, "IdAutor", "Nome"))
</p>
[/sourcecode]

Um detalhe desse Helper, é que no segundo parâmetro onde é criado o SelectList, estou informando o que será mostrado e qual será o valor de cada item.

E para finalizar a página exibindo os dois Selects.

Até o próximo artigo, e se alguém quiser ver algo específico em MVC entre em contato.

O código está no GitHub.

Abraços.

  • José Lino

    Bela dica Márcio, show de bola.
    Deixo outra aqui nos comentários relacionado ao post, o uso de SelectList para preencher o Helper Html.DropDownList, por exemplo de estar em um processo de edição e precisar então além de listar todos os os itens também selecionar aquele já cadastrado e relacionado.

    O lance é então criar para a ViewBag um SelectList para ser populado no Html.DropDownList