[Resolvido] Usando jQuery com ASP .NET

RSS iMasters · Julho 23, 2011

A jQuery é a biblioteca JavaScript mais usada em aplicações web atualmente. Ela foi desenvolvida em 2006 por John Resig e é suportada por uma comunidade de desenvolvedores além do time do projeto jQuery. Ela foi construída para ser leve e ser usada nos principais navegadores, além de ser compatível com a especificação CSS3.

A jQuery simplifica a maneira de como acessar os elementos DOM tornando mais fácil a navegação pelas páginas. A biblioteca possui poderosos recursos Ajax, manipulação de eventos e efeitos de animação, permitindo um rápido desenvolvimento de aplicações web. Além disso, permite também a criação de plugins que possibilita aos desenvolvedores criar recursos poderosos com base no núcleo jQuery.

Obs.: O DOM é uma especificação do consórcio W3C que não depende de plataforma ou de linguagem. Ele é usado para fazer alterações em documentos HTML e XML, sendo uma API muito usada para este fim.

Por tudo isso você não pode ignorar a jQuery. Ela permite utilizar muitos recursos em suas aplicações web tornando-a mais interativa e amigável ao usuário.

Já apresentei a jQuery no artigo - ASP .NET - Apresentando JQuery, e se você nunca ouviu falar ou nunca usou, sugiro que você o leia!

Atualmente o jQuery esta na versão 1.6.1 e você pode baixá-la aqui e esta disponível também tanto no Visual Studio como as versões Express quando você cria uma aplicação web usando o template padrão (não o vazio).

A JQuery esta incluída tanto nos projetos ASP .NET Web Forms como nos projetos ASP .NET MVC. A library Microsoft Ajax foi projetada para atrair desenvolvedores JQuery e você pode mesclar plug-ins JQuery e controles de cliente Microsoft Ajax em sua aplicação.

Veremos como utilizar jQuery em páginas ASP .NET, para realizar algumas tarefas do dia a dia envolvendo controles ASP .NET.

Recursos usados nos exemplos do artigo:

Visual Web Developer 2010 Express Edition
jquery-1.4.1.min.js que já vem embutida com o projeto ASP .NET Web Application;
Navegadores: Internet Explorer 8.0, FireFox 3.6 e Chrome 9.0;

Usando jQuery na prática

1 - Criando o projeto

Abra o Visual Web Developer 2010 Express Edition e no menu File-> New Project crie um novo projeto usando a linguagem Visual Basic e o template ASP .NET Web Application com o nome UsandojQuery e clique no botão OK.

Após criar o projeto, se você observar a janela Solution Explorer, verá na estrutura do projeto a pasta Script a biblioteca jQuery (jquery-1.4.1.min.js):

De forma geral nas páginas .aspx dos nosso exemplos poderemos distinguir 3 seções:

A declaração da biblioteca jQuery que iremos usar (tag <script src="Scripts/jquery-1.4.1.js" ...> (Estamos usando a biblioteca jQuery localmente na pasta Scripts);
A declaração do código jQuery entre as tags <script type="text/javascript">;
A declaração do estilo CSS usado na página na tag <style type="text/css">;

Para cada uma das tarefas que iremos realizar criaremos uma página .aspx no projeto, da seguinte forma:

No menu Project -> Add New Item e selecione o template Web Form;
Informe o nome da página e clique no botão Add;

Obs.: Se você estiver usando o VS 2008 deverá ter aplicado o Service Pack 1 e a correção KB958502 para poder habilitar o intellisense do jQuery.

2 - Incluindo um texto padrão em um controle TextBox

Crie um novo web form chamado Exemplo1.aspx

Inclua um controle TextBox e um controle Button no formulário conforme o leiaute abaixo:

<p>Macoratti.net</p>

<p><asp:TextBox ID="TextBox1" width="200px" CssClass="defaultText"

ToolTip="Informe seu critério de busca" runat="server"></asp:TextBox>

<asp:Button ID="btnSubmeter" Text="Procurar" runat="server" /></p>

</fieldset>

</div>

</form>O tag <fieldset> é usada para agrupar logicamente elementos em um formulário. Esta tag desenha uma caixa em torno dos elementos relacionados do formulário.

Observe que o controle TextBox possui a propriedade CssClass definida com o nome defaultText; vamos definir então o script de estilo conforme abaixo:

.defaultText

{

font-style:italic;

color:#CCCCCC;

}

</style>Agora vamos definir o script jQuery para exibir o texto - Informe seu critério de busca - mesmo quando a caixa de texto não tem o foco. A seguir, temos o código necessário para isso:

$(document).ready(function () {

var caixaTextoProcurar = $('#<%=TextBox1.ClientID%>');

caixaTextoProcurar.focus(

function () {

if (caixaTextoProcurar.val() == this.title) {

caixaTextoProcurar.removeClass("defaultText");

caixaTextoProcurar.val("");

}

});

caixaTextoProcurar.blur(

function () {

if (caixaTextoProcurar.val() == "") {

caixaTextoProcurar.addClass("defaultText");

caixaTextoProcurar.val(this.title);

}

});

caixaTextoProcurar.blur();

});

</script>

a função document.ready() retorna o controle TextBox usando o seu ClientID e o salva na variável local caixaTextoProcurar:

var caixaTextoProcurar = $('#<%=TextBox1.ClientID%>');

no evento focus verificamos se a variável contém o texto padrão : caixaTextoProcurar.val() == this.title

Obs.: A propriedade ToolTip do controle TextBox é renderizado como title em tempo de execução, assim, o texto de ToolTip e

retornado usando o title.

em caso positivo removemos o estilo usado: caixaTextoProcurar.removeClass("defaultText");

e limpamos o seu conteúdo:caixaTextoProcurar.val("");

no evento blur verificamos se o TextBox esta vazio :if (caixaTextoProcurar.val() == "")

se estiver vazio anexamos o estilo : caixaTextoProcurar.addClass("defaultText");

e incluimos o texto padrão : caixaTextoProcurar.val(this.title);

chama o evento blur na carga da página de forma que o TextBox é inicializado quando perder o foco: caixaTextoProcurar.blur();

Executando o projeto teremos o resultado exibido pela figura abaixo:

O código completo do formulário é exibido a seguir:

<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="Exemplo1.aspx.vb" Inherits="UsandojQuery.Exemplo1" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<title>jQuery - Exemplo1

</title>

$(document).ready(function () {

var caixaTextoProcurar = $('#<%=TextBox1.ClientID%>');

caixaTextoProcurar.focus(

function () {

if (caixaTextoProcurar.val() == this.title) {

caixaTextoProcurar.removeClass("defaultText");

caixaTextoProcurar.val("");

}

});

caixaTextoProcurar.blur(

function () {

if (caixaTextoProcurar.val() == "") {

caixaTextoProcurar.addClass("defaultText");

caixaTextoProcurar.val(this.title);

}

});

caixaTextoProcurar.blur();

});

</script>

.defaultText

{

font-style:italic;

color:#CCCCCC;

}

</style>

</head>

<body>

<p>www.macoratti.net</p>

<asp:Button ID="btnSubmeter" Text="Procurar" runat="server" /></p>

</fieldset>

</div>

</form>

</body>

</html>

3 - Realizando a validação em um formulário de login (usando um plugin jQuery)

Vamos realizar a validação de um formulário de login bem simples. Para este nosso exemplo vamos validar os campos login e senha da seguinta forma:

Os campos login e senha são obrigatórios;
O campo senha deverá ter no mínimo 8 digitos;

A jQuery vem com vários plugins para usar uma funcionalidade adicional para a biblioteca de base. Para manusear a questão da validação, o plugin de validação jQuery é muito útil e proporciona uma rica coleção de propriedades e métodos para o uso.

Vamos usar o plugin para validação que pode ser obtido aqui. Após fazer o download do arquivo descompacte-o para uma pasta e inclua o arquivo jquery.validate.js na pasta Scripts do projeto.

Para habilitar o plugin de validação no nosso formulário podemos simplesmente arrastar e soltar o plugin no formulário. Após isso será criado de forma automática o seguinte código na página ASPX:

<scriptsrc="Scripts/jquery.validate.js" type="text/javascript" ></script>Para validar um formulário web utilizando o plugin, aplicamos o método a seguir sobre o elemento do formulário:

validate([options])Abaixo temos algumas das opções que podemos usar com validate:

rules: Constituído por pares chave/valor. A chave é o nome do elemento, enquanto o valor é a regra de validação para ser aplicado ao elemento;
messages: Consiste em pares chave/valor. A chave é o nome do elemento, enquanto o valor é a mensagem personalizada para ser exibida se a validação falhar por esse elemento;
errorLabelContainer: Esta é a área atual do recipiente dentro do qual as mensagens de erro são exibidas;
errorContainer: Esta é a área de conteúdo principal que contém o errorLabelContainer;
wrapper: Envolve as mensagens de erro no elemento necessário e é usado em conjunto com errorLabelContainer;
onsubmit: Valida o formulário ao enviar. Pode ser definido como false para validar outros eventos;
highlight : Esta opção especifica como realçar os campos inválidos;
unhighlight: Esta opção reverte as alterações feitas pela opção highlight;

Agora crie um novo web form chamado Exemplo2.aspx Depois inclua dois controles TextBox e dois controles Button no formulário conforme o leiaute logo abaixo. E inclua uma área <div> abaixo dos controles de login onde serão exibidas as mensagens de erro: <div align="center" class="alertmsg"></div>

<p>www.macoratti.net</p>

<tr><td colspan="2" class="header">LOGIN</td></tr>

<tr>

<asp:Label ID="lblLogin" runat="server" Text="Login: "></asp:Label>

</td>

<asp:TextBox ID="txtLogin" runat="server"></asp:TextBox>

</td>

</tr>

<tr>

<asp:Label ID="lblSenha" runat="server" Text="Senha: "></asp:Label>

</td>

<asp:TextBox ID="txtSenha" runat="server" TextMode="Password"></asp:TextBox>

</td>

</tr>

<tr>

<asp:Button ID="btnSubmeter" runat="server" Text="Submeter"/>

<asp:Button ID="btnResetar" runat="server" Text="Resetar" />

</td>

</tr>

</table>

</fieldset>

<br />

</div>

</form>Vamos definir também o seguinte script para o estilo usado no formulário:

.header

{

background-color:Gray;

font-weight:bold;

color:White;

text-align:center;

}

.alertmsg

{

color:#FF0000;

}

</style>A seguir vamos definir o script jQuery , incluindo as declarações para usar a biblioteca jQuery e o plugin de validação, conforme abaixo:

$(document).ready(function () {

var validator = $("#form1").validate({

rules: {

txtLogin: "required",

txtSenha: { required: true, minlength: 8 }

}

,

messages: {

txtLogin: "Informe o seu login",

txtSenha: { required: "Informe a sua senha",

minlength: "A senha deverá possuir no mínimo 8 digitos"

}

},

wrapper: 'li',

errorLabelContainer: $("#form1 div.alertmsg")

});

$("#btnReset").click(function (e) {

e.preventDefault();

$("#txtLogin").val("");

$("#txtSenha").val("");

});

</script>

Na função document.ready chamamos a função validate: var validator = $("#form1").validate
Incluimos a opção rules: definimos o login e senha como obrigatório e a senha com o mínimo de 8 caracteres: txtLogin: "required",txtSenha: { required: true, minlength: 8 }
Incluimos a opção messages : onde definimos as mensagens a serem exibidas ao usuário: txtLogin: "Informe o seu login", txtSenha: { required: "Informe a sua senha", minlength: "A senha deverá possuir no mínimo 8 digitos"}
Definimos a opção wrapper : onde definimos que as labels de erros devem ser exibidas em um elemento ListItem : wrapper: 'li',
Definimos o errorLabelContainer onde as etiquetas de erro serão exibidas quando a validação falhar: errorLabelContainer: $("#form1 div.alertmsg")
No evento Click do botão Resetar limpamos os campos do formulário: $("#btnReset").click(function (e) { e.preventDefault(); $("#txtLogin").val(""); $("#txtSenha").val("");});

Executando este formulário iremos obter:

O código completo do formulário pode ser visto a seguir:

<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="Exemplo2.aspx.vb" Inherits="UsandojQuery.Exemplo2" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<title>jQuery - Exemplo 2</title>

$(document).ready(function () {

var validator = $("#form1").validate({

rules: {

txtLogin: "required",

txtSenha: { required: true, minlength: 8 }

}

,

messages: {

txtLogin: "Informe o seu login",

txtSenha: { required: "Informe a sua senha",

minlength: "A senha deverá possuir no mínimo 8 digitos"

}

},

wrapper: 'li',

errorLabelContainer: $("#form1 div.alertmsg")

});

$("#btnReset").click(function (e) {

e.preventDefault();

$("#txtLogin").val("");

$("#txtSenha").val("");

});

</script>

.header

{

background-color:Gray;

font-weight:bold;

color:White;

text-align:center;

}

.alertmsg

{

color:#FF0000;

}

</style>

</head>

<body>

<p>www.macoratti.net</p>

<tr><td colspan="2" class="header">LOGIN</td></tr>

<tr>

<asp:Label ID="lblLogin" runat="server" Text="Login: "></asp:Label>

</td>

<asp:TextBox ID="txtLogin" runat="server"></asp:TextBox>

</td>

</tr>

<tr>

<asp:Label ID="lblSenha" runat="server" Text="Senha: "></asp:Label>

</td>

<asp:TextBox ID="txtSenha" runat="server" TextMode="Password"></asp:TextBox>

</td>

</tr>

<tr>

<asp:Button ID="btnSubmeter" runat="server" Text="Submeter"/>

<asp:Button ID="btnResetar" runat="server" Text="Resetar" />

</td>

</tr>

</table>

</fieldset>

<br />

</div>

</form>

</body>

</html>Pronto! É simples usar os recursos do jQuery para realizar tarefas simples em páginas ASP .NET e também para usar um plugin de validação.

Pegue o projeto completo aqui.

Até a próxima!

http://imasters.com.br/artigo/21535/jquery/usando-jquery-com-asp-net

Entrar

Arquivado

[Resolvido] Usando jQuery com ASP .NET

Recommended Posts

RSS iMasters 5

Compartilhar este post

Link para o post

Compartilhar em outros sites

PHP+Codeigniter - Adicionar Registro Plano de Contas

Javascript - Passar Parâmetros para uma Função.

PHP - Consulta MySql para prazo de dias

Este projeto é apoiado pelas empresas

Fóruns

Tempo Real

Informação importante