Apaixonado por tecnologia. Trabalho com tecnologia desde 2003.

Saiba mais sobre minha vida profissional aqui .

Fale comigo.
Siga-me no Twitter
Ultimos comentários
Calendário de Posts
<<  julho 2017  >>
stqqssd
262728293012
3456789
10111213141516
17181920212223
24252627282930
31123456

Siga o @DicaDoNerd no Twitter e acompanhe as novidades


Que Jquery é uma bibliocate que facilita muito a vida do programador, isso ninguém duvida, mas, uma coisa que as vezes temos problemas e entender os plugins que são criados. Quando entendemos colocamos a mão na cabeça e dizemos “Como sou burro, era só isso!”… Sempre que tenho um problema que não consigo resolver a primeira coisa é pesquisar no Google mas como não gosto simplesmente do “Copy and Paste”, fico tentando entender bibliotecas, refatorando dll’s, estudando alguns frameworks, então, lá vai mais uma dica.

Vou utilizar neste exemplo o plugin masked input.

Existe uma forma bem simples de criar, basta criar um estilo (css) para seu Input (asp:TextBox)

.campoFormData {font-family: Arial, Helvetica, sans-serif;font-size: 12px;font-weight: normal;color: #FFFFFF;text-decoration: none;background-color: #666666;border: 0px solid #666666;}
.campoFormCEP {font-family: Arial, Helvetica, sans-serif;font-size: 12px;font-weight: normal;color: #FFFFFF;text-decoration: none;background-color: #666666;border: 0px solid #666666;}
.campoFormTel {font-family: Arial, Helvetica, sans-serif;font-size: 12px;font-weight: normal;color: #FFFFFF;text-decoration: none;background-color: #666666;border: 0px solid #666666;}
.campoFormDDD {font-family: Arial, Helvetica, sans-serif;font-size: 12px;font-weight: normal;color: #FFFFFF;text-decoration: none;background-color: #666666;border: 0px solid #666666;}
.campoFormCPF {font-family: Arial, Helvetica, sans-serif;font-size: 12px;font-weight: normal;color: #FFFFFF;text-decoration: none;background-color: #666666;border: 0px solid #666666;}
.campoFormCNPJ {font-family: Arial, Helvetica, sans-serif;font-size: 12px;font-weight: normal;color: #FFFFFF;text-decoration: none;background-color: #666666;border: 0px solid #666666;}
.campoFormD2 {font-family: Arial, Helvetica, sans-serif;font-size: 12px;font-weight: normal;color: #FFFFFF;text-decoration: none;background-color: #666666;border: 0px solid #666666;}

Criamos classes para cada Tipo de formatação (vale lembrar que isso será utilizado no Selector ($) do Jquery).

Feito isso, vamos para o HTML.

<asp:TextBox ID="txtCPF" runat="server" MaxLength="15" CssClass="campoFormCPF"  />
<asp:TextBox ID="txtCEP" runat="server" CssClass="campoFormCEP" MaxLength="9" />
<asp:TextBox ID="txtTelefone" runat="server" MaxLength="10" CssClass="campoFormTel" />
<asp:TextBox ID="txtCelularDDD" runat="server" MaxLength="2" CssClass="campoFormDDD" Width="20px" />
<asp:TextBox ID="txtCelular" runat="server" MaxLength="10" CssClass="campoFormTel" />

Agora vamos referenciar a biblioteca do Jquery.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script src="http://cloud.github.com/downloads/digitalBush/jquery.maskedinput/jquery.maskedinput-1.3.min.js">
</script>

Apenas lembrando para quem utiliza o Visual Studio 2010 (Framework 4.0) é possível habilitar a biblioteca do Jquery (sem precisar fazer a referência do script) habilitando a propriedade EnableCdn (Content Delivery Network). Neste link você encontra algumas dicas bem bacanas sobre algumas novidades e aqui você encontra as bibliotecas disponíveis no Cdn.

<asp:ScriptManager ID="smMaster" runat="server" EnablePartialRendering="true" EnableCdn="true" />

Agora vamos criar o script que será responsável por executar o script.

function AtribuirMascaras() {

$(".campoFormD2").unmask();
$(".campoFormD2").mask("99");

$(".campoFormData").unmask();
$(".campoFormData").mask("99/99/9999");

$(".campoFormCEP").unmask();
$(".campoFormCEP").mask("99999-999");

$(".campoFormTel").unmask();
$(".campoFormTel").mask("9999-9999");

$(".campoFormDDD").unmask();
$(".campoFormDDD").mask("99");

$(".campoFormCPF").unmask();
$(".campoFormCPF").mask("999.999.999-99");

$(".campoFormCNPJ").unmask();
$(".campoFormCNPJ").mask("99.999.999/9999-99");

}

Com a função pronta, vamos executar:

<script type="text/javascript">
$(document).ready(function () {
AtribuirMascaras();
});
</script>

Um problema comum para quem utiliza este plugin (Mask) com UpdatePanel é ele se “perder” isso acontece, pelo fato de que foi enviada uma requisição para o servidor e o HTML retornado não tem mais o evento vinculado aos controles.

Postei há algum tempo uma forma bem simples de resolver este problema, basta fazer isso:

<script>
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(registraScript);

function registraScript(sender, args) {
AtribuirMascaras();
}


</script>

Isso faz com que ao final de cada requisição ao servidor o script seja registrado novamente.

Um constante problema ao utilizar algum script de qualquer Framework (Jquery, ExtJs) e colocarmos dentro de um UpdatePanel do ASP.NET o script simplesmente para de funcionar. Isso acontece pelo fato de como uma transação assíncrona ocorrida dentro do UpdatePanel transita apenas o pedaço de código para o servidor.

Existe uma forma bem simples de resolver este problema. Toda vez que é feita uma requisição o Script Mananger controla eventos como Inicio da Requisição (beginRequest), Carregamento do Página (PageLoad) e finalização da requisição (endRequest).

Basta “chamar” o script novamente que o problema estará resolvido. Isso acontece também, quando utilizado apenas um ScriptMananger na Master Page, você pode escolher se deseja controlar a requisição na Master Page ou se deseja controlar em Páginas (ASPX) separadamente.

Vamos lá!

<script>
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(registraScript);

function registraScript(sender, args) {
//Execute aqui seu script.
}


</script>


Resolvi escrever este post, pois, no analytics notei que muitas pessoas que chegam até o meu blog, estão com perguntas como: Update Panel + Jquery ou MasterPage Jquery…. estas são as campeãs de solicitação.

 

Não encontrou o que procurava?  Entre em contato. ;-)

Minato , Criado em 27/03/2010, 23:51

      Recetemente tive problemas ao tentar utilizar o JQuery no meu site pessoal. Inclui a referência do js do JQuery no .aspx, na master Page e nada de funcionar, depois de alguns testes notei a propriedade Path dentro de ScriptReference…. e taí, funcionou!!!…

      Ou seja, para funcionar corretamente, inclua o ScriptManager na sua página, na Tag Script, inclua no ScriptReference o local onde está localizado o js.

   1: <asp:ScriptManager runat="server" ID="ScriptMananger1"> 
   2:  
   3: <Scripts> 
   4:  
   5:            <asp:ScriptReference Path="js/jquery/jquery-1.3.2.js" /> 
   6:  
   7: </Scripts> 
   8:  
   9: </asp:ScriptManager>

Espero ter ajudado.

Minato 8-)

 
teste