Asp.net + Ajax verify the user's implementation code

Source: Internet
Author: User

Requirement: perform an ajax Login

Main technical points: jquery ajax and blur events

When the user name input box loses focus, the blur event is triggered and an ajax request is made to obtain the result (true or false). If the request result is true, replace the image in the user name input box with "OK" and output text: Congratulations, this account can be registered; otherwise, it will be replaced with "no" and output text: the account already exists.

Source code:

Front-end:Copy codeThe Code is as follows: <% @ Page Language = "C #" MasterPageFile = "~ /Top_Down.master "AutoEventWireup =" true "CodeFile =" RegisterMember. aspx. cs "Inherits =" Member_RegisterMember "Title =" registered user "%>
<Asp: Content ID = "Content1" ContentPlaceHolderID = "head" Runat = "Server">
<Link href = "../Admin/css/template.css" rel = "stylesheet" type = "text/css"/>
<Link href = "../Admin/css/validationEngine.jquery.css" rel = "stylesheet" type = "text/css"/>
<Script src = "../Admin/scripts/jquery-1.7.1.min.js" type = "text/javascript"> </script>
<Script src = "../js/jquery. validationEngine. js" type = "text/javascript"> </script>
<Script src = "../Admin/scripts/isValid. js" type = "text/javascript"> </script>
<Script src = "../js/ages/jquery. validationEngine-zh_CN.js" type = "text/javascript"> </script>
<Script type = "text/javascript">
Var IsCheck = false;
$ (Function (){
// Binds form submission and fields to the validation engine
$ ("# Form1"). validationEngine ();
// Verify when the mouse loses focus
$ ("# TxtUserName"). blur (function (){
$. Ajax ({
Url: "Data/GetMemberInfo. ashx? Method = CheckExistUserName ",
Data: {"username": $ ("# txtUserName"). val ()},
Type: "post ",
Success: function (text ){
$ ("# TdUser"). empty (); // clear the content
Var item;
If (text = "True "){
Item = ' congratulations, you can register this account! ';
IsCheck = true;
}
Else
Item = ' sorry, this account has already been registered! ';
$ ("# TdUser"). append (item );
}
});
});
});
Function CheckForm1 ()
{
If (IsCheck)
{
Form1.submit ();
}
Else {
Alert ("verify User Name ");
}
}
</Script>
</Asp: Content>
<Asp: Content ID = "Content2" ContentPlaceHolderID = "ContentPlaceHolder1" Runat = "Server">
<Form id = "form1" action = "Data/GetMemberInfo. ashx? Method = SaveMemberInfo "method =" post ">
<Div class = "content">
<Div class = "left_side">
<Div class = "logo_bottom"> </div>
</Div>
<Div class = "right_side zhuce">
<Div class = "zhuce_title"> <p class = "hide"> registering a new user </p> </div>
<Div class = "zhuce_p">
<Table width = "578" class = "zc_table1">
<Tr>
<Td width = "93" class = "zc_tar"> User name: </td>
<Td width = "200" class = "zc_tal"> <input type = "text" class = "zc_input1 validate [required, custom [LoginName] text-input "name =" txtUserName "id =" txtUserName "/> <! -- LoginName -->
</Td>
<Td width = "269" class = "zc_font" id = "tdUser"> </td>
</Tr>
<Tr>
<Td class = "zc_tar"> password: </td>
<Td class = "zc_tal"> <input type = "password" class = "zc_input2 validate [required, custom [LoginPwd] text-input "id =" txtPwd "name =" txtPwd "/> </td>
<Td class = "zc_font"> </td>
</Tr>
<Tr>
<Td class = "zc_tar"> Confirm Password: </td>
<Td class = "zc_tal"> <input type = "password" class = "zc_input3 validate [required, equals [txtPwd] text-input"/> </td>
<Td class = "zc_font"> </td>
</Tr>
<Tr>
<Td class = "zc_tar"> E-mail: </td>
<Td class = "zc_tal"> <input type = "text" class = "zc_input4 validate [required, custom [email] text-input "name =" txtEmail "id =" txtEmail "/> </td>
<Td class = "zc_font"> </td>
</Tr>
<Tr>
<Td class = "zc_tar"> Verification Code: </td>
<Td class = "zc_tal" colspan = "2"> <input type = "text" class = "zc_input5" name = "txtCheckCode" id = "txtCheckCode"/> </td>
</Tr>
<Tr> <td> </tr>
<Tr>
<Td colspan = "3" align = "center"> <a href = "javascript: CheckForm1 ()"> </a> </td>
</Tr>
</Table>
</Div>
</Div>
</Div>
</Form>
</Asp: Content>

