基于异步通信层的注册小程序

程序流程图如下：

首先创建一个RegUser类作为注册会员的业务逻辑(类视图见下图)：

RegUser.CS代码如下：

 

using  System;
using  System.Data;
using  System.Configuration;
using  System.Web;
using  System.Web.Security;
using  System.Web.UI;
using  System.Web.UI.WebControls;
using  System.Web.UI.WebControls.WebParts;
using  System.Web.UI.HtmlControls;

/**/ /// <summary>
/// RegUser 的摘要说明
/// </summary>
public   class  RegUser
... {
    /**//// <summary>
    /// 构造函数重载
    /// </summary>
    public RegUser()
    ...{
        //
        // TODO: 在此处添加构造函数逻辑
        //
    }
    //重载
    public RegUser(string userId,string account,string password,string sex,string telephone,string name,string email,string address)
    ...{
        M_UserId = userId;
        M_Account = account;
        M_Password = password;
        M_Sex = sex;
        M_Telephone = telephone;
        M_Name = name;
        M_Email = email;
        M_Address = address;
    }

    /**////私有字段与属性///
    //用户id
    private string M_UserId;
    /**//// <summary>
    /// 用户Id
    /// </summary>
    public string UserId
    ...{
        get
        ...{
            return M_UserId;
        }
        set
        ...{
            M_UserId = value;
        }
    }

    //帐号
    private string M_Account;
    /**//// <summary>
    /// 帐号
    /// </summary>
    public string Account
    ...{
        get
        ...{
            return M_Account;
        }
        set
        ...{
            M_Account = value;
        }
    }

    //密码
    private string M_Password;
    /**//// <summary>
    /// 密码
    /// </summary>
    public string Password
    ...{
        get
        ...{
           return M_Password;
        }
        set
        ...{
            M_Password = value;
        }
    }

    //性别
    private string M_Sex="男";
    /**//// <summary>
    /// 性别
    /// </summary>
    public string Sex
    ...{
        get
        ...{
            return M_Sex;
        }
        set
        ...{
            M_Sex = value;
        }
    }

    //电话
    private string M_Telephone;
    /**//// <summary>
    /// 电话
    /// </summary>
    public string Telephone
    ...{
        get
        ...{
            return M_Telephone;
        }
        set
        ...{
            M_Telephone = value;
        }
    }

    //姓名
    private string M_Name;
    /**//// <summary>
    /// 姓名
    /// </summary>
    public string Name
    ...{
        get
        ...{
            return M_Name;
        }
        set
        ...{
            M_Name = value;
        }
    }

    //E-Mail
    private string M_Email;
    /**//// <summary>
    /// E-mail
    /// </summary>
    public string Email
    ...{
        get
        ...{
            return M_Email;
        }
        set
        ...{
            M_Email = value;
        }
    }

    //地址
    private string M_Address;
    /**//// <summary>
    /// 地址
    /// </summary>
    public string Address
    ...{
        get
        ...{
            return M_Address;
        }
        set
        ...{
            M_Address = value;
        }
    }
}

 

Aspx页面代码如下：

