Nesta aula iremos aprender três maneiras de buscar um endereço através do 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:
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.
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:
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>
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
Nesta aula iremos aprender três maneiras de buscar um endereço através do 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:
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.
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:
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>
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