4

Tenho um Dropdown de Estados, e um de Cidades, e um campo de CEP, que está fazendo o uso da API on line dos correios, quando coloco um cep, meu sistema verifica se a cidade já existe na base de dados, e se caso não tenha é adicionada. até aqui tudo bem, o problema é que eu tenho um dropdown que trás as cidades que foram cadastradas até a atualização da tela, porém quando digito o cep, e ele busca pela cidade, que quando não existe e insere a nova, ele não atualiza o meu Dropdown com as cidades, não exibindo a cidade 'nova', mas se eu der um refresh na página toda, ele exibe esta cidade nova. Queria uma opção para que ao ser inserido no banco esta nova cidade, meu dropdown seja atualizado também.

JavaScript Utilizado:

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

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

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

DropdownList

 <div class="form-group">
    @Html.LabelFor(model => model.CidadeID, "Estado", htmlAttributes: new { @class = "control-label col-md-2" })
    <div class="col-md-10">
        @Html.DropDownList("CidadeID", null, htmlAttributes: new { @class = "form-control", id = "Cidade", })
        @Html.ValidationMessageFor(model => model.CidadeID, "", new { @class = "text-danger" })
    </div>
</div
5
  • Bom dia consegue compartilhar algum codigo tanto do html como c#? Commented 19/11/2016 às 10:59
  • Bom dia @FabioSilvaLima Estava tão cansado ontem a noite, que nem coloquei o código, foi mal. Atualizei a pergunta já. valeu Commented 19/11/2016 às 14:38
  • Você precisa de uma função que recarregue o conteúdo do dropdown via ajax após concluir o metodo RetornaEndereco do Controller
    – ronssm
    Commented 28/12/2016 às 17:14
  • Isso ocorre porque na aplicação Web, o binding do datasource é feito apenas no carregamento da página e não em tempo real (A menos é claro, que você implemente isso na mão, usando AJAX ou Socket/SignalR). Para se obter os dados atualizados basta fazer uma requisição AJAX para um novo método que retorne o JSON das cidades atualizado...Mas um conselho, o Brasil possui 5570 cidades, não é mais fácil cadastrar todas elas de uma vez ? Commented 10/01/2017 às 4:04
  • Seguem links com o SQL para cadastro de todas as cidades de uma única vez: - samus.com.br/web/site/… (faltando 6 cidades) - github.com/chandez/Estados-Cidades-IBGE (faltando 5 cidades) Commented 10/01/2017 às 4:05

1 Resposta 1

1

-- Editado para melhorar a resposta e acrescentar o código.

No seu Json você precisa acessar a função que salva sua nova cidade e que então retorne uma lista completa de todas as cidades, incluindo a nova cidade adicionada.

Após isso, no 'success' do Json você precisa alterar a "data" do seu select2. Com isso ele cria todo o select2 novamente, então é preciso repassar as opções desejadas, como placeholder, theme e etc ...

Código:

$.post('url do teu método', {post}).success(function(response) {    
    // o método precisa retornar uma lista atualizada das cidades
    // como array dentro do response (response.data)
    // o response == ao return do teu método

    // recebe os dados retornados
    let data = response.data;

    // seta o value do select
    $('seu select').select2({
        placeholder: 'Selecione ...',
        data: data,
        allowClear: 'true',
    });
});

Mas lembrando, o select2 não aceita um objeto como 'data', então se tua aplicação retornar um objeto no lugar de um array, é preciso transforma-lo primeiro:

let arrayData = [];
Object.keys(response.data).forEach(id => {
    arrayData.push({
        id: id,
        text: response.data[id],
    });
});

Então no "data" do select2 você passa o arrayData.

Porém,uma outra solução não tão elegante caso não queira ou não tenha tanta familiaridade em consultar a base de dados, é simplesmente adicionar a nova opção com "append" dentro do select e ativar um evento de "change" no select.

$('seu select').append($('<option>', {
    value: 'o id da nova cidade',
    text: 'a descrição da nova cidade'
})).trigger('change');
2
  • Como ele faria isso? Commented 5/08/2017 às 4:22
  • 1
    @CypherPotato Atualizei a resposta, agora deve ficar mais claro :)
    – ThiagoYou
    Commented 8/08/2017 às 12:19

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 .