<% @ Control Language = " C# "  AutoEventWireup = " true "  CodeFile = " UserRegister.ascx.cs "  Inherits = " UC_UserRegister "   %>
<!-- 样式表 -->
< link  type = " text/css "  href = " ../Css/StyleSheet.css "  rel = " Stylesheet "   />
< asp:ScriptManager ID = " ScriptManager1 "  runat = " server " >
< Scripts >
< asp:ScriptReference Assembly = " Microsoft.Web.Preview "  Name = " PreviewScript.js "   />
</ Scripts >
< Services >
< asp:ServiceReference Path = " ../WebService/UserReg.asmx "   />
</ Services >
</ asp:ScriptManager >
< script type = " text/javascript "  language = " javascript " >
// 验证用户名是否存在
function AccountText_Check(arg)
... {
    var Account=arg.value;
    UserReg.IsAccountExists(Account,IsAccountExists);
}
function IsAccountExists(result)
... {
    //如果帐号为空
    if(result=="E")
    ...{
        $get("AccountLabel").innerHTML="请填写帐号";
        //文本框样式
        $get("AccountText").className="reginput_error";
        //提示信息样式
        $get("AccountTipDiv").className="regdiv_error"; 
        $get("AccountLabel").className="regfont_error";      
    }
    else if(result=="N")
    ...{
        $get("AccountLabel").innerHTML="该帐号已经被注册";
         //文本框样式
        $get("AccountText").className="reginput_error";
        //提示信息样式
        $get("AccountTipDiv").className="regdiv_error"; 
        $get("AccountLabel").className="regfont_error";      
    }
    else
    ...{
        $get("AccountLabel").innerHTML="该帐号可以使用";
         //文本框样式
        $get("AccountText").className="reginput_right";
        //提示信息样式
        $get("AccountTipDiv").className="regdiv_right"; 
        $get("AccountLabel").className="regfont_right";      
    }
}
// 验证密码长度是否大于6位
function PswText_Check(arg)
... {
    //"密码"框值
    var Password=arg.value;
    //"密码确认"框值
    var RePassword=$get("RePswText").value;
    //如果密码未输入
    if(Password.length==0)
    ...{
        $get("PasswordLabel").innerHTML="请输入密码";
         //文本框样式
        $get("PswText").className="reginput_error";
        //提示信息样式
        $get("PasswordTipDiv").className="regdiv_error"; 
        $get("PasswordLabel").className="regfont_error";  
    }
    //如果密码长度小于6则显示错误提示
    else if(Password.length<=6)
    ...{
        $get("PasswordLabel").innerHTML="密码长度必须在6位以上";
         //文本框样式
        $get("PswText").className="reginput_error";
        //提示信息样式
        $get("PasswordTipDiv").className="regdiv_error"; 
        $get("PasswordLabel").className="regfont_error";  
    }
    else
    ...{
        $get("PasswordLabel").innerHTML="密码符合要求";
         //文本框样式
        $get("PswText").className="reginput_right";
        //提示信息样式
        $get("PasswordTipDiv").className="regdiv_right"; 
        $get("PasswordLabel").className="regfont_right";  
    }
    //两次输入密码是否保持一致
    if(RePassword!="" && RePassword!=Password)
    ...{
        $get("RePasswordLabel").innerHTML="两次输入的密码不一致";
         //文本框样式
        $get("PswText").className="reginput_error";
        //提示信息样式
        $get("RePasswordTipDiv").className="regdiv_error"; 
        $get("RePasswordLabel").className="regfont_error";  
    }
    
    
}
// 验证两次密码输入是否一致
function RePswText_Check(arg)
... {
    //"密码"框值
    var Password=$get("PswText").value;
    //"密码确认"框值
    var RePassword=arg.value;
    if(Password=="" && RePassword=="")
    ...{
        return;
    }
    //两次输入密码是否保持一致
    if(RePassword!=Password)
    ...{
        $get("RePasswordLabel").innerHTML="两次输入的密码不一致";
         //文本框样式
        $get("RePswText").className="reginput_error";
        //提示信息样式
        $get("RePasswordTipDiv").className="regdiv_error"; 
        $get("RePasswordLabel").className="regfont_error";  
    }
    else
    ...{
        $get("RePasswordLabel").innerHTML="两次输入密码一致";
         //文本框样式
        $get("RePswText").className="reginput_right";
        //提示信息样式
        $get("RePasswordTipDiv").className="regdiv_right"; 
        $get("RePasswordLabel").className="regfont_right";  
    }
    
}

// 注册
function RegisterUser()
... {
    //创建一个User类,对应服务端的RegUser业务逻辑
    var NewUser=new RegUser();
    alert("123");
    //帐号
    NewUser.Account=$get("AccountText").value;
    //密码
    NewUser.Password=$get("PswText").value;
    //性别
    NewUser.Sex="男";
    if($get("Radio2").checked)
    ...{
        NewUser.Sex="女";
    }
    //真实姓名
    NewUser.Name=$get("TrueNameText").value;
    //电话
    NewUser.Telephone=$get("TelText").value;
    //联系地址
    NewUser.Address=$get("AddText").value;
    //E-Mail
    NewUser.Email=$get("EMailText").value;
    //提交
    UserReg.RegUser(NewUser,UserRegResult);
}

