02-17 位图验证码(一般处理程序)+AJAX

建立一个空网站,在设计界面工具箱中拖入一个TextBox工具,一个按钮,外加一个Image图片工具(充当数字、字母以图片形式)。但是这样做出来的验证码会出现一个问题,每当点击一下按钮,界面自动提交一遍,重新刷新一遍再返回,为防止整个页面被重新提交,需要加入一个UpdatePanel,只刷新当前updatePanel内的内容即可。

必须要结合AJAX来使用

02-17 位图验证码(一般处理程序)+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             &nbsp;</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:嵌生成之后的ID

30 <script>

31     function changeimg()

32     {

33         var img = document.getElementById("<%=Image1.ClientID%>"); //使用经<% %>转译之后ID

34         img.src = "Code.ashx?1=" + Math.random();

35     }

36 </script>

 

界面效果:

 

你可能感兴趣的:(Ajax)