Como preencher um DropDownListFor

Se você está desenvolvendo websites utilizando ASP.NET MVC certamente vai precisar criar uma lista suspensa e preencher esta lista com dados do seu model. Isso é uma dúvida muito comum entre os desenvolvedores que estão iniciando. Vou demonstrar rapidamente duas formas de criar uma lista suspensa com ASP.NET MVC.

Uma lista suspensa em HTML é criada utilizando a marcação select. É importante que você entenda como funciona esta marcação. Se quiser pode dar uma olhada no site w3schools.com. O ASP.NET MVC possui um motor de views, o Razor, e com o uso de seus auxiliadores podemos evitar a escrita de código HTML puro. Estes auxiliadores são chamados de HTML Helpers ou simplesmente Helpers. De forma resumida, podemos usar o Razor para misturar código C# e HTML em uma View.

O DropDownListFor é um destes Helpers e nos permite apresentar uma lista suspensa na View como o valor do Model selecionado.

Tá, mas como fazer então?

Vamos supor que você queira preencher a lista suspensa com uma relação de cidades e que caso o seu model tenha o id da cidade ele esteja inicialmente selecionado. Um exemplo seria o abaixo:

@Html.DropDownListFor(model => model.CityId, new SelectList(new List<Object>{
   new { value = 0 , text = "Choose"  },
   new { value = 1 , text = "São Paulo"},
   new { value = 2 , text = "Rio de Janeiro"},
   new { value = 3 , text = "Salvador"},   
}, "value", "text", Model.CityId), new { @class = "your-css-class" })

O Helper está recebendo os seguintes atributos em ordem:

1. O model;
2. Uma lista de objetos que representa as opções;
3. A propriedade que representa o valor selecionado;
4. A propriedade que representa o texto apresentado;
5. O valor inicial;
6. Apenas como exemplo e não obrigatório, estamos associando uma classe CSS para estilizar.

Bem tranquilo né?

Pode ser que você queira preencher a lista com valores de origem de uma consulta em seu controller. Neste caso o Helper poderia ser configurado assim:

@Html.DropDownListFor(model => model.CityId, null, "Select a option", 
new { @class = "form-control", @value = "0" })

Note que não passamos a lista de valores e sim o valor null. Note também que está sendo configurado um atributo value com valor 0, indicando que o texto inicialmente apresentado retornará este valor.

Já no seu controller você poderia preencher este Helper da seguinte forma:

var city = GetCity();
ViewData["CityId"] = new SelectList(city, "CityId", "Name");

O método GetCity ficaria por sua conta e retornaria uma lista de objetos de cidade contendo as propriedades Id e Name.

E com isso temos dois exemplos bem tranquilos para preencher o DropDownListFor.

Mão na massa, um abraço!