Set Value in an @ html.DropDownList

1

In a form for Address Book, I wanted to do the following. the guy types the zip, then fetches the zip, and returns the data to fill in the EditorFor. So good, it's working. City and States are in a separate table, and are displayed by DropDownList. I wanted that in the return of Json, the data besides being filled in the EditorFor, also be displayed in the DropdownList according to the zip code. Ex: DropDownList of states is displayed as Select and after typing a zip that for example matches SP the dropdown brings the listed state, instead of remaining the Select

DropDownList

     <div class="form-group">
        @Html.LabelFor(model => model.EstadoID, "Estado", htmlAttributes: new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            @Html.DropDownList("EstadoID", null, htmlAttributes: new { @class = "form-control", id = "Estado", })
            @Html.ValidationMessageFor(model => model.EstadoID, "", new { @class = "text-danger" })
        </div>
    </div

Ex of an EditorFor being populated with return information:

    <div class="form-group">
        @Html.LabelFor(model => model.Bairro, htmlAttributes: new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            @Html.EditorFor(model => model.Bairro, new { htmlAttributes = new { @class = "form-control", id = "bairro" } })
            @Html.ValidationMessageFor(model => model.Bairro, "", new { @class = "text-danger" })
        </div>
    </div>

and here, my Json return object:

<script>
    $(document).ready(function () {
        $("#cep").blur(function () {
            var cepValue = $(cep).val();
            $.ajax({
                type: 'POST',
                url: 'RetornaEndereco',
                data: { cep: cepValue },
                dataType: 'json',
                success: function (data) {
                    $('#bairro').val(data.bairro);
                    $('#endereco').val(data.end);
                    $('#cidade').val(data.cidade);
                    $('#estado').val(data.uf);
                },
                error: function (data) {
                    alert('Error' + data);
                }
            });
        });
    });
</script>

and finally the Controller:

    public JsonResult RetornaEndereco(string cep)
    {
        var valor = Regex.Replace(cep, "[^0-9]", "");
        var ws = new WSCorreios.AtendeClienteClient();
        var resposta = ws.consultaCEP(valor);
        try
        {
            System.Console.WriteLine();
            System.Console.WriteLine("Endereço: {0}", resposta.end);
            System.Console.WriteLine("Bairro: {0}", resposta.bairro);
            System.Console.WriteLine("Cidade: {0}", resposta.cidade);
            System.Console.WriteLine("Estado: {0}", resposta.uf);
        }
        catch (Exception ex)
        {
            return Json("Erro ao efetuar busca do CEP: {0}", ex.Message);
        }

       //Alterado Daqui pra baixo
       Estado estado = (from u in db.Estados where u.Sigla == resposta.uf select u).SingleOrDefault();//Busca no banco pelo Estado

        Cidade iDCidade = (from u in db.Cidades where u.Nome == resposta.cidade && u.EstadoID == estado.EstadoID select u).SingleOrDefault();//Busca no banco pela cidade que está no mesmo estado
        Cidade levaCidade = new Cidade();
        if (iDCidade == null)//Se a cidade não estiver cadastrada, insere uma nova cidade. 
        {
            Cidade cidade = new Cidade();
            cidade.Nome = resposta.cidade;
            cidade.EstadoID = estado.EstadoID;
            db.Cidades.Add(cidade);
            db.SaveChanges();
            levaCidade.CidadeID = cidade.CidadeID;//Pega o ID da cidade cadastrada
            levaCidade.EstadoID = cidade.EstadoID;//pega o id do estado selecionado
        }
        else
        {
            Cidade cidade = new Cidade();
            cidade.Nome = resposta.cidade;
            cidade.EstadoID = estado.EstadoID;
            levaCidade.CidadeID = iDCidade.CidadeID;//Pega o ID da cidade cadastrada
            levaCidade.EstadoID = estado.EstadoID;//pega o id do estado selecionado
        }
        Endereco levarEndereco = new Endereco();//Cria o objeto para ser transportado pelo Json
        levarEndereco.CidadeID = levaCidade.CidadeID;
        levarEndereco.Numero = levaCidade.EstadoID;//Passando o id do estado na variavel numero para alterar no json
        levarEndereco.Bairro = resposta.bairro;
        levarEndereco.Descricao = resposta.end;
        ViewBag.CidadeID = new SelectList(db.Cidades, "CidadeID", "Nome", levarEndereco.CidadeID);

         return Json(levarEndereco);
        //Alterado até aqui
    }

Console Log as @Brunno said:

    
asked by anonymous 18.11.2016 / 14:33

1 answer

2

If DropDownList is already populated, just do what you did:

$("#mydropdownlist").val("thevalue");

You can also add .change() if you do not reflect the value

If you already have a DropDownList empty, you'll have to add option :

$('#mydropdownlist').append($('<option>', {
    value: 1,
    text: 'Seu valor'
}));

UPDATE:

If for example you get json with the cities like this:

'[{"id":1,"nome":"São Paulo"},{"id":2,"nome":"Belo Horrrizinte"},{"id":2,"nome":"Manaus"}]'

You can do the parse for object and then iterate added the same in select , it would look something like this:

HTML:

<select id="cidades">
</select>

JS:

var cidades = JSON.parse('[{"id":1,"nome":"São Paulo"},{"id":2,"nome":"Belo Horrrizinte"},{"id":2,"nome":"Manaus"}]');

cidades.forEach(function(cidade) {

  $('#cidades').append($('<option>', {
      value: cidade.CidadeID,
      text: cidade.Nome
  }));    

});

You can see working here .

    
18.11.2016 / 16:33