Ainda não tem acesso? Estude com a gente! Matricule-se
Ainda não tem acesso? Estude com a gente! Matricule-se

Solucionado (ver solução)

Como preencher o formulário de Endereço ao digitar o CEP

Consegui implementar o via CEP para gravar os dados do endereço pela pesquisa no CEP, utilizando a biblioteca da Caelum e manipulando no controller, mas isso se eu deixar os campos em branco de logradouro e etc. Estou utilzando o AspNetCore MVC. Abaixo o meu form de cadastro, quero preencher automaticamente os campos de logradouro, bairro, cidade e uf ao digitar o CEP.

@model ClienteCadastro.Models.Cliente

@{
    ViewData["Title"] = "Create";
}

<h4>Cliente</h4>
<hr />
<div class="row">
    <div class="col-md-4">
        <form asp-action="Create">
            <div asp-validation-summary="ModelOnly" class="text-danger"></div>
            <div class="form-group">
                <label asp-for="Nome" class="control-label"></label>
                <input asp-for="Nome" class="form-control" />
                <span asp-validation-for="Nome" class="text-danger"></span>
            </div>
            <div class="form-group">
                <label asp-for="Cep" class="control-label"></label>
                <input asp-for="Cep" class="form-control" />
                <span asp-validation-for="Cep" class="text-danger"></span>
            </div>
            <div class="form-group">
                <label asp-for="Logradouro" class="control-label"></label>
                <input asp-for="Logradouro" class="form-control" />
                <span asp-validation-for="Logradouro" class="text-danger"></span>
            </div>
            <div class="form-group">
                <label asp-for="Numero" class="control-label"></label>
                <input asp-for="Numero" class="form-control" />
                <span asp-validation-for="Numero" class="text-danger"></span>
            </div>
            <div class="form-group">
                <label asp-for="Complemento" class="control-label"></label>
                <input asp-for="Complemento" class="form-control" />
                <span asp-validation-for="Complemento" class="text-danger"></span>
            </div>
            <div class="form-group">
                <label asp-for="Bairro" class="control-label"></label>
                <input asp-for="Bairro" class="form-control" />
                <span asp-validation-for="Bairro" class="text-danger"></span>
            </div>
            <div class="form-group">
                <label asp-for="Cidade" class="control-label"></label>
                <input asp-for="Cidade" class="form-control" />
                <span asp-validation-for="Cidade" class="text-danger"></span>
            </div>
            <div class="form-group">
                <label asp-for="Uf" class="control-label"></label>
                <input asp-for="Uf" class="form-control" />
                <span asp-validation-for="Uf" class="text-danger"></span>
            </div>
            <div class="form-group">
                <input type="submit" value="Create" class="btn btn-primary" />
            </div>
        </form>
    </div>
</div>
<div>
    <a asp-action="Index">Voltar Para Lista</a>
</div>
@section Scripts {
    @{await Html.RenderPartialAsync("_ValidationScriptsPartial");}
}

O que quero é buscar e ainda restringir a modificação nos campos onde o CEP trouxer resultados.

    [HttpPost]
        [ValidateAntiForgeryToken]
        public async Task<IActionResult> Create([Bind("Id,Nome,Logradouro,Numero,Complemento,Bairro,Cidade,Uf,Cep")] Cliente cliente)
        {
            if (ModelState.IsValid)
            {
                ViaCEP viaCep = new ViaCEP();
                cliente.Logradouro = viaCep.GetEndereco(cliente.Cep).Logradouro;
                cliente.Bairro = viaCep.GetEndereco(cliente.Cep).Bairro;
                cliente.Uf = viaCep.GetEndereco(cliente.Cep).UF;
                cliente.Cidade = viaCep.GetEndereco(cliente.Cep).Localidade;
                _context.Add(cliente);
                await _context.SaveChangesAsync();
                return RedirectToAction(nameof(Index));
            }
            return View(cliente);
        }
2 respostas

Oi Raimundo, tudo bem?

Você está obtendo os dados do CEP na action Create (HttpPost), quando o correto seria fazer isso na action que carrega a View (ViewResult). Você pode compartilhar o código via GitHub, ou enviar para o e-mail marcelo.oliveira@alura.com.br? Assim posso te auxiliar melhor. Obrigado

solução

Olá, obrigado pelo retorno, consegui resolver utilizando ViaCEP utilizando JQuery. Segue a forma como implementei.

$(document).ready(function () {

    function limpa_formulário_cep() {

        $("#Endereco").val("");
        $("#Bairro").val("");
        $("#Cidade").val("");
        $("#Estado").val("");

    }

    $("#Cep").blur(function () {
        var cep = $(this).val().replace(/\D/g, '');
        if (cep != "") {

            var validacep = /^[0-9]{8}$/;
            if (validacep.test(cep)) {

                $("#Endereco").val("...");
                $("#Bairro").val("...");
                $("#Cidade").val("...");
                $("#Estado").val("...");

                $.getJSON("https://viacep.com.br/ws/" + cep + "/json/?callback=?", function (dados) {

                    if (!("erro" in dados)) {

                        $("#Endereco").val(dados.logradouro);
                        $("#Bairro").val(dados.bairro);
                        $("#Cidade").val(dados.localidade);
                        $("#Estado").val(dados.uf);

                    }
                    else {

                        limpa_formulário_cep();
                        alert("CEP não encontrado.");
                    }
                });
            }
            else {

                limpa_formulário_cep();
                alert("Formato de CEP inválido.");
            }
        }
        else {

            limpa_formulário_cep();
        }
    });
});

Dai só chamei o script e deu de boa.