function UserRegResult(result)
... {
    alert(result);
}
</ script >
< div >
< table id = " RegTable "  width = " 550px "  height = " 300px " >
     < tr >
         < td >
         < div  class = " regdiv " > 帐号： </ div >
         </ td >
         < td width = " 450px " >
         < div style = " float:left " >< input id = " AccountText "  type = " text "   class = " reginput "  onblur = " return AccountText_Check(this) " /></ div >
         < div id = " AccountTipDiv " >< label id = " AccountLabel "   class = " regfont_tip " >* 帐号必须填写 </ label ></ div >
         </ td >
     </ tr >
     < tr >
         < td >
         < div  class = " regdiv " > 密码： </ div >
         </ td >
         < td >
         < div style = "  float:left " >< input id = " PswText "  type = " text "   class = " reginput "  onblur = " return PswText_Check(this) " /></ div >
         < div id = " PasswordTipDiv " >< label id = " PasswordLabel "   class = " regfont_tip " >* 密码长度必须在6位以上 </ label ></ div >
         </ td >
     </ tr >
     < tr >
         < td >
         < div  class = " regdiv " > 密码确认： </ div >
         </ td >
         < td >
         < div style = "  float:left " >< input id = " RePswText "  type = " text "   class = " reginput "  onblur = " return RePswText_Check(this) " /></ div >
         < div id = " RePasswordTipDiv " >< label id = " RePasswordLabel "   class = " regfont_tip " >* 请再输一次密码 </ label ></ div >
         </ td >
     </ tr >
     < tr >
         < td >
         < div  class = " regdiv " >  性别： </ div >
         </ td >
         < td >
         < div style = "  float:left " >< input id = " Radio1 "  type = " radio "   checked = " checked "  name = " R1 "  title = " sex " />< font size = " 2px " > 男 </ font >< input id = " Radio2 "  type = " radio "  value = " 女 "  name = " R1 "  title = " sex "   />< font size = " 2px " > 女 </ font ></ div >
         </ td >
     </ tr >
     < tr  >
         < td >
        < div  class = " regdiv " >  真实姓名： </ div >
         </ td >
         < td >
         < div style = "  float:left " >< input id = " TrueNameText "  type = " text "   class = " reginput " /></ div >
         </ td >
     </ tr >
     < tr >
         < td >
         < div  class = " regdiv " > 电话： </ div >
         </ td >
         < td >
         < div style = "  float:left " >< input id = " TelText "  type = " text "   class = " reginput " /></ div >
         </ td >
     </ tr >
     < tr height = " 30px " >
         < td >
        < div  class = " regdiv " > 联系地址： </ div >
         </ td >
         < td >
         < div style = "  float:left " >< input id = " AddText "  type = " text "   class = " reginput " /></ div >
         </ td >
     </ tr >
    
     < tr height = " 30px " >
         < td >
         < div  class = " regdiv " > E - Mail： </ div >
         </ td >
         < td >
         < div style = "  float:left " >< input id = " EmailText "  type = " text "   class = " reginput " /></ div >
         </ td >
     </ tr >  
      < tr >
         < td colspan = " 2 " >
             < div style = " text-align:center " >< img src = " ../images/submit.gif "  onclick = " return RegisterUser() " />& nbsp; & nbsp; < img src = " ../images/reset.gif "  onclick = " return Reset() "   /></ div >
         </ td >
     </ tr >   
</ table >

<!-- 组件注册 -->
< script type = " text/xml-script " >
     < page >
         < components >
             < textbox id = " AccountText " >
                 < behaviors >
                     < clickBehavior >
                         < click >
                             < invokeMethodAction target = " AccountText "  method = " addCssClass " >
                             < parameters className = " reginput_click " />
                             </ invokeMethodAction >
                         </ click >
                     </ clickBehavior >
                 </ behaviors >
             </ textbox >
             < textbox id = " PswText " >
                 < behaviors >
                     < clickBehavior >
                         < click >
                             < invokeMethodAction target = " PswText "  method = " addCssClass " >
                             < parameters className = " reginput_click " />
                             </ invokeMethodAction >
                         </ click >
                     </ clickBehavior >
                 </ behaviors >
             </ textbox >
             < textbox id = " RePswText " >
                 < behaviors >
                     < clickBehavior >
                         < click >
                             < invokeMethodAction target = " RePswText "  method = " addCssClass " >
                             < parameters className = " reginput_click " />
                             </ invokeMethodAction >
                         </ click >
                     </ clickBehavior >
                 </ behaviors >
             </ textbox >
         </ components >
     </ page >
</ script >
</ div >

 

 WebService代码如下：

注：本程序的WebService文件路径为../WebService/UserReg.asmx,如果路径不匹配，修改Aspx页面中ScriptManager中的Web Services代理中Path属性(如下)：

<Services>
<asp:ServiceReference Path="../WebService/UserReg.asmx" />
</Services>

<% @ WebService Language = " C# "  Class = " UserReg "   %>

using  System;
using  System.Web;
using  System.Web.Services;
using  System.Web.Services.Protocols;
using  System.Data;
using  System.Data.SqlClient;

