{"id":98,"date":"2018-09-25T21:28:24","date_gmt":"2018-09-26T00:28:24","guid":{"rendered":"http:\/\/fabiobrandao.net.br\/blog\/?p=98"},"modified":"2023-03-12T18:49:03","modified_gmt":"2023-03-12T21:49:03","slug":"como-preencher-um-dropdownlistfor","status":"publish","type":"post","link":"https:\/\/fabiobrandao.net.br\/blog\/asp-net-mvc\/como-preencher-um-dropdownlistfor\/","title":{"rendered":"Como preencher um DropDownListFor"},"content":{"rendered":"

Se voc\u00ea est\u00e1 desenvolvendo websites utilizando ASP.NET MVC<\/strong> certamente vai precisar criar uma lista suspensa e preencher esta lista com dados do seu model. Isso \u00e9 uma d\u00favida muito comum entre os desenvolvedores que est\u00e3o iniciando. Vou demonstrar rapidamente duas formas de criar uma lista suspensa com ASP.NET MVC<\/strong>.<\/p>\n

Uma lista suspensa em HTML \u00e9 criada utilizando a marca\u00e7\u00e3o select. \u00c9 importante que voc\u00ea entenda como funciona esta marca\u00e7\u00e3o. Se quiser pode dar uma olhada no site w3schools.com<\/a>. O ASP.NET MVC possui um motor de views, o Razor, e com o uso de seus auxiliadores podemos evitar a escrita de c\u00f3digo HTML puro. Estes auxiliadores s\u00e3o chamados de HTML Helpers ou simplesmente Helpers. De forma resumida, podemos usar o Razor para misturar c\u00f3digo C# e HTML em uma View.<\/p>\n

O DropDownListFor<\/strong> \u00e9 um destes Helpers e nos permite apresentar uma lista suspensa na View como o valor do Model selecionado.<\/p>\n

T\u00e1, mas como fazer ent\u00e3o?<\/p>\n

Vamos supor que voc\u00ea queira preencher a lista suspensa com uma rela\u00e7\u00e3o de cidades e que caso o seu model tenha o id da cidade ele esteja inicialmente selecionado. Um exemplo seria o abaixo:<\/p>\n

\r\n@Html.DropDownListFor(model => model.CityId, new SelectList(new List<Object>{\r\n   new { value = 0 , text = "Choose"  },\r\n   new { value = 1 , text = "S\u00e3o Paulo"},\r\n   new { value = 2 , text = "Rio de Janeiro"},\r\n   new { value = 3 , text = "Salvador"},   \r\n}, "value", "text", Model.CityId), new { @class = "your-css-class" })\r\n<\/pre>\n
O Helper est\u00e1 recebendo os seguintes atributos em ordem:<\/p>\n
    \n
  1. O model;<\/li>\n
  2. Uma lista de objetos que representa as op\u00e7\u00f5es;<\/li>\n
  3. A propriedade que representa o valor selecionado;<\/li>\n
  4. A propriedade que representa o texto apresentado;<\/li>\n
  5. O valor inicial;<\/li>\n
  6. Apenas como exemplo e n\u00e3o obrigat\u00f3rio, estamos associando uma classe CSS para estilizar.<\/li>\n<\/ol>\n
    Bem tranquilo n\u00e9?<\/p>\n
    Pode ser que voc\u00ea queira preencher a lista com valores de origem de uma consulta em seu controller. Neste caso o Helper poderia ser configurado assim:<\/p>\n
    \r\n@Html.DropDownListFor(model => model.CityId, null, "Select a option", \r\nnew { @class = "form-control", @value = "0" })\r\n<\/pre>\n
    Note que n\u00e3o passamos a lista de valores e sim o valor null. Note tamb\u00e9m que est\u00e1 sendo configurado um atributo value com valor 0, indicando que o texto inicialmente apresentado retornar\u00e1 este valor.<\/p>\n
    J\u00e1 no seu controller voc\u00ea poderia preencher este Helper da seguinte forma:<\/p>\n
    \r\nvar city = GetCity();\r\nViewData["CityId"] = new SelectList(city, "CityId", "Name");\r\n<\/pre>\n
    O m\u00e9todo GetCity ficaria por sua conta e retornaria uma lista de objetos de cidade contendo as propriedades Id e Name.<\/p>\n
    E com isso temos dois exemplos bem tranquilos para preencher o DropDownListFor.<\/p>\n
    M\u00e3o na massa, um abra\u00e7o!<\/p>\n","protected":false},"excerpt":{"rendered":"
    Se voc\u00ea est\u00e1 desenvolvendo websites utilizando ASP.NET MVC certamente vai precisar criar uma lista suspensa e preencher esta lista com dados do seu model. Isso \u00e9 uma d\u00favida muito comum… <\/p>\n","protected":false},"author":1,"featured_media":397,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_exactmetrics_skip_tracking":false,"_exactmetrics_sitenote_active":false,"_exactmetrics_sitenote_note":"","_exactmetrics_sitenote_category":0,"footnotes":""},"categories":[11],"tags":[13,16,14,12,15],"class_list":["post-98","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-asp-net-mvc","tag-aspnet","tag-dropdown","tag-helpers","tag-mvc","tag-razor"],"_links":{"self":[{"href":"https:\/\/fabiobrandao.net.br\/blog\/wp-json\/wp\/v2\/posts\/98","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/fabiobrandao.net.br\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/fabiobrandao.net.br\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/fabiobrandao.net.br\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/fabiobrandao.net.br\/blog\/wp-json\/wp\/v2\/comments?post=98"}],"version-history":[{"count":25,"href":"https:\/\/fabiobrandao.net.br\/blog\/wp-json\/wp\/v2\/posts\/98\/revisions"}],"predecessor-version":[{"id":124,"href":"https:\/\/fabiobrandao.net.br\/blog\/wp-json\/wp\/v2\/posts\/98\/revisions\/124"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/fabiobrandao.net.br\/blog\/wp-json\/wp\/v2\/media\/397"}],"wp:attachment":[{"href":"https:\/\/fabiobrandao.net.br\/blog\/wp-json\/wp\/v2\/media?parent=98"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fabiobrandao.net.br\/blog\/wp-json\/wp\/v2\/categories?post=98"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fabiobrandao.net.br\/blog\/wp-json\/wp\/v2\/tags?post=98"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}