Validação assíncrona com JQUERY e Asp.Net Handler

   Em nosso dia-a-dia sempre precisamos validar alguma informação antes de gravar no banco de dados, em alguns casos se a validação for assíncrona melhora e muito a experiência do usuário, evitando que o mesmo tenha que preencher todos os campos para só aí ver que preencheu alguma informação que não segue a regra de negócio.
   Neste exemplo vou fazer a verificação se o CPF do usuário já está cadastrado, ou seja, a regra é um cadastro por CPF.
   Foi utilizada a função $.ajax do JQuery, no evento blur() de uma caixa de texto, ou seja, quando o usuário preencher o CPF e sair do campo (o campo perder o foco) o $.ajax será acionado e chamará o Handler (Generic handler) para verificar se o CPF já está cadastrado.

JQUERY
$(function()
{
$("#<%=btnSalvar.ClientID %>").attr('disabled','true');

$.ajax({
             url: "ValidationHandler.ashx",
             data: {tipo:'cpf',
             documento:$("#<%=txtCPF.ClientID %>").val()
             },
             success: function(data) {
                                      if(data=='False')
                                     {
                                            $("#<%=btnSalvar.ClientID %>").removeAttr('disabled');                                       
                                    }      
                                    else
                                     {
                                            alert('CPF já cadastrado!');                                         
                                        }                                      
                          },
                error: function(a, b, c) {
                                        alert("Ocorreu um problema ao validar o documento. Tente novamente!");                                     
                                    }
                   });
});


   Ao carregar a tela o botão salvar é desabilitado.
   O Handler ValidationHandler.ashx é a URL que será acionada pelo $.ajax e no parâmetro "data", informamos dois parâmetros: "tipo=cpf" (este handler usado no exemplo está preparado para validar vários tipos de documentos por isso a necessidade deste parâmetro) e documento (o número digitado pelo usuário).
   Na função success do $.ajax, é verificado se o retorno é "True" ou "False", se for "True" o CPF não está cadastrado então o botão salvar é habilitado, se for "False" o CPF já está cadastrado então é exibido um alerta para o usuário e o botão permanece desabilitado.

ValidationHandler.ashx

 public void ProcessRequest (HttpContext context) {
        String tipo = context.Request.Params["tipo"];
        String documento = context.Request.Params["documento"];
        if (!String.IsNullOrEmpty(documento))
        {
            if (tipo == "cpf")
            {
               context.Response.Write(Negocio.Exists(documento,tipo).ToString());
            }
            else if (tipo == "cnpj")
            {
               context.Response.Write(Negocio.Exists(documento,tipo).ToString());
            }
        }
    }

   No método ProcessRequest do ValidationHandler são recuperados os parâmetros enviados pela requisição do $.ajax e se o tipo for CPF é chamado o método "Exists()", que é responsável por ir até o banco e dados e verificar se o CPF já está cadastrado. Se o CPF estiver cadastrado o método "Exists()" retornará o booleano False que convertemos para string "False", caso contrário retornará True que também é convertido para string "True".

Referências
Jquery: http://api.jquery.com/jQuery.ajax/
Asp.net Generic Handler: http://www.dotnetperls.com/ashx

Tab ao teclar ENTER ASP.net JQuery

Ao inserir  dados em um formulário web extenso, os usuários preferem utilizar a tecla ENTER ao invés da tecla TAB para ir para o próximo campo. Veremos aqui como conseguir este efeito com JQuery.

1. Adicione um novo formulário em sua WebApplication ou  em seu Website;
2. Adicione alguns controles Textbox para simularmos um cadastro de usuário, conforme abaixo:

    <form id="form1" runat="server">
       <div align="center">
         <fieldset style="width:400px;height:200px;">
          <table cellpadding="3" cellspacing="3" border="0">
            <tr><td>
                  <asp:Label ID="lblName" Text="Name: " runat="server"></
                  asp:Label></td>
                  <td><asp:TextBox ID="txtName" Width="200px" runat="server"></
                   asp:TextBox></td></tr>
                  <tr><td><asp:Label ID="lblAddress" Text="Address: "
                   runat="server"></asp:Label></td>
                  <td><asp:TextBox ID="txtAddress" Width="200px"
                  runat="server"></asp:TextBox></td></tr>
                  <tr><td><asp:Label ID="lblContact" Text="Contact Number: "
                   runat="server"></asp:Label></td>
                  <td><asp:TextBox ID="txtContact" Width="200px"
                  runat="server"></asp:TextBox></td></tr>
                  <tr><td><asp:Label ID="lblEmail" Text="Email: "
                  runat="server"></asp:Label></td>
                  <td><asp:TextBox ID="txtEmail" Width="200px" runat="server"></
                  asp:TextBox></td></tr>
                  <tr><td></td><td><asp:Button ID="btnSubmit" Text="SUBMIT"
                 runat="server" />
                <asp:Button ID="btnReset" Text="RESET" runat="server" />
                </td></tr>
         </table>
       </fieldset>
      </div>
    </form>

Vamos ao JQuery

1.  Na função document.ready() do JQuery, insira o seguinte seletor $('input:text:first'), este seletor vai recuperar o primeiro elemento do tipo 'text' do seu form;
2. Coloque $('input:text:first').focus(), para setar o focu no primeiro textbox do seu form;
3. Use o bind para registrar o handler do evento "keydown" em todos os textboxes do form: $('input:text').bind("keydown", function(e) {
4. Verifique se a tecla ENTER foi pressionada: if (e.which == 13) {
5. Se o ENTER foi pressionado previne o evento padrão, que seria o submit do form:  e.preventDefault();
6. Incremente o índice do textbox corrente e recupere o índice do próximo textbox: var nextIndex = $('input:text').index(this) + 1;
7. Coloque o focu no próximo textbox:  $('input:text')[nextIndex].focus();
   }
   });
8. Adicione a função do evento click do botão para limpar o formulário:                     $('#btnReset').click(
   function() {
   $('form')[0].reset();
   });
9. Código JQuery completo                                                                                                                     <script type="text/javascript">
      $(document).ready(function() {
              $('input:text:first').focus();
              $('input:text').bind("keydown", function(e) {
              if (e.which == 13) { //tecla enter keycode =13
                   e.preventDefault(); //nao executa evento padrao
                   var nextIndex = $('input:text').index(this) + 1;
                   $('input:text')[nextIndex].focus();
              }
            });
        $('#btnReset').click(
        function() {
              $('form')[0].reset();
      });
   });
   </script>

Referências :

• ASP.NET JQuery CookBook
• www.jquery.com

Requisição assíncrona com JQUERY e WebMethod

      Nossa aplicação será bem simples, ela calculará a idade com base na data informado, porém este cálculo será feito assincronamente, utlizando um WebMethod sendo acionado por JQUERY.

      Para o exemplo precisaremos apenas do Visual Studio 2010;

Será usada a linguagem C# com ASP.NET.

Crie um novo projeto no Visual studio do tipo Web Application.

Preencha o nome do seu projeto, no exemplo utilizei o nome “TesteJQueryWebMethod”;

 Após clicar em “OK”, o Visual Studio criará a seguinte estrutura para seu projeto:

 

     Observe na pasta Scripts que o Visual Studio já traz para você os arquivos necessários para trabalhar com JQuery.

     Para nosso exemplo vamos utilizar a página Default.aspx já criada pelo Visual Studio.

Substitua o código da HTML/ ASPX da CONTENT chamado “BodyContent” seguinte trecho:

 

     Note que nos controles ASP.NET que serão usados no JQUERY estou usando a nova propriedade do .NET Framework 4.0, que é o  clientIDMode no exemplo defini como “Static”, para que nossos controles fiquem com os ids inalterados no cliente, para facilitar a manipulação com o JQUERY.

Seu layout ficará assim conforme a figura abaixo:

 

     Até aqui sem muitas novidades agora começamos vamos partir para a criação do nosso WebMethod.

No CodeBehind da página Default.aspx crie o seguinte método.

Note o atributo [WebMethod], apenas colocando este atributo já tornamos nosso método um WebMethod.

Finalmente vamos para o código JQUERY para chamada de nosso WebMethod.

No Content chamado “HeaderContent” coloque o seguinte trecho:

 

    JQUERY nada mais é do que uma biblioteca javascript, por isso deve rodar dentro das TAGs script.

    Na primeira linha de nosso JQUERY, usamos o método ready do document, para registrar o evento click de nosso botão, somente quando o documento estiver “pronto” do lado do cliente.

    Na segunda linha utilizamos o operador “$” para recuperar o controle de nome “btnCalcular”e registramos seu evento “click”.

    No evento “click”  temos logo na primeira linha a chamada para event.preventDefault, esta chamada serve para impedir o comportamento default do evento “click” do botão, que seria realizar um POST na página.

Para chamada de nosso WebMetodo utilizamos a função JQUERY, “$.ajax()”, que serve para realizar uma requisição assíncrona dada uma URL.

Entre os vários parâmetros possíveis na função “$.ajax()”, os principais que utilizamos foram:

1.  URL:  ao invés de se ter uma URL apontando para uma página, estamos apontando para um método, ou melhor para um WebMethod;

2.  Data: usado para enviar os parâmetros necessários na assinatura de nosso WebMethod.(Trabalhar somente com parâmetros do tipo string)

3.  Type: tipo do verbo HTTP(GET ou POST);

4.  Success: se a execução de nosso método for bem sucedida o processamento retorna para a função que está no parâmetro success. É neste parâmetro que podemos trabalhar com o retorno de nosso método;

5.  Error: como o próprio nome diz, a função presente em error, será executada caso ocorra algum erro.

Chegamos ao final, foi um exemplo bem simples, mas espero que sirva de base para necessidades mais compexas.

Até breve.

Referências:

         JQuery Ajax