[WebService(Namespace  =   " http://tempuri.org/ " )]
[WebServiceBinding(ConformsTo  =  WsiProfiles.BasicProfile1_1)]
[System.Web.Script.Services.ScriptService]
public   class  UserReg  : System.Web.Services.WebService  ... {

    
    //数据库链接字符串
    private string SqlConnectionString = System.Configuration.ConfigurationManager.ConnectionStrings["ConnectionString"].ToString();
    //数据库存储过程参数列表
    private const string Para_Account = "@Account";
    private const string Para_Password = "@Password";
    private const string Para_Sex = "@Sex";
    private const string Para_Name = "@Name";
    private const string Para_Telephone = "@Telephone";
    private const string Para_Address = "@Address";
    private const string Para_EMail = "@EMail";
    private const string Para_Msg = "@Msg";
    
    
    [WebMethod]
    public string IsAccountExists(string account) 
    ...{
        //如果帐号为空
        if (account == String.Empty)
        ...{
            return "E";
        }
        //查询数据库是否该帐号存在
        else
        ...{
            SqlParameter[] SqlParas =...{ new SqlParameter(Para_Account, SqlDbType.VarChar, 50) };
            SqlParas[0].Value = account;
            string ReturnValue = DataAccessBase.ExecuteGetString(SqlConnectionString, CommandType.StoredProcedure, "Sp_User_IsAccountExists", null, SqlParas);
            if (String.Compare(ReturnValue.ToUpper(), "Y") == 0)
            ...{
                return "N";
            }
            else
            ...{
                return "Y";
            }
        }
    }
    
    [WebMethod]
    public string RegUser(string account, string password, string sex, string name, string telephone, string address, string email)
    ...{
        //如果帐号未填写
        if (account == String.Empty)
        ...{
            return "U";
        }
        //密码格式不对
        else if (password == String.Empty || password.Length <= 6)
        ...{
            return "P";
        }
        //注册信息正确
        else
        ...{
            SqlParameter[] SqlParas =...{ new SqlParameter(Para_Account, SqlDbType.VarChar, 50), new SqlParameter(Para_Password, SqlDbType.VarChar, 50), new SqlParameter(Para_Sex, SqlDbType.VarChar, 50),
                                        new SqlParameter(Para_Name, SqlDbType.VarChar, 50),new SqlParameter(Para_Telephone, SqlDbType.VarChar, 50),new SqlParameter(Para_Address, SqlDbType.VarChar, 50),
                                        new SqlParameter(Para_EMail, SqlDbType.VarChar, 50),new SqlParameter(Para_Msg, SqlDbType.VarChar, 50)};
            SqlParas[0].Value = account;
            SqlParas[1].Value = password;
            SqlParas[2].Value = sex;
            SqlParas[3].Value = name;
            SqlParas[4].Value = telephone;
            SqlParas[5].Value = address;
            SqlParas[6].Value = email;
            SqlParas[7].Direction = ParameterDirection.InputOutput;
            string ReturnValue = DataAccessBase.ExecuteGetString(SqlConnectionString, CommandType.StoredProcedure, "Sp_User_Insert", null, SqlParas);
            return ReturnValue;
        }

    }
    
}

Css样式代码如下：

 

/**/ /*=======文本框样式========*/
.reginput
... {
    width:200px; height:20px;
 }
.reginput_click
... {
     width:200px; height:20px;
     background-color:#95EE5A;
     border-style:inset;
}
.reginput_right
... {
    width:200px; height:20px;
    background-color:White;
    border-color:Green;
    border-top-color:Green;
    border-width:1px;
}
.reginput_error
... {
    width:200px; height:20px;
    background-color:Red;   
}
 
  /**/ /*=======div样式========*/
 .regdiv
  ... {
     font:14px 黑体; text-align:right;
 }
  .regfont_tip
  ... {
    font:12px; color:Red; float:left; margin-top:5px; margin-left:12px;
  }
 .regfont_error
  ... {
    font:12px; color:Red; float:left; margin-top:5px; margin-left:12px;
  }
  .regfont_right
  ... {
    font:12px; color:green; float:left; margin-top:5px; margin-left:13px;
  }
.regdiv_error
   ... {
    width:150px;
    height:20px;
    background-image:url(../Images/reg_error.jpg);
    background-repeat:no-repeat;
    background-position:left;   
     
  }
 .regdiv_right
   ... {
    width:150px;
    height:20px;
    background-image:url(../Images/reg_right.jpg);
    background-repeat:no-repeat;
    background-position:left;
  }

程序效果图：

如有疑问，E-Mail联系Deramjhy@163.com