標籤：
建立一個空網站，在設計介面工具箱中拖入一個TextBox工具，一個按鈕，外加一個Image圖片工具（充當數字、字母以圖片形式）。但是這樣做出來的驗證碼會出現一個問題，每當點擊一下按鈕，介面自動認可一遍，重新重新整理一遍再返回，為防止整個頁面被重新提交，需要加入一個UpdatePanel，只重新整理當前updatePanel內的內容即可。
必須要結合AJAX來使用
介面設計好後，需要添加一個以ashx結尾的檔案項，在這裡面寫位元影像隨機驗證碼的格式等等。
1 <%@ WebHandler Language="C#" Class="Code" %> 2 3 using System; 4 using System.Web; 5 using System.Drawing; 6 using System.Drawing.Drawing2D; 7 using System.Drawing.Imaging; 8 using System.Web.SessionState; 9 //一般處理常式要使用session,必須要繼承IRequiresSessionState介面（介面就是一個空的方法），session存在於這個介面中10 public class Code : IHttpHandler,IRequiresSessionState {11 12 public void ProcessRequest (HttpContext context) {13 context.Response.ContentType = "image/jpeg";14 Bitmap img = new Bitmap(50, 20);//位元影像，畫了一個空白的圖形15 Graphics g = Graphics.FromImage(img);//16 17 string s = "0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ";18 string str = "";19 Random rand = new Random();//初始化隨機數20 for (int i = 0; i < 4; i++)21 {22 int start = rand.Next(62); //產生一個隨機的起始位置23 str += s.Substring(start, 1).ToString();24 }25 context.Session["code"] = str;//session用於傳值26 27 Font font = new Font("宋體",12, FontStyle.Bold);//設定字型格式28 SolidBrush brush = new SolidBrush(Color.White);29 g.FillRectangle(brush, 0, 0, 50, 20);30 brush.Color = Color.Red;31 g.DrawString(str, font, brush, 0, 0);32 img.Save(context.Response.OutputStream, ImageFormat.Jpeg);33 }34 35 public bool IsReusable {36 get {37 return false;38 }39 }40 41 }
一般處理常式：有一個頁面A,傳遞參數到一般處理常式,處理常式接收到參數,訪問資料庫,判斷正確,跳轉下一個頁面,錯誤,跳轉到另一個頁面.
在aspx的Js原始碼中，寫function語句，確保傳遞參數
1 <body> 2 <form id="form1" runat="server"> 3 <div> 4 5 6 <asp:ScriptManager ID="ScriptManager1" runat="server"> 7 </asp:ScriptManager> 8 9 </div>10 <p>11 </p>12 13 <asp:Image ID="Image1" runat="server" ImageUrl="~/Code.ashx" />14 15 <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>16 <asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="Button" />17 <asp:Label ID="Label1" runat="server" Text="失敗"></asp:Label>18 </form>19 </body>20 </html>21 <script>22 //js方法23 function changeimg()24 {25 var img = document.getElementById("Image1");26 img.src = "Code.ashx?1=" + Math.random();//使用主版頁面之後，自己寫的ID和JS產生的ID會不一樣，需要手動更改ID（方法1）27 }28 </script>29 //方法2：嵌產生之後的ID30 <script>31 function changeimg()32 {33 var img = document.getElementById("<%=Image1.ClientID%>"); //使用經<% %>轉譯之後ID34 img.src = "Code.ashx?1=" + Math.random();35 }36 </script>
AJAX+映像驗證碼（一般處理常式）
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
