asp.net 與ajax執行個體

 1：在設定檔裡面添加一個接點：

<httpHandlers>
<add verb="POST,GET" path="ajax/*.ashx" type="Ajax.PageHandlerFactory, Ajax" />
</httpHandlers>

  2：在要使用的頁面加一句： Ajax.Utility.RegisterTypeForAjax(typeof(類名));

  3：在要在javascript函數裡面要調用的伺服器端方法上加一個：[Ajax.AjaxMethod  (Ajax.HttpSessionStateRequirement.ReadWrite)]標記

  大體就這樣的。下面我們來做一個簡單的使用者註冊吧：
  先要考慮的是：第一要驗證客戶輸入的資訊是否符合我們定義的標準；第二：要非同步考慮這個客戶輸入的名字是否已經被別人使用了，不要在客戶提交註冊資訊的時候再去驗證，這樣就很浪費了；第三：我們所有的資料添加，修改，查詢都可以用這個dll來做的，全部是無重新整理的，但是要考慮開發效率哦！

1   <table border="0" cellpadding="0" cellspacing="0" style="width: 557px">
2                            <tr>
3                                <td style="width: 462px; text-align: right; height: 12px;">
4                                    <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ControlToValidate="txtUserName"
5                                        ErrorMessage="*請輸入" Width="110px"></asp:RequiredFieldValidator>使用者名稱:</td>
6                                <td colspan="2" style="height: 12px; text-align: left">
7                                    <asp:TextBox ID="txtUserName" runat="server" onchange="OncheckInfo('txtUserName')" Width="213px"></asp:TextBox>
8                                </td>
9                            </tr>
10                            <tr>
11                                <td style="width: 462px; text-align: right">
12                                    <asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server" ControlToValidate="txtPwd"
13                                        ErrorMessage="*請輸入" Width="88px"></asp:RequiredFieldValidator>密碼:</td>
14                                <td colspan="2" style="text-align: left">
15                                    <asp:TextBox ID="txtPwd" runat="server" TextMode="Password" onKeyUp=pwStrength() onBlur=pwStrength()
16                                        Width="213px"></asp:TextBox>
17                                </td>
18                            </tr>
19                            <tr>
20                                <td style="width: 462px; height: 24px; text-align: right">
21                                    <asp:CompareValidator ID="CompareValidator1" runat="server" ControlToCompare="txtPwd"
22                                        ControlToValidate="txtPwdd" Display="Dynamic" ErrorMessage="兩次出入不一致" Width="136px"></asp:CompareValidator>確認密碼:</td>
23                                <td colspan="2" style="height: 24px; text-align: left">
24                                    <asp:TextBox ID="txtPwdd" runat="server" TextMode="Password" Width="213px"></asp:TextBox>&nbsp;
25                                </td>
26                            </tr>
27                            <tr>
28                                <td style="width: 462px; height: 24px; text-align: right">
29                                    密碼安全層級:&nbsp;</td>
30                                <td colspan="2" style="height: 24px; text-align: left">
31                                    <table border="0" bordercolor="#cccccc" cellpadding="1" cellspacing="0" height="23"
32                                        style="display: inline; width: 213px">
33                                        <tr align="center" bgcolor="#eeeeee">
34                                            <td id="strength_L" width="33%">
35                                                弱</td>
36                                            <td id="strength_M" width="33%">
37                                                中</td>
38                                            <td id="strength_H" width="33%">
39                                                強</td>
40                                        </tr>
41                                    </table>
42                                </td>
43                            </tr>

