用一般处理程序制作验证码以及验证码局部刷新的实现

最新推荐文章于 2018-09-10 15:30:26 发布

lycclsltt

最新推荐文章于 2018-09-10 15:30:26 发布

阅读量3.3k

点赞数

CC 4.0 BY-SA版权

分类专栏： ASP.NET 文章标签： asp.net 验证码刷新

本文链接：https://blog.youkuaiyun.com/aspnet_lyc/article/details/11879145

ASP.NET 专栏收录该内容

18 篇文章

订阅专栏

本文介绍如何使用ASP.NET通过一般处理程序生成验证码，并利用ScriptManager和UpdatePanel实现验证码的局部刷新。文中详细展示了验证码生成类的设计及其实现，同时提供了完整的代码示例。

一般处理程序和Web窗体都可以生成验证码，写入输出流，实现返回验证码供其他页面引用。一般处理程序的效率和速度优于web窗体，这里使用一般处理程序返回验证码

首先写一个生成bitmap对象验证码的类，一般处理程序将这个包含验证码的bitmap对象写入到缓冲流，供其他页面引用验证码。

该类随机生成一个4位数字的验证码，该类的属性可根据自己的实际需要修改

    public class ValidateCode
    {
        //验证码长度
        public int codeLen = 4;
        //图片清晰度
        public int sightRate = 85;
        //图片宽度
        public int imgWidth = 80;
        //图片高度
        public int imgHeight = 25;
        //字体家族名称
        public string fontFamily = "Times New Roman";
        //字体大小
        public int fontSize = 14;
        //字体样式
        public int fontStyle = 0;
        //绘制起始坐标X
        public int posX = 0;
        //绘制起始坐标Y
        public int posY = 0;
        //生成的验证码
        public string strValidateCode = null;

        public ValidateCode()
        {

        }

        public Bitmap CreateValidateCode()
        {
            string validateCode = GetValidateCode();//生成验证码

            Bitmap bitmap = new Bitmap(imgWidth, imgHeight);//生成BITMAP图像

            DisturbBitmap(bitmap);//图像背景

            DrawValidateCode(bitmap, validateCode);//绘制验证码图像

            return bitmap;
        }

        /// <summary>
        /// 生成验证码
        /// </summary>
        /// <returns></returns>
        private string GetValidateCode()
        {
            string validateCode = "";
            Random random = new Random();
            for (int i = 0; i < codeLen; i++)
            {
                int n = random.Next(10);
                validateCode += n.ToString();
            }
            this.strValidateCode = validateCode;
            return validateCode;
        }

        /// <summary>
        /// 图像背景
        /// </summary>
        /// <param name="bitmap"></param>
        private void DisturbBitmap(Bitmap bitmap)
        {
            Random random = new Random();
            for (int i = 0; i < bitmap.Width; i++)
            {
                for (int j = 0; j < bitmap.Height; j++)
                {
                    if (random.Next(90) <= this.sightRate)
                        bitmap.SetPixel(i, j, Color.White);
                }
            }
        }

        /// <summary>
        /// 绘制验证码图像
        /// </summary>
        /// <param name="bitmap"></param>
        /// <param name="validateCode"></param>
        private void DrawValidateCode(Bitmap bitmap, string validateCode)
        {
            Graphics g = Graphics.FromImage(bitmap);//获取绘制器对象
            Font font = new Font(fontFamily, fontSize, FontStyle.Bold);//设置绘制字体
            g.DrawString(validateCode, font, Brushes.Black, posX, posY);//绘制验证码图像
        }
    }

编写getCode.ashx一般处理程序用来写入验证码到缓冲流

    /// <summary>
    /// getCode 的摘要说明
    /// </summary>
    public class getCode : IHttpHandler
    {

        public void ProcessRequest(HttpContext context)
        {
            ValidateCode validateCode = new ValidateCode();
            Bitmap bitmap = validateCode.CreateValidateCode();
            bitmap.Save(context.Response.OutputStream, ImageFormat.Gif); //将包含验证码的bitmap对象写入到缓冲流

        }

        public bool IsReusable
        {
            get
            {
                return false;
            }
        }
    }

编写一个web窗体来引用验证码

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">

    <label for="user_name">用户名：</label><br />
    <asp:TextBox runat="server" ID="user_name"></asp:TextBox><br />

    <label for="password">密码：</label><br />
    <asp:TextBox runat="server" TextMode="Password" ID="password"></asp:TextBox><br />

    <label for="validate_code">验证码：</label><br />
    <asp:TextBox runat="server" ID="validate_code"></asp:TextBox>
    <asp:Image runat="server" ImageUrl="getCode.ashx"/><br /><br />

    <asp:Button runat="server" ID="sub" Text="登录"/>

    </form>
</body>
</html>

运行程序，效果如下。

接下来实现对验证码的刷新

用ScriptManager和UpdatePanel控件实现验证码的局部刷新，默认vs2010不含有该控件，微软官网下载AjaxControlExtender安装即可。

ScriptManager标签的EnablePartialRendering属性，true-实现局部刷新，false-全页面刷新。

将要进行局部刷新的image标签和触发刷新时间的button包含在<UpdatePanel>标签的<ContentTemplate>标签中

修改窗体代码如下

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">

    <label for="user_name">用户名：</label><br />
    <asp:TextBox runat="server" ID="user_name"></asp:TextBox><br />

    <label for="password">密码：</label><br />
    <asp:TextBox runat="server" TextMode="Password" ID="password"></asp:TextBox><br />

    <label for="validate_code">验证码：</label><br />
    <asp:TextBox runat="server" ID="validate_code"></asp:TextBox>

    <asp:ScriptManager ID="ScriptManager1" runat="server"  EnablePartialRendering="true">
    </asp:ScriptManager>

    <asp:UpdatePanel ID="UpdatePanel1" runat="server">
        <ContentTemplate>
            <asp:Image runat="server" ImageUrl="getCode.ashx" ID="img"/>
            <asp:Button runat="server" ID="another" Text="换一张" onclick="another_Click1"/>
        </ContentTemplate>
    </asp:UpdatePanel>
    
    <br /><br />

    <asp:Button runat="server" ID="sub" Text="登录"/>

    </form>
</body>
</html>

“换一张”按钮的onlick事件中

        protected void another_Click1(object sender, EventArgs e)
        {

            DateTime dt = DateTime.Now;
            this.img.ImageUrl = "getCode.ashx?" + dt.ToBinary().ToString(); //为getCode.ashx传递一个不同的参数,实现验证码刷新
        }