摘要:Web ATM 的 Dynamic-Button
相信用過Web ATM的人應該都看過類似的頁面！
主要用於Web ATM上的安全機制，讓User輸入密碼時，不從鍵盤上輸入，而改用打亂的按鈕輸入！
DynamicButton.aspx
01 <html xmlns="http://www.w3.org/1999/xhtml" >
02 <head runat="server">
03 <title>DynamicButton</title>
04 <script type="text/javaScript">
05 function addToCardpin(val){
06 document.getElementById("tbxPinCode").value += val;
07 return false;
08 }
09 function clearCardpin(){
10 document.getElementById("tbxPinCode").value = "";
11 }
12 </script>
13 </head>
14 <body>
15 <form id="form1" runat="server">
16 <div>
17 <input id="tbxPinCode" type="Password" runat="server" readonly="readonly" /><br />
18 <asp:ImageButton ID="ImageButton0" runat="server" />
19 <asp:ImageButton ID="ImageButton1" runat="server" />
20 <asp:ImageButton ID="ImageButton2" runat="server" />
21 <asp:ImageButton ID="ImageButton3" runat="server" />
22 <asp:ImageButton ID="ImageButton4" runat="server" />
23 <asp:ImageButton ID="ImageButton5" runat="server" />
24 <asp:ImageButton ID="ImageButton6" runat="server" />
25 <asp:ImageButton ID="ImageButton7" runat="server" />
26 <asp:ImageButton ID="ImageButton8" runat="server" />
27 <asp:ImageButton ID="ImageButton9" runat="server" />
28 <img src="images/clear.gif" onclick="clearCardpin()" style="cursor:pointer" />
29 <asp:Button ID="btnOK" runat="server" Text="送出" OnClick="btnOK_Click" />
30 </div>
31 </form>
32 </body>
33 </html>
02 <head runat="server">
03 <title>DynamicButton</title>
04 <script type="text/javaScript">
05 function addToCardpin(val){
06 document.getElementById("tbxPinCode").value += val;
07 return false;
08 }
09 function clearCardpin(){
10 document.getElementById("tbxPinCode").value = "";
11 }
12 </script>
13 </head>
14 <body>
15 <form id="form1" runat="server">
16 <div>
17 <input id="tbxPinCode" type="Password" runat="server" readonly="readonly" /><br />
18 <asp:ImageButton ID="ImageButton0" runat="server" />
19 <asp:ImageButton ID="ImageButton1" runat="server" />
20 <asp:ImageButton ID="ImageButton2" runat="server" />
21 <asp:ImageButton ID="ImageButton3" runat="server" />
22 <asp:ImageButton ID="ImageButton4" runat="server" />
23 <asp:ImageButton ID="ImageButton5" runat="server" />
24 <asp:ImageButton ID="ImageButton6" runat="server" />
25 <asp:ImageButton ID="ImageButton7" runat="server" />
26 <asp:ImageButton ID="ImageButton8" runat="server" />
27 <asp:ImageButton ID="ImageButton9" runat="server" />
28 <img src="images/clear.gif" onclick="clearCardpin()" style="cursor:pointer" />
29 <asp:Button ID="btnOK" runat="server" Text="送出" OnClick="btnOK_Click" />
30 </div>
31 </form>
32 </body>
33 </html>
第17行，會用Html Control主要是當user點選/按下按鈕時，是透過JavaScript將數據給tbxPinCode；
要再按下"送出"後，能透過Server讀取user所輸入的值為何，再做進一步的處理！(密碼比對用)
DynamicButton.aspx.cs
01 
public partial class DynamicButton : System.Web.UI.Page
02
{
03
protected void Page_Load(object sender, EventArgs e)
04
{
05 if (!IsPostBack)
06 {
07
打亂/隨機 數值陣列
22
23 for (int i = 0; i < 10; i++)
24 {
25 ((ImageButton)Page.FindControl("ImageButton" + i.ToString())).ImageUrl = "images/" + num[i].ToString() + ".gif";
26 ((ImageButton)Page.FindControl("ImageButton" + i.ToString())).OnClientClick = "return addToCardpin('" + num[i].ToString() + "');";
27
}
28 }
29 }
30 protected void btnOK_Click(object sender, EventArgs e)
31 {
32 Response.Write(this.tbxPinCode.Value);
33 }
34
}
public partial class DynamicButton : System.Web.UI.Page02
{
03
protected void Page_Load(object sender, EventArgs e)04
{05
if (!IsPostBack)06
{07
打亂/隨機 數值陣列22
23 for (int i = 0; i < 10; i++)
24
{25
((ImageButton)Page.FindControl("ImageButton" + i.ToString())).ImageUrl = "images/" + num[i].ToString() + ".gif";26
((ImageButton)Page.FindControl("ImageButton" + i.ToString())).OnClientClick = "return addToCardpin('" + num[i].ToString() + "');";27
}28
}29
}30
protected void btnOK_Click(object sender, EventArgs e)31
{32
Response.Write(this.tbxPinCode.Value);33
}34
}
我相信有更好的寫法！但，這只是當時練習所寫的！
主要是把之前寫過的陸續貼到Blog，一來做存檔，一來查詢應該比較快！