Html.DropDownList

ASP.NET

Wednesday, July 18, 2018

Hoje eu vou falar e mostrar como preencher uma DropDownList usando ASP MVC. Em meu caso, tinha um objeto preenchido mas não estava em formado SelectListItem, só tinha um List() que era possível devido a lista de objeto.

Ferramenta:

Visual Studio
Ambiente: ASP.NET MVC
Serviço Web API

Os dados vieram de um serviço Web API em formato Application/JSon. Os dados pegos precisavam ser trabalhados para colocar dentro do DropDownList. Existe uma classe com apenas Get e Set com os dados necessários para o preenchimento do Drop. Muitos exemplos na Internet mostram apenas a criação com dados fixos e não vindos de uma fonte de dados.

A classe DadosItemViewModel é a classe que se comunica com a View e a Model. Foi criado uma outra public class gerando uma lista da classe view model. Veja o código 1.

public class DadosViewModel
{
    public DadosViewModel()
    {
        Plans = new List<DadosItemViewModel>();
    }
    /// <summary>
    /// planos válidos
    /// </summary>
    public ICollection<DadosItemViewModel> Plans { get; set; }
}
public class DadosItemViewModel
{
    public DadosItemViewModel()
    {
        Services = new List<PlanServicesViewModel>();
    }
    public Guid Id { get; set; }
    public double Value { get; set; }
    public string Name { get; set; }
    public List<PlanServicesViewModel> Services { get; set; }
    }
}

Código 1 - Classe com atribuitos

Essas duas classes criadas serão responsáveis pela deserialização dos dados vindos do serviço. Depois dessa criação, vamos buscar os dados com GetAsync. Veja o código 2 dentro da Controller.

private DadosViewModel buscarDados()
    {
        using (HttpClient client = new HttpClient())
        {
            using (var message = client.GetAsync(string.Format("{0}/GetPlansWithServices/", uri)).Result)
            {
                return dados = Newtonsoft.Json.JsonConvert.DeserializeObject<Models.PlansViewModel>(message.Content.ReadAsStringAsync().Result);
            }
        }
    }

Código 2 - Buscando os dados

Lembro que o serviço JSon já estava pronto, criado em outro momento. Existem muitos artigos meus falando sobre Web API, procure no site www.ecode10.com e faça o passo a passo.

Continuando ainda dentro da Controller, criei uma variável com indicando a View Model e no começo da classe. Código 3.

DadosViewModel dados = new Models.DadosViewModel();

Código 3 - Criando variável na controller

Essa variável na controller serve para ser usada dentro da controller inteira, não importa qual o método.

Agora com os dados prontos, basta buscar, preencher a variável e trabalhar com ela para colocar os dados dentro da DropDownList.

Criei um método chamado preencherDropDownListDados() responsável pelo que escrevi acima. Código 4.

    private void preencherDropDownListDados()
    {
        //busca os dados
        dados = buscarDados();
        
        //seleciona os dados e coloca na ViewBag.
        ViewBag.DropDados = planos.Plans.Select(x => new SelectListItem() { Text = x.Name.ToString() });
    }

Código 4 - Preenche a DropDownList

Note que no código 4 para tornar ele um SelectListItem, precisei fazer um Select com o new SelectListItem passando o Text. Lembro que no nosso caso, não vamos precisar do valor, só do texto mesmo. O texto que vem está informado na propriedade Name.

Basta agora fazer a parte HTML da página CSHTML. Código 5.

@Html.DropDownList("dadosAdquirido", (IEnumerable<SelectListItem>)ViewBag.DropDados, new { @class = "form-control" })

Código 5 - Preenchendo o HTML

O ID da DropDownList é "dadosAdquirido". Colocamos um IEnumerable com SelectListItem como um cast e chamamos a ViewBag.DropDados já preenchida na controller. Adicionei um formato para ela também.

Com isso, os dados serão preenchidos e mostrados na tela para o usuário. Espero que tenha gostado e qualquer dúvida por favor entrar em contato pelo site www.mauriciojunior.org.