..:: MX Studio Fóruns ::..: ASP.Net - Web Service Custom Validators com jQuery - ..:: MX Studio Fóruns ::..

Jump to content

Publicidade




Page 1 of 1
  • You cannot start a new topic
  • You cannot reply to this topic

ASP.Net - Web Service Custom Validators com jQuery

#1 User is offline   xanburzum 

  • Group: Administrador
  • Posts: 2374
  • Joined: 04-November 08

Posted 25 June 2012 - 06:16 PM

Validadores Personalizados no ASP.NET fornecem aos desenvolvedores uma maneira fácil de criar o validador que é adaptado exatamente às suas necessidades. Muitas vezes um validador personalizado é uma ótima solução. Imagine em uma ficha de inscrição e precisamos validar se o nome e endereço de e-mail são únicos com javascript. Vamos usar validadores customizados para isso, dentro de função do lado cliente usaremos jQuery para chamar o serviço de web que irá fazer a validação. O truque é trazer tudo junto e certificar-se que esta solução funciona com chamadas assíncronas. Deixe-me mostrar a você passo a passo.

1. Criar o serviço de validação Web
Realmente não há truques sobre o serviço web. Tudo o que você tem que lembrar é ter certeza de que as linhas que se seguem são uncommented:

// Para permitir que este serviço da Web a ser chamado pelo script, usando o ASP.NET AJAX, descomente a seguinte linha.

[System.Web.Script.Services.ScriptService]



Em seguida, adicione os métodos que a jQuery vai chamar para validar se o nome e email são únicos e, portanto, disponíveis:

[WebMethod]public bool IsUsernameAvailable(string username){ Thread.Sleep(1000); // para testes apenas return !username.StartsWith("a");}[WebMethod]public bool IsEmailAvailable(string email){ Thread.Sleep(1000); // para testes apenas return email.StartsWith("a");}

Isto é uma implementação fictícia é claro, uma coisa que vale notar é que o Sleep() na thread tem sido utilizado. Isso porque na validação da vida real como este vai exigir uma chamada para um banco de dados assim, inevitavelmente será lenta. Graças ao método Sleep () poedmos ter certeza de que a resposta não é instantânea e desta forma simular cenário da vida real.

2. Custom Validator

O código básico ASP.NET consiste em um campo onde os usuários digitaram o nome de usuário e iremos validar através de um validador personalizado para ele:

<asp:Label ID="lblUsername" runat="server" AssociatedControlID="txbUsername" Text="Username" /><asp:TextBox ID="txbUsername" runat="server"/><asp:CustomValidator ID="cuvUsernameAvailable"runat="server" ControlToValidate="txbUsername" Display="Dynamic" ClientValidationFunction="ValidateUsername" ErrorMessage="Username is not available!"/>

Como você pode ver esse validador personalizado requer a <a name="OLE_LINK504">função javascript ValidateUsername para validar nome de usuário.

3. Função Client Side

Dentro da função javascript que usamos jQuery para chamar o serviço de web e essa validação delegado caminho. Abaixo o jQuery:

ValidateUsernameWithWebService = function (username, successFunction) { $.ajax({ type: "POST", contentType: "application/json; charset=utf-8", url: "/Services/RegistrationDataValidationService.asmx/IsUsernameAvailable",data: "{'username':'" + username + "'}",dataType: "json", async: true, success: successFunction, error: function (result) { alert("Due to unexpected errors validation doesn't work");} });}

Alguns pontos importantes:

• A função espera dois parâmetros - username (string) e a função callback que será chamada depois de invocar o serviço web.

• A URL para o serviço web é /Services/RegistrationDataValidationService.asmx e o método que será invocado é IsUsernameAvailable

• O parâmetro async é definido como verdadeiro para toda chamada de forma assíncrona

E, finalmente, a função ValidateUsername que será chamada pelo validador:

// variável para manter resultado da última chamada de web servicevar UsernameValidationResult;// variável para manter informações sobre nome de usuário que foi validado na última chamadavar UsernameValidatorLastCheckValue;ValidateUsername = function (source, args) {// detectar validação desencadeada por submissão de formulário // evitar chamadas para serviço web em tal cenário, retornar o resultado anteriorif (UsernameValidatorLastCheckValue == args.Value) { args.IsValid = UsernameValidationResult;return; } // asyncde seleçãocom o serviçowebValidateUsernameWithWebService(args.Value, function (result) {// após 2linhas estãoaqui para garantir // no submit validador não irá chamar chamada para webservice // vai reutilizar os dados de uma chamada que foi acionado pelo evento onChangeUsernameValidationResult = result.d; UsernameValidatorLastCheckValue = args.Value;// próximas três linhas - informar validador sobre o resultado, atualizar exibirsource.isvalid = result.d; ValidatorUpdateDisplay(source); ValidatorUpdateIsValid(); });}

Esta parte parece ser um pouco confusa, perceba que a validação e, portanto, esta função será chamada depois de digitar o username (evento onChange) quando o usuário clicar no botão enviar.

No primeiro caso (evento onChange) não há problema em fazer a chamada assíncrona e obter resultados depois de um ou dois segundos. No entanto, em caso de envio do formulário não é uma opção. Também vale a pena notar que em caso de envio do formuláriodo nome de usuário digitado pelo usuário não mudar, ela já foi validado. Por isso, não faz sentido validá-lo novamente. E é por isso que no código acima mantemos os resultados da última validação no UsernameValidationResult e variáveis ​​UsernameValidatorLastCheckValue.

E assim finalizamos este artigo. Até mais e boa programação.


0

Share this topic:


Page 1 of 1
  • You cannot start a new topic
  • You cannot reply to this topic



Publicidade




2 User(s) are reading this topic
0 membro(s), 2 visitante(s) e 0 membros anônimo(s)