MVC 4.0下的首页验证码功能实现

首页得感谢网友“风骑士之怒”的帮助，在我很多疑问的时候帮我解惑。

那么在我获得帮助的同时也帮助大家，因为最近我也自己学习和研究MVC 4.0框架和Entity Framework 的使用。所以把自己所学的经验技巧都会隔期整理出来。所有我做的是一个基于mvc 4.0的CRM系统。花了3天时间做了个首页登录（勿鄙视，我是一个人慢慢边研究边做的。所以确实有些慢。），好吧，进入正题。

传统的.net web form实现验证码应该没多大困难。代码还是贴一下

 

/// <summary>
        /// 生成验证码字符串
        /// </summary>
        /// <returns></returns>
        private static string GenerateCheckCode()
        {
            int number;
            string checkCode = string.Empty;
            char code;
            Random rand = new Random();
            for (int i = 0; i < 5; i++)
            {
                number = rand.Next(10000);
                if (number % 2 == 0)
                {
                    code = (char)('0' + Convert.ToChar(number % 10));
                }
                else
                {
                    code = (char)('A' + Convert.ToChar(number % 26));
                }
                checkCode += code.ToString();
            }
            HttpContext.Current.Session.Add("CheckCode", checkCode.ToLower());
            return checkCode;
        }

        private static byte[] GenerateCheckCodeImage(string code)
        {
            if (code == "" || code.Trim() == string.Empty)
            {
                return null;
            }
            //创建一个图形对象
            System.Drawing.Bitmap image = new Bitmap(Convert.ToInt32(Math.Ceiling(code.Length * 12.5)), 20);
            //根据图形对象创建一个画布
            Graphics g = Graphics.FromImage(image);

            try
            {
                //画布填充为白色
                g.Clear(Color.White);

                Random rand = new Random();

                for (int i = 0; i < 20; i++)
                {
                    //第一个坐标点
                    int x1 = rand.Next(image.Width);
                    int y1 = rand.Next(image.Height);
                    //第二个坐标点
                    int x2 = rand.Next(image.Width);
                    int y2 = rand.Next(image.Height);
                    //根据两点坐标在画布上画线，形成噪点线背景
                    g.DrawLine(new Pen(Color.SeaGreen, 1), x1, y1, x2, y2);
                }
                //创建字体对象
                Font font = new Font("Arial", 12, (FontStyle.Italic | FontStyle.Strikeout | FontStyle.Bold));
                //创建一个线性渐变画刷
                System.Drawing.Drawing2D.LinearGradientBrush brush = new System.Drawing.Drawing2D.LinearGradientBrush(new Rectangle(0, 0, image.Width, image.Height), Color.Blue, Color.DarkRed, 1.2f, true);
                //将验证码写入画布
                g.DrawString(code, font, brush, 2, 2);

                for (int i = 0; i < 120; i++)
                {
                    int x=rand.Next(image.Width);
                    int y=rand.Next(image.Height);
                    //根据坐标点产生随机颜色的像素点
                    image.SetPixel(x,y,Color.FromArgb(rand.Next(100)));
                }
                //给画布绘制图形边框
                g.DrawRectangle(new Pen(Color.Silver), 0, 0, image.Width - 1, image.Height - 1);

                System.IO.MemoryStream ms = new System.IO.MemoryStream();
                image.Save(ms, System.Drawing.Imaging.ImageFormat.Jpeg);
                // 其实区别就在如下，传统web form 解除掉下面的注释就好，不注释就会报一个HttpException的错误。
                // 提示说“自定义使用TextWriter时，OutputStream不可用”。
                //HttpContext.Current.Response.ClearContent();
                //HttpContext.Current.Response.ContentType = "image/Jpeg";
                //HttpContext.Current.Response.BinaryWrite(ms.ToArray());
                return ms.ToArray();
            }
            catch (Exception ex)
            {
                throw ex;
            }
            finally
            {
                g.Dispose();
                image.Dispose();
            }

        }

        public static byte[] CreateCheckIamge()
        {
            return GenerateCheckCodeImage(GenerateCheckCode());
        }

OK，在控制器的行为中：

        public ActionResult GetValidateCode()
        {
            return File(ValidateCode.CreateCheckIamge(), @"iamge/Jpeg");

        }

再在视图中引用实现：

<td>验证码：</td>
                        <td>@Html.TextBox("txtCheck") <img id="valiCode" style="cursor: pointer;vertical-align:middle;" src="@Url.Action("Login","Login")" alt="验证码" οnclick="this.src=this.src+'?'+Math.random();" /></td>

这里当点击图片时会进行更换验证码，如果当前url是带参的，那么将onclick事件里‘？’改为'&' 符号。

效果图：