Pesquisar CEP

<< Click to Display Table of Contents >>

Navigation:  ASP.NET > Dicas avançadas >

Pesquisar CEP

Previous pageReturn to chapter overviewNext page

Para pesquisar CEP é só implementar o código abaixo é todo com JS (visual é Bootstrap)

Nem precisa apertar o botão "Pesquisar" é quando o foco sair do campo CEP que é feita a pesquisa. o botão nem tem código é só para fazer a pessoa sair do campo.

 

cep

 

 

Fonte .aspx (não precisa implementar nada no .cs)

 

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

 

<!DOCTYPE html>

 

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

  <title>CEP</title>

  <meta name="viewport" content="width=device-width, initial-scale=1" />

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />

</head>

<body>

  <form id="form1" runat="server" class="form-horizontal">

      <div class="container" style="margin-top: 50px">

          <div class="row">

              <div class="well well-sm">

 

                  <div class="form-group">

                      <label class="col-md-1 control-label" for="edCep">CEP</label>

                      <div class="col-md-4">

                          <div class="input-group">

                              <asp:TextBox ID="edCep" runat="server" MaxLength="9" CssClass="form-control"></asp:TextBox>

                              <span class="input-group-btn">

                                  <button class="btn btn-default" type="button">Pesquisar</button>

                              </span>

                          </div>

                      </div>

                  </div>

 

                  <div class="form-group">

                      <label class="col-md-1 control-label" for="edRua">Rua</label>

                      <div class="col-md-4">

                          <asp:TextBox ID="edRua" runat="server" MaxLength="60" CssClass="form-control"></asp:TextBox>

                      </div>

                  </div>

 

                  <div class="form-group">

                      <label class="col-md-1 control-label" for="edBairro">Bairro</label>

                      <div class="col-md-4">

                          <asp:TextBox ID="edBairro" runat="server" MaxLength="60" CssClass="form-control"></asp:TextBox>

                      </div>

                  </div>

 

                  <div class="form-group">

                      <label class="col-md-1 control-label" for="edCidade">Cidade</label>

                      <div class="col-md-4">

                          <asp:TextBox ID="edCidade" runat="server" MaxLength="60" CssClass="form-control"></asp:TextBox>

                      </div>

                  </div>

 

                  <div class="form-group">

                      <label class="col-md-1 control-label" for="eUF">UF</label>

                      <div class="col-md-4">

                          <asp:TextBox ID="edUF" runat="server" MaxLength="2" CssClass="form-control"></asp:TextBox>

                      </div>

                  </div>

              </div>

          </div>

      </div>

  </form>

</body>

 

<script src="https://code.jquery.com/jquery-3.2.1.min.js"

  integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="

  crossorigin="anonymous"></script>

 

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

 

<script type="text/javascript">

 

   $(document).ready(function () {

 

      var edRua = document.getElementById('<%=edRua.ClientID%>');

      var edBairro = document.getElementById('<%=edBairro.ClientID%>');

      var edCidade = document.getElementById('<%=edCidade.ClientID%>');

      var edUF = document.getElementById('<%=edUF.ClientID%>');

 

      function limparCampos() {

           edRua.value = "";

           edBairro.value = "";

           edCidade.value = "";

           edUF.value = "";

       }

 

      <% // quando o campo cep perde o foco %>

       $('#<%=edCep.ClientID %>').blur(function () {

 

          <% // nova variável "cep" somente com dígitos. %>

          var cep = $(this).val().replace(/\D/g, '');

 

          <% // Verifica se campo cep possui valor informado. %>

          if (cep != "") {

 

              <% // Expressão regular para validar o CEP. %>

              var validacep = /^[0-9]{8}$/;

 

              <% //  valida o formato do CEP. %>

              if (validacep.test(cep)) {

 

                  <% // preenche os campos com "..." enquanto consulta webservice. %>

                   edRua.value = "...";

                   edBairro.value = "...";

                   edCidade.value = "...";

                   edUF.value = "...";

 

                  <% // consulta o webservice %>

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

 

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

                          <% //  atualiza os campos com os valores da consulta. %>

                           edRua.value = dados.logradouro;

                           edBairro.value = dados.bairro;

                           edCidade.value = dados.localidade;

                           edUF.value = dados.uf;

 

                       }

                      else {

                           limparCampos();

                           alert("CEP não encontrado.");

                       }

                   });

               }

              else {

                   limparCampos();

                   alert("Formato de CEP inválido.");

               }

           }

          else {

               limparCampos();

           }

       });

   });

</script>

 

</html>