Asp Net MVC - Busca por CEP

O objetivo da aula de hoje mostrar como buscar o endereço completo quando digitamos um CEP em um campo de formulário e automaticamente, o sistema irá preencher os campos de endereço, cidade e Estado.

Temos três estratégias para fazer:

• Utilizar Ajax - Front-end;
• Através do back-end fazendo um request para o servidor, que no seu controller MVC, direciona para a model e a model resolve e retorna o CEP, e depois você envia para o front-end;
• Através de uma API, que servirá como proxy. Esse proxy você terá como revisar ou organizar o contrato de uma API que você irá retornar, ou seja, a API vai retornar os campos endereço, bairro, cidade, de acordo com o que o serviço quer, ou seja, as vezes estes campos retornam em inglês, espanhol, depende do tipo de serviço que você vai utilizar.

Utilizando Ajax - Front-end

Temos o nosso HTML, na pasta Views/CEP chamado Index.cshtml.

Para fazer o carregamento do endereço por Ajax, vamos utilizar JQuery, que é um framework para Javascript.

Então vamos adicionar o JQuery no código da página cshtml.

Quando estamos fazendo uma aplicação MVC, o JQuery ja vem por padrão instalado, na pasta Scripts.

Criamos outro arquivo script, chamado cep.js.

O Arquivo cep.js será executado quando o cursor estiver no campo cep e sair do campo , acontecendo o evento change:

      
        
        JQuery(function(){
          $("input[name=cep]").change(function(){
            var cep_code = $(this).val();
            if(cep_code.length <= 0) return;
            $get("http://apps.widenet.com.br/busca-cep/api/cep.json",{code : cep_code},function(result){
              if(result.status!= 1){
                alert(result.message || "Houve um erro desconhecido");
                return;
              }
              $("input[name=cep]").val(result.code);
              $("input[name=estado]").val(result.state);
              $("input[name=cidade]").val(result.city);
              $("input[name=bairro]").val(result.district);
              $("input[name=endereco]").val(result.address);
            )}; 
          )}; 
        )}; 
       
    

No arquivo de formulário cshtml, terá os campos retornados e a referência do JQuery.

      

        @Scripts.Render("~/Script/jquery-1.10.2.js")
        @Scripts.Render("~/Script/cep.js")

      
        < br />
        < br />
        < h1> Carregar CEP < /h1>
        < br />
        < br />
        < form action=""  >
          
          CEP: < br>
          < input type="text" class="form-control" name="cep" value="" >
          < br>

          Endereço: < br>
          < input type="text" class="form-control" name="endereco" value="" >< br>
          < br>

          Bairro: < br>
          < input type="text" class="form-control" name="bairro" value="" >< br>
          < br>

          Cidade: < br>
          < input type="text" class="form-control" name="cidade" value="" >< br>
          < br>

          Estado: < br>
          < input type="text" class="form-control" name="estado" value="" >< br>
          < br>
        < /form>  
    
       
    

Será retornado um arquivo JSON com as informações do endereço referente ao cep da busca.

Utilizando Back-end

Primeiro vamos criar uma nova rota chamada consulta-cep.

      

      routes.MapRoute(
        "consulta-cep",
        "consulta-cep",
        new { controller = "Cep", action = "index"}
      );
       
    

Teremos uma controller CepController, que vai abrir uma ação chamada Index.

      
        namespace MVC_GerenciadorDeConteudo.Controllers
        {
          public class CepController : Controller 

            public ActionResult Index()
            {
              ViewBag.Cep = Business.Cep.Busca('09931410');
              return View();
            }
        }
       
    

Criaremos uma nova classe na camada Business chamada Cep, as propriedades que utilizaremos para o objeto e o método estático chamado Busca, que retorna o CEP.

Dentro deste método Busca, teremos:

• A instância do próprio objeto;
• Montaremos a url, concatenando o cep que foi passado por parâmetro;
• Utilizamos o HttpWebRequest, enviando a requisição e passando a url;
• Retorna um objeto Stream, que será convertido para string na variável chamada json;
• Utilizamos o objeto JavaScripSerializer. Esse objeto é instalado através:
• Menu -> Ferramentas;
• Gerenciador de Pacotes do NuGet;
• Gerenciar Pacotes do NuGet para a Solução;
• No campo de pesquisa, buscar por: JavaScripSerializer;
• Clicar no objeto na lista da pesquisa e instalar em todos os projetos da aplicação.
• Após instalado, faremos o using do JavaScripSerializer na classe.
• Com o objeto serializer, fizemos o Deserializer passando a string json, deixando de acordo com o objeto. Para que funcione, precisamos ter campos iguais ao retornao no Json, então foi criado o objeto JsonCepObject.

      
        using System.Net;
        using System.IO;
        using System.Web.Script.Serialization;

        namespace Business
        {
          public class Cep
          {
            public string CEP { get;set };
            public string Endereco { get;set };
            public string Bairro { get;set };
            public string Cidade { get;set };
            public string Estado { get;set };
          }

          public static Cep Busca(string cep) 
          {
            var cepObj = new Cep();
            var url = "http://apps.widenet.com.br/busca-cep/api/cep.json?code=" + cep;

            HttpWebRequest request = (HttpWebRequest)WebRequest.Create(url);
            request.AutomaticDescompression = DescompressionMethods.GZip;

            string json = string.Empty;
            using (HttpWebRequest response = (HttpWebResponse)request.GetResponse())
            using (Stream stream = response.GetResponseStream())
            using (StreamReader reader = new StreamREader(sream))
            {
              json = reader.ReadToEnd();
            }
            JavaScripSerializer json_serializer = new JavaScripSerializer();
            JsonCepObject cepJson = json_serializer.Deserialize< JsonCepObject>(json);

            cepObj.CEP = cepJson.code;
            cepObj.Endereco = cepJson.address;
            cepObj.Bairro = cepJson.district;
            cepObj.Cidade = cepJson.city;
            cepObj.Estado = cepJson.state;
            return cepObj;
          }
        } 
        public class JsonCepObject
        {
          public string code { get;set };
          public string state { get;set };
          public string city { get;set };
          public string district { get;set };
          public string address { get;set };
        }

      

    

Vamos preencher os campos do formulário com o objeto cep que foi retornado, na propriedade value

      
      
        < br />
        < br />
        < h1> Carregar CEP < /h1>
        < br />
        < br />
        < form action=""  >
          
          CEP: < br>
          < input type="text" class="form-control" name="cep" value="@cep.CEP" >
          < br>

          Endereço: < br>
          < input type="text" class="form-control" name="endereco" value="@cep.Endereco" >< br>
          < br>

          Bairro: < br>
          < input type="text" class="form-control" name="bairro" value="@cep.Bairro" >< br>
          < br>

          Cidade: < br>
          < input type="text" class="form-control" name="cidade" value="@cep.Cidade" >< br>
          < br>

          Estado: < br>
          < input type="text" class="form-control" name="estado" value="@cep.Estado" >< br>
          < br>
        < /form>  
    
       
    

Utilizando API

Primeiro vamos criar uma nova rota chamada api_consulta-cep.

      
        routes.MapRoute(
          "api_consulta-cep",
          "api/consulta-cep/{cep}",
          new { controller = "Cep", action = "Consulta", cep=""}
        );
       
    

Teremos na controller CepController, a ação chamada Consulta.

A API utiliza a mesma classe Cep e método Busca, que foi utilizada no Back-end para buscar o CEP, retornando o objeto da classe Cep, utilizando a mesma classe JavaScripSerializer, que foi feito o Deserialize, para fazer o Serialize, transformando as propriedades da classe em string e em arquivo Json.

      
        namespace MVC_GerenciadorDeConteudo.Controllers
        {
          public class CepController : Controller 

            public string Consulta(string cep)
            {
              var cepObj =  Business.Cep.Busca(cep);
              return new JavaScripSerializer().Serialize(cepObj);
            }
        }
       
    

Para fazer o teste, digitamos na url a rota da api para buscar o cep. Exemplo: http://localhost:52159/api/consulta-cep/09931410