1

Em um form para Cadastros de endereços, queria fazer o seguinte. o cara digita o cep, então busca o cep, e retorna os dados para preencher nos EditorFor. Até ai tudo bem, está funcionando. Cidade e Estados estão em uma tabela separadas, e são exibidas por DropDownList. Queria que no retorno do Json, os dados além de serem preenchidos nos EditorFor, também ser exibidos no DropdownList de acordo com o CEP digitado. Ex: DropDownList de estados é exibido como Selecione e após digitar um cep que por exemplo Correspondesse à SP o dropdown trouxesse o estado listado, ao invés de permanecer o Selecione

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 de um EditorFor sendo preenchido com a informação do retorno:

    <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>

e aqui, meu objeto de retorno Json:

<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>

e por fim o 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 conforme @Brunno disse:

inserir a descrição da imagem aqui

1 Resposta 1

2

Se o DropDownList já estiver populado, basta fazer o que você fez:

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

Você pode também adicionar um .change() caso não reflita o valor

Já se você tem um DropDownList vazio, você vai ter que adicionar a option:

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

UPDATE:

Se por exemplo você receber um json com as cidades assim:

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

Você pode fazer o parse para objeto e depois iterar adicionado o mesmo no select, ficaria algo tipo isso:

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
  }));    

});

Você pode ver funcionando aqui.

17
  • @Bruno eu estou fazendo a inserção de dados de cidades de acordo com o cep. o cara digita um cep, se a cidade não estiver cadastrado no banco, ele insere, e o retorno trás a ID da cidade, no caso precisava dar um refresh no dropdown. Commented 18/11/2016 às 16:17
  • Legal, então você já tinha todas as cidades no DropDownList :) esse refresh deu utilizando o que ? .change() ?
    – Brunno
    Commented 18/11/2016 às 16:22
  • acho que vc não entendeu... assim, o cara digita um cep, se na minha base, aquela cidade não tiver, ele insere na base minha, e o dropdownlist não exibe aquele valor, pois preciso dar um refresh apenas nele entendeu? estou aqui buscando uma opção que só atualiza ele..., se eu der um refresh na página inteira o dropdown exibe o valor, se não der não exibe... sabe algo a respeito deste refresh apenas num componente? Commented 18/11/2016 às 16:37
  • Então, a ideia do .change() é isso, atualizar seu componente. ficaria algo assim: $('#estado').val(data.uf).change(); =]
    – Brunno
    Commented 18/11/2016 às 16:45
  • Fiz assim $('#cidade').val(data.CidadeID).change(); mas ele atualiza apenas se a cidade se já tiver sido carregada no load da página. se for uma cidade nova, que foi inserida não aparece durante o processo ele não aparece (só depois do refresh)... Commented 18/11/2016 às 17:22

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .