quarta-feira, 9 de novembro de 2011

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

Nenhum comentário:

Postar um comentário