44                            <tr>
45                                <td style="width: 462px; text-align: right">
46                                    <asp:RegularExpressionValidator ID="RegularExpressionValidator1" runat="server" ControlToValidate="txtEmail"
47                                        ErrorMessage="請輸入正確格式" ValidationExpression="\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*" Width="120px"></asp:RegularExpressionValidator>常用郵件:</td>
48                                <td colspan="2" style="text-align: left">
49                                    <asp:TextBox ID="txtEmail" runat="server" Width="213px" onchange="OncheckInfo('txtEmail')" Height="19px"></asp:TextBox></td>
50                            </tr>
51                            <tr>
52                                <td style="width: 462px; text-align: right">
53                                    註冊類型:</td>
54                                <td style="width: 60px; text-align: left">
55                                    <asp:DropDownList ID="ddlType" runat="server">
56                                        <asp:ListItem Value="1">公司</asp:ListItem>
57                                        <asp:ListItem Value="0">個人</asp:ListItem>
58                                    </asp:DropDownList></td>
59                                <td style="width: 91px; text-align: left">
60                                </td>
61                                <td style="width: 291px">
62                                </td>
63                            </tr>
64                            <tr>
65                                <td style="width: 462px">
66                                    <input id="btReg" type="button" value="用戶端方法註冊" language="javascript" onclick="return btReg_onclick()" /></td>
67                                <td style="width: 60px; text-align: left">
68                                    <asp:Button ID="btnOK" runat="server" OnClick="btnOK_Click" Text="伺服器方法註冊" />
69                                    </td>
70                                <td style="width: 91px; text-align: left">
71                                    <asp:Button
72                                        ID="btnCancel" runat="server" OnClick="Button2_Click" Text="取消" /></td>
73                                <td style="width: 291px">
74                                </td>
75                            </tr>
76                            <tr>
77                                <td colspan="4" style="text-align: center">
78                                    <asp:Label ID="lblUserName" runat="server" ForeColor="Blue" Width="518px"></asp:Label>
79                                    <asp:Label ID="lblMessage" runat="server" Width="520px" ForeColor="Red"></asp:Label></td>
80                            </tr>
81                        </table>

  上面是頁面的設計，下面是javascritp的資料驗證和提交：

 1<script language="javascript">
2   　       function ShowOrHiddenPanel()
3   　       {
4   　           document.getElementById("Panel2").style.display="None";
5   　           document.getElementById("btNext").style.display="None";
6   　       }
7            function OncheckInfo(T)
8            {
9                var v=document.getElementById(T).value;
10                if(document.getElementById(T).id=="txtUserName")
11                {
12                    var y=RegisterFirst.DateCheckInTable(v).value;
13                    document.getElementById("lblMessage").innerText=y;
14                }
15                else
16                {
17                    var y=RegisterFirst.DateCheckInTableForEmail(v).value;
18                    document.getElementById("lblMessage").innerText=y;
19                }
20            }
21            //用用戶端方法來添加註冊資訊
22            function btReg_onclick() {
23                 var name=document.getElementById("txtUserName").value;
24                 var pwd=document.getElementById("txtPwd").value;
25                 var email=document.getElementById("txtEmail").value;
26                 var type=document.getElementById("ddlType").value;
27                 document.getElementById("lblUserName").innerText=name;
28                 if(name=="" || pwd==""|| email=="")
29                 {
30                     document.getElementById("lblMessage").innerText="請輸入有效資訊";
31                     return false;
32                 }
33                 var v=RegisterFirst.RegisterInfo(name,pwd,email,type).value;
34
35                 document.getElementById("lblMessage").innerText=v;
36
37                 //註冊資訊完了以後各個文字框中資訊必須手動清空
38                 document.getElementById("txtUserName").value="";
39                 document.getElementById("txtPwd").value="";
40                 document.getElementById("txtEmail").value="";
41                 document.getElementById("ddlType").value="";
42                 document.getElementById("btNext").style.display="Block";
43            }
44            //完成註冊資訊的第二步
45            function btn_SecondOK_onclick() {
46
47                 var Rname=document.getElementById("txtRealName").value;
48                 var sex=document.getElementById("ddlSex").value;
49                 var birth=document.getElementById("txtBirth").value;
50                 var Mobile=document.getElementById("txtMobile").value;
51                 var qq=document.getElementById("txtQQ").value;
52                 var msn=document.getElementById("txtMSN").value;
53                 var Address=document.getElementById("txtFax").value;
54                 var fax=document.getElementById("txtAddress").value;
55                 var other=document.getElementById("txtOther").value;
56
57                 if(Rname==""|| birth=="" || Mobile=="" || qq=="")
58                 {
59                     document.getElementById("lblSecondMessage").innerText="請輸入有效資訊";
60                     return false;
61                 }
62                  var v=RegisterFirst.RegisterSecondInfo(Rname,sex,birth,Mobile,qq,msn,Address,fax,other).value;
63                     document.getElementById("lblSecondMessage").innerText=v;
64
65
66
67            }
68            function btNext_onclick() {
69                document.getElementById("Panel1").style.display="None";
70                document.getElementById("Panel2").style.display="Block";
71            }
72      </script>