Background events:Copy codeThe Code is as follows: <% @ WebHandler Language = "C #" Class = "GetMemberInfo" %>
Using System;
Using System. Web;
Using Common;
Using czcraft. Model;
Using czcraft. BLL;
Using System. Web. SessionState;
Public class GetMemberInfo: IHttpHandler, IRequiresSessionState
{
//// Record logs
Private static readonly log4net. ILog logger = log4net. LogManager. GetLogger (System. Reflection. MethodBase. GetCurrentMethod (). DeclaringType );
Public void ProcessRequest (HttpContext context)
{
String methodName = context. Request ["method"];
If (! String. IsNullOrEmpty (methodName ))
CallMethod (methodName, context );
}
/// <Summary>
/// Call different methods based on business needs
/// </Summary>
/// <Param name = "Method"> Method </param>
/// <Param name = "context"> context </param>
Public void CallMethod (string Method, HttpContext context)
{
Switch (Method)
{
Case "CheckExistUserName ":
CheckExistUserName (context );
Break;
// Case "SearchMember ":
// SearchMember (context );
// Break;
Case "SaveMemberInfo ":
SaveMemberInfo (context );
Break;
// Case "RemoveMember ":
// RemoveMember (context );
// Break;
// Case "GetMember ":
// GetMember (context );
// Break;
Default:
Return;
}
}
/// <Summary>
/// Verify whether the account exists
/// </Summary>
/// <Param name = "context"> </param>
Public void CheckExistUserName (HttpContext context)
{
String username = context. Request ["username"];
If (Tools. IsValidInput (ref username, true ))
{
Context. Response. Write (new memberBLL (). CheckExistUserName (username ));
}
}
/// <Summary>
/// Save user information
/// </Summary>
/// <Param name = "context"> </param>
Public void SaveMemberInfo (HttpContext context)
{
Try
{
// Read the form
String txtUserName = context. Request ["txtUserName"];
String txtPwd = context. Request ["txtPwd"];
String txtEmail = context. Request ["txtEmail"];
String txtCheckCode = context. Request ["txtCheckCode"];
// Verification Code
If (! TxtCheckCode. Equals (context. Session ["checkcode"]. ToString ()))
{
Return;
}
// String SQL Injection Detection
If (Tools. IsValidInput (ref txtUserName, true) & Tools. IsValidInput (ref txtPwd, true) & Tools. IsValidInput (ref txtEmail, true ))
{
Member info = new member ();
Info. username = txtUserName;
Info. password = txtPwd;
Info. Email = txtEmail;
Info. states = "0 ";
If (new memberBLL (). AddNew (info)> 0)
{
SMTP smtp = new SMTP (info. Email );
String webpath = context. Request. Url. Scheme + ": //" + context. Request. Url. Authority + "/Default. aspx ";
Smtp. Activation (webpath, info. username); // send an Activation email
JScript. AlertAndRedirect ("Registered User successful !! "," ../Default. aspx ");
}
Else {
JScript. AlertAndRedirect ("User Registration failed! "," ../Default. aspx ");
}
}
}
Catch (Exception ex)
{
Logger. Error ("Error! ", Ex );
}
}
Public bool IsReusable {
Get {
Return false;
}
}
}

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.