|
<< Click to Display Table of Contents >> Pesquisar CEP |
  
|
|
<< Click to Display Table of Contents >> Pesquisar CEP |
|
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.
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>