No início deste ano, escrevi um aplicativo que permitia ao usuário preencher um nome de usuário como parte do registro. Pensei em adicionar conforto ao formulário, fazendo uma validação não intrusiva do nome de usuário em relação ao provedor de associação ASP.NET. Meu objetivo era bem simples, ver se o nome de usuário estava disponível e deixar o usuário saber, mas não impedi-lo de continuar o formulário. Decidi usar jQuery e um HttpHandler simples.
A marcação para a linha de nome de usuário do formulário contém um rótulo e um campo de entrada para o nome de usuário a ser inserido. Ele também contém algumas tags Span, uma para o indicador de que o nome de usuário está sendo verificado (usernameLoading) e outra para indicar os resultados (usernameResult).
<
li
>
<
etiqueta
id
=”lblUserName”
para
=”txtUserName”
>
Usuário Nome:
label
>
<
input
id
=”txtUserName”
nome
=”txtUserName”
classe
=”preenchimento obrigatório”
tipo
=”texto”
maxlength
=”20″
valor
=”<%=UserName%>“
/> <
em
> <
img
src
=”images/required.png”
alt
=”obrigatório”
/>
em
>
<
span
id
=”usernameLoading”
>
<
img
src
=”imagens/indicador.gif”
alt
=”Indicador Ajax”
/>
span
>
<
span
id
=”usernameResult”
>
span
>
li
>
O jQuery para o processo atribui um manipulador de eventos ‘blur’ para o Campo txtUsername. Quando um usuário sai do campo, o manipulador de eventos de desfoque dispara. Uma definição de função é definida no manipulador que primeiro exibe o indicador giratório Ajax e, em seguida, posta o valor de txtuserName para o checkusername.ashx HttpHandler. O método post também define uma função para lidar com a resposta do manipulador que esmaece o resultado usernameResult Span se já estiver exibido. Em seguida, chama uma função personalizada 400 ms depois, finishAjax (…).
function
() {$ (
‘#usernameLoading’
).hide (); $ (
‘#txtUserName’
).blur (
função
() {$ (
‘#usernameLoading’
).show (); $.post (
“checkusername.ashx”
, {username: $ (
‘#txtUserName’
).val ()},
função
(resposta) {$ (
‘#usernameResult’
).fadeOut (); setTimeout (
“finishAjax (‘usernameResult’,'”
+ escape (resposta) +
“‘)”
, 400);});
return
falso
;});
função
finishAjax (id, resposta) {$ (
‘#usernameLoading’
).hide (); $ (
‘#’
+ id).html (unescape (resposta)); $ (
‘#’
+ id).fadeIn ();}
//terminarAjax
A função finishAjax oculta a imagem de processamento Ajax, define o html do usernameResult Span e o desvanece.
O checkusername.ashx contém o código para ver se o nome de usuário está disponível. Você pode implementar qualquer tipo de bacalhau e você deseja que este método execute a validação do nome de usuário, senha ou qualquer outra coisa. Neste caso, ele simplesmente verifica se existe um usuário para o nome de usuário, se houver, ele retorna algum HTML para indicar que o nome do usuário não está disponível, caso contrário, ele os informa que está disponível.
Público
Sub
ProcessRequest (
ByVal
contexto
As
HttpContext)
Implementa
IHttpHandler.ProcessRequest context.Response.ContentType=
“text/plain”
Dim
mu
As
MembershipUser=Membership.GetUser (context.Request (
“username”
))
Se
Não
IsNothing (mu)
Então
context.Response.Write (
“
“color: # 0c0” “> Nome de usuário disponível
)
End
Se
context.Response.Flush () context.Response.
End
()
End
Sub
Quando o manipulador retorna o HTML resultante, o indicador de progresso é apagado e o resultado desaparece na visualização. Agora o usuário sabe que seu nome de usuário é válido e pode continuar com o formulário ou escolher um novo nome de usuário. Essa técnica pode ser usada para fazer praticamente qualquer tipo de validação do lado do cliente/lado do servidor sem impedir o progresso do usuário.