1<script language="javascript">
2        function CharMode(iN){
3         if (iN>=48 && iN <=57) //數字
 4          return 1;
5         if (iN>=65 && iN <=90) //大寫字母
 6          return 2;
7         if (iN>=97 && iN <=122) //小寫
 8          return 4;
9         else
10          return 8; //特殊字元
11        }
12
13        //bitTotal函數
14        //計算出當前密碼當中一共有多少種模式
15        function bitTotal(num){
16         modes=0;
17         for (i=0;i<4;i++){
18          if (num & 1) modes++;
19          num>>>=1;
20         }
21         return modes;
22        }
23
24        //checkStrong函數
25        //返回密碼的強度層級
26
27        function checkStrong(sPW){
28         if (sPW.length<=4)
29          return 0;  //密碼太短
30         Modes=0;
31         for (i=0;i<sPW.length;i++){
32           //測試每一個字元的類別並統計一共有多少種模式.
33          Modes|=CharMode(sPW.charCodeAt(i));
34         }
35
36         return bitTotal(Modes);
37
38        }
39
40        //pwStrength函數
41        //當使用者放開鍵盤或密碼輸入框失去焦點時,根據不同的層級顯示不同的顏色
42
43        function pwStrength(){
44         var pwd=document.getElementById("txtPwd").value;
45         O_color="#eeeeee";
46         L_color="#FF0000";
47         M_color="#FF9900";
48         H_color="#33CC00";
49         if (pwd==null||pwd==''){
50          Lcolor=Mcolor=Hcolor=O_color;
51         }
52         else{
53          S_level=checkStrong(pwd);
54          switch(S_level)  {
55           case 0:
56            Lcolor=Mcolor=Hcolor=O_color;
57           case 1:
58            Lcolor=L_color;
59            Mcolor=Hcolor=O_color;
60            break;
61           case 2:
62            Lcolor=Mcolor=M_color;
63            Hcolor=O_color;
64            break;
65           default:
66            Lcolor=Mcolor=Hcolor=H_color;
67            }
68          }
69
70         document.getElementById("strength_L").style.background=Lcolor;
71         document.getElementById("strength_M").style.background=Mcolor;
72         document.getElementById("strength_H").style.background=Hcolor;
73         return;
74        }
75        function checkMobile() {
76            var sMobile =document.getElementById("txtMobile").value;
77            if (!(/^13[0-9]\d{4,8}$/.test(sMobile))) {
78                alert("手機號碼輸入有誤");
79            }
80            else
81            {
82                alert("手機號碼正確");
83            }
84
85        }
86</script>

1  /**//// <summary>
 2        /// 該AJAX方法返回的是客戶端註冊的時候是不是有使用者名稱和郵箱已經註冊過的資訊
 3        /// </summary>
 4        /// <param name="str"></param>
 5        /// <returns></returns>
 6        [Ajax.AjaxMethod(Ajax.HttpSessionStateRequirement.ReadWrite)]
7        public string DateCheckInTable(string str)
8        {
9            if (UsersSelQuery.GetCustomerInfoExistByName(str) == 0)
10            {
11                return "恭喜您!該使用者名稱暫無人使用,請快快註冊";
12            }
13            else
14            {
15                return "對不起!該使用者名稱已被使用,請重新起名";
16            }
17        }
18        /**//// <summary>
19        /// 該AJAX方法返回的是客戶端註冊的時候是不是郵箱已經註冊過的資訊
20        /// </summary>
21        /// <param name="str"></param>
22        /// <returns></returns>
23        [Ajax.AjaxMethod(Ajax.HttpSessionStateRequirement.ReadWrite)]
24        public string DateCheckInTableForEmail(string str)
25        {
26            if (UsersSelQuery.GetCustomerInfoExistByEmail(str) == 1)
27            {
28                return "對不起!該郵箱已經註冊過了!";
29            }
30            else
31            {
32                return "恭喜您!郵箱可以使用";
33            }
34        }
35        /**//// <summary>
36        /// 用AJAX方法來做使用者的註冊（第一步）
37        /// </summary>
38        /// <param name="name"></param>
39        /// <param name="pwd"></param>
40        /// <param name="email"></param>
41        /// <param name="type"></param>
42        /// <returns></returns>
43        [Ajax.AjaxMethod(Ajax.HttpSessionStateRequirement.ReadWrite)]
44        public string RegisterInfo(string name, string pwd, string email, string type)
45        {
46            try
47            {
48                UserLogin ul = new UserLogin();
49                ul.U_Name = name;
50                ul.U_Pwd = pwd;
51                ul.U_Email = email;
52                ul.U_Type = int.Parse(type);
53
54                if (UserInfoBiz.RegInfoInsert(ul))
55                {
56                    return ul.U_Name + "恭喜您!註冊成功!";
57                }
58                else
59                    return "對不起,註冊失敗,請重試!";
60            }
61            catch (Exception ex)
62            {
63                return "對不起,註冊失敗,請重試!";
64            }
65        }