Auto-Complet de CEP usando JQuery e LINQ
Autor: Bruno Rafael Muratore | Publicado: 2012-06-13T19:48:00-03:00

Caros leitores,

Nesta postagem irei detalhar como implementar a funcionalidade de auto-completar o endereço através de um CEP, além da disponibilização de uma base completa dos ceps do Brasil.

Para isso, será usado um JQuery que após o usuário digitar o CEP, será chamado um WebService feito em ASP.Net que conectará ao SQL usando LINQ, chamando uma stored procedure de dentro do SQL.

O Post será dividido em:

Banco de Dados
Acesso aos Dados
Web Service
Front-End






1. Banco de Dados

Para começar é necessário a criação do banco com as tabelas que contém as informações de cep, cidade, bairro rua e logradouro. Um Backup completo do banco para SQL Server 2008 pode ser baixado aqui, ou caso seja necessário criar as tabelas num banco já existente ou que não seja SQL Server, faça o download dos scripts aqui. Esta base contém aproximadamente 800mil logradouros.

Dentro do banco temos as tabelas Uf, cidade, bairro e logradouro. Englobando todas as informações que precisaremos temos a view vw_cep, e para acessar essa view foi criada a stored procedure BuscaCep, que será utilizada pelo nosso WebService.






2. Acesso aos Dados

Será utilizado o LinqToEntities para fazermos a chamada ao SQL. A intenção é mostrar o quão simples é o procedimento, e que é tão performático quanto outros métodos. Para isso deve-se adicionar uma nova "Linq to SQL Classes" ao seu projeto, que iremos nomear de cep.dbml.&nbsp;



Após a criação do arquivo cep.dbml, abri-lo e arrastar a procedure de dentro do Server Explorer para a tela de Desing do Dbml, conforme print abaixo:






Após adicionar a procedure à nosso dbml, já somos capazes de executá-la de dentro de nosso DataContext. Então já podemos iniciar a criação do WebService.






3. Web Service

Este Web Service terá a finalidade de consumir a Procedure criada no SQL, e retornar um único resultado contendo o estado, cidade, bairro e logradouro do cep passado como parâmetro.



Como este webservice será consumido por um javascript, devemos adicionar o seguinte atributo à classe do WebService:

[System.Web.Script.Services.ScriptService]

Ai criaremos o seguinte método dentro do WebService:

&nbsp; &nbsp; [WebMethod(EnableSession = true)]
&nbsp; &nbsp; [ScriptMethod(ResponseFormat = ResponseFormat.Json)]
&nbsp; &nbsp; public BuscaCEPResult BuscarCep(string cep)&nbsp;
&nbsp; &nbsp; {
&nbsp; &nbsp; &nbsp; &nbsp; using (CepDataContext cepContext = new CepDataContext())
&nbsp; &nbsp; &nbsp; &nbsp; {
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return cepContext.BuscaCEP(cep).SingleOrDefault();
&nbsp; &nbsp; &nbsp; &nbsp; }
&nbsp; &nbsp; }

O atributo do método ( ScriptMethod ) também é necessário já que iremos consumir o WS com javascript. Dentro do método é feita a instância do nosso DataContext, e a stored procedure é chamada passando como parâmetro o CEP recebido pelo WS.






4.&nbsp;Front-End

Com tudo feito, falta apenas consumirmos nosso WebService através do front-end para preencher os campos desejados.



Os elementos do formulário foram criados da seguinte maneira no aspx:




&lt;fieldset&gt;

&nbsp; &nbsp; &nbsp; &nbsp; Cep: &lt;asp:TextBox runat="server" ID="txtCep" MaxLength="8" ClientIDMode="Static"&gt;&lt;/asp:TextBox&gt;&lt;br /&gt;

&nbsp; &nbsp; &nbsp; &nbsp; &lt;br /&gt;

&nbsp; &nbsp; &nbsp; &nbsp; UF: &lt;asp:TextBox runat="server" ID="txtUF" ClientIDMode="Static"&gt;&lt;/asp:TextBox&gt;&lt;br /&gt;

&nbsp; &nbsp; &nbsp; &nbsp; Cidade: &lt;asp:TextBox runat="server" ID="txtCidade" ClientIDMode="Static"&gt;&lt;/asp:TextBox&gt;&lt;br /&gt;

&nbsp; &nbsp; &nbsp; &nbsp; Bairro: &lt;asp:TextBox runat="server" ID="txtBairro" ClientIDMode="Static"&gt;&lt;/asp:TextBox&gt;&lt;br /&gt;

&nbsp; &nbsp; &nbsp; &nbsp; Logradouro: &lt;asp:TextBox runat="server" ID="txtLogradouro" ClientIDMode="Static"&gt;&lt;/asp:TextBox&gt;&lt;br /&gt;

&nbsp; &nbsp; &lt;/fieldset&gt;




Note que foi utilizada a propriedade ClientIDMode="Static" para que possamos acessar os textbox's diretamente pelos seus ID's via JQuery. Porém essa opção só está disponível do .Net Framework 4.0 para cima, então em versões anteriores os elementos deverão ser obtidos de outra forma pelo JQuery. Uma opção é usar o atributo name nos elementos, e buscar pelo JQuery usando: $('input[name="txtCep"]) .



Agora vamos ao script. Para que a função BuscarCep seja chamada quando o usuário termine de digitar o CEP e tire o foco do textbox do CEP, o seguinte código é usado:




$(document).ready(function () {

&nbsp; &nbsp; &nbsp; &nbsp; $("#txtCep").blur(function () {

&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; BuscaCep($("#txtCep").val());

&nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; &nbsp;&nbsp;

&nbsp; &nbsp; });




Então vamos à consumação do WebService. Iremos utilizar a função ajax do JQuery, que fará uma chamada síncrona do método do WebService descrito no parâmetro url, no formato EndereçoDoWebService.asmx/NomeDoMétodo.&nbsp;



Como iremos passar um parâmetro para o WS, este deve aparecer dentro de data no seguinte formato:&nbsp;

{ 'cep': '00000000' }



O WS irá então retornar um objeto na estrutura&nbsp;BuscaCEPResult,&nbsp;definida pelo nosso DataContext. Precisamos então apenas ler cada parâmetro retornado pelo WS e jogá-lo no textbox desejado, como podemos ver na função completa abaixo:




function BuscaCep(cep) {

&nbsp; &nbsp; &nbsp; &nbsp; $.ajax({

&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; type: "POST",

&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; url: "BuscaCep.asmx/BuscarCep",

&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; data: "{ 'cep': '" + cep + "' }",

&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; contentType: "application/json; charset=utf-8",

&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; dataType: "json",

&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; success: function (msg) {

&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if (msg.d == null) {

&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; alert("Cep inválido ou não encontrado.");

&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }

&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; else {

&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $("#txtUF").val(msg.d.estado)

&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $("#txtCidade").val(msg.d.cidade)

&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $("#txtBairro").val(msg.d.bairro)

&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $("#txtLogradouro").val(msg.d.logradouro)

&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }



&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; },

&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; error: function (msg) {

&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; alert("Falha ao carregar o CEP.\n Erro: " + msg);

&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }

&nbsp; &nbsp; &nbsp; &nbsp; });



&nbsp; &nbsp; }




E é só isso. Como podemos ver é muito simples consumir um WS usando JQuery.&nbsp;



O código completo do projeto usado neste exemplo pode ser obtido aqui.