jQuery com asp.net e MasterPage

Guilherme's profileGuilherme de Carvalho Ca...PhotosBlogListsMore

Tools

Help

< Previous Next >

July 03

jQuery com asp.net e MasterPage

Após alguns problemas com o Toolkit, não tenho nada a reclamar, percebi que precisava de um outro Framework para facilitar o trabalho com AJAX/JavaScript, então após dar uma navegada e ler alguns depoimentos decidi testar o jQuery[1], que realmente é muito lega e fácil de trabalhar, mas quando tentei integrar o jQuery na minha aplicação começaram os problemas e exetamente com o IE. Fui pesquisar novamente e encontrei o que pode ser a solução dos problemas para integrar jQuery+asp.net+MasterPage.

A primeira coisa que descobri foi justamente como gerenciar de forma correta o caminho para os scripts jQuery, pois como tenho a master page fazer a referência utilizando o <script type='text/javascript' src='~/jQuery/jquery.js'></script> gera um erro de referência ao arquivo, então a primeira solução foi trabalhar com o <ScriptManager> adicionando uma entrada chamada <Scripts> que aí dentro desta entrada eu posso chamar a referência ao scripts de forma transparente assim: <asp:ScriptReference Path="~/jQuery/jquery.js" /> trabalhando desta maneira a referência aos arquivos não gera dor de cabeça, o você poderá desfrutar de todas as funcionalidades do jQuery.
Ficando desta maneira o bloco do ScriptManager na MasterPage

<ScriptManager ...>
   <Scripts>
      <asp:ScriptReference Path="jQuery/jquery.js" />
   </Scripts>
</ScriptManager>

Um outro problema que encontrei foi como fazer a referência aos elementos que eu queria tratar com o jQuery, pois os elementos por estarem dentro de um ContentPlace a referência por nome fica um pouco complicada. Para isto eu trabalhei com o atributo Class para os elementos asp:TextBox e na função do jQuery a ligação com o elemento é feita assim:

$("input[class *= 'txtAutocompletar']").autocomplete(["a", "ab", "abc", "abcd", "abcde", "abcdef"], {
        width: 180,
        max: 5,
        highlight: false,
        multiple: false,
        scroll: true,
        scrollHeight: 300
});

O que estou fazendo aí é dizendo que qualquer elemento do tipo input que tenha o atributo class com um texto conteudo uma parte dele igual a txtAutocompletar (*=) executará esta função.

Vale salientar que a Microsft tem planos de integrar o jQuery ao Visual Studio, para a versão 2008 existe um rotfix[2] e um arquivo[3] para incluir o intellisense do jQuery.

Abraços a todos e bom trabalho

[1] http://jquery.com/
[2] http://code.msdn.microsoft.com/KB958502/Release/ProjectReleases.aspx?ReleaseId=1736
[3] http://code.google.com/p/jqueryjs/downloads/detail?name=jquery-1.3.2-vsdoc2.js

10:29 AM | Blog it | Computadores e Internet

Comments (1)

To add a comment, sign in with your Windows Live ID (if you use Hotmail, Messenger, or Xbox LIVE, you have a Windows Live ID). Sign in

Don't have a Windows Live ID? Sign up

fernando.dlcruzwrote:

Guilherme, vi neste post que você resolveu alguns problemas do JQuery com o Asp.Net. Eu estou com um problema com o plugin maskedinput. Configurei tudo certo, rodo a página e não tem erro de script, mas não acontece nada. Você saberia dizer o que estou fazendo de errado?

Coloquei a referência da libs no head da masterpage:

<asp:ScriptReference Path="~/scripts/jquery.js" />
<asp:ScriptReference Path="~/scripts/jquery.maskedinput-1.2.2.js" />

logo abaixo faço a chamada do masked:

<script type="text/javascript">
jQuery(function($){
$("input[class *= 'txtNumeroDocumento']").mask("99.999.999/9999-99");
});
</script>

e na página que herda a master, tenho o textbox:

<asp:TextBox ID="txtNumeroDocumento" runat="server" class="txtNumeroDocumento"></asp:TextBox></td>

Agradeço antecipadamente pela ajuda.
Fernando.

Oct. 14

Trackbacks

The trackback URL for this entry is:

http://guilhermedotnet.spaces.live.com/blog/cns!2ED92AF2FF4B7AC1!467.trak

Weblogs that reference this entry

None