MVC小系列（六）【无刷新的验证码】

做个无刷新的验证码功能：

第一步：首先，在公用项目中建立一个生成图片验证码的类型ValidateCode

  /// <summary>
     /// 生成验证码对象
     /// </summary>
     public class ValidateCode
     {
         public ValidateCode()
         {
         }
         ///<summary>
         /// 验证码的最大长度
         ///</summary>
         public int MaxLength
         {
             get { return ; }
         }
         ///<summary>
         /// 验证码的最小长度
         ///</summary>
         public int MinLength
         {
             get { return ; }
         }
         ///<summary>
         /// 生成验证码
         ///</summary>
         ///<param name="length">指定验证码的长度</param>
         ///<returns></returns>
         public string CreateValidateCode(int length)
         {
             int[] randMembers = new int[length];
             int[] validateNums = new int[length];
             string validateNumberStr = "";
             //生成起始序列值
             int seekSeek = unchecked((int)DateTime.Now.Ticks);
             Random seekRand = new Random(seekSeek);
             int beginSeek = (int)seekRand.Next(, Int32.MaxValue - length * );
             int[] seeks = new int[length];
             for (int i = ; i < length; i++)
             {
                 beginSeek += ;
                 seeks[i] = beginSeek;
             }
             //生成随机数字
             for (int i = ; i < length; i++)
             {
                 Random rand = new Random(seeks[i]);
                 int pownum =  * (int)Math.Pow(, length);
                 randMembers[i] = rand.Next(pownum, Int32.MaxValue);
             }
             //抽取随机数字
             for (int i = ; i < length; i++)
             {
                 string numStr = randMembers[i].ToString();
                 int numLength = numStr.Length;
                 Random rand = new Random();
                 int numPosition = rand.Next(, numLength - );
                 validateNums[i] = Int32.Parse(numStr.Substring(numPosition, ));
             }
             //生成验证码
             for (int i = ; i < length; i++)
             {
                 validateNumberStr += validateNums[i].ToString();
             }
             return validateNumberStr;
         }
         ///<summary>
         /// 创建验证码的图片
         ///</summary>
         ///<param name="containsPage">要输出到的page对象</param>
         ///<param name="validateNum">验证码</param>
         public byte[] CreateValidateGraphic(string validateCode)
         {
             Bitmap image = new Bitmap((int)Math.Ceiling(validateCode.Length * 14.0), );
             Graphics g = Graphics.FromImage(image);
             try
             {
                 //生成随机生成器
                 Random random = new Random();
                 //清空图片背景色
                 g.Clear(Color.White);
                 //画图片的干扰线
                 for (int i = ; i < ; i++)
                 {
                     int x1 = random.Next(image.Width);
                     int x2 = random.Next(image.Width);
                     int y1 = random.Next(image.Height);
                     int y2 = random.Next(image.Height);
                     g.DrawLine(new Pen(Color.Silver), x1, y1, x2, y2);
                 }
                 Font font = new Font("Arial", , (FontStyle.Bold | FontStyle.Italic));
                 LinearGradientBrush brush = new LinearGradientBrush(new Rectangle(, , image.Width, image.Height),
                 Color.Blue, Color.DarkRed, 1.5f, true);
                 g.DrawString(validateCode, font, brush, , );
                 //画图片的前景干扰点
                 for (int i = ; i < ; i++)
                 {
                     int x = random.Next(image.Width);
                     int y = random.Next(image.Height);
                     image.SetPixel(x, y, Color.FromArgb(random.Next()));
                 }
                 //画图片的边框线
                 g.DrawRectangle(new Pen(Color.Silver), , , image.Width - , image.Height - );
                 //保存图片数据
                 MemoryStream stream = new MemoryStream();
                 image.Save(stream, ImageFormat.Jpeg);
                 //输出图片流
                 return stream.ToArray();
             }
             finally
             {
                 g.Dispose();
                 image.Dispose();
             }
         }
     }

第二步：

在当前公用的controller中添加一个返回文件类型的action,当然也可以是所有返回类型的基类ActionResult，这个方法用来返回一个图像对象

  /// <summary>
         /// 生成验证码图像对象
         /// </summary>
         /// <returns></returns>
         public ActionResult GetValidateCode()
         {
             ValidateCode vCode = new ValidateCode();
             string code = vCode.CreateValidateCode();
             Session["ValidateCode"] = code;
             byte[] bytes = vCode.CreateValidateGraphic(code);
             return File(bytes, @"image/jpeg");
         }
         /// <summary>
         /// 得到当前验证码
         /// </summary>
         /// <returns></returns>
         public ActionResult GetCurrentValidateCode()
         {
             return Content(Session["ValidateCode"].ToString());
         }

第三步：在View页面显示

 <div id="ValidateCodeSpan">
                        请输入验证码：@Html.TextBox("VCode")
                        <img id="valiCode" style="cursor: pointer;" src="/Home/GetValidateCode" alt="看不清？请点我" />
                        @Html.Hidden("ValidateCode")

     <script type="text/javascript">
         $(function () {
             //首次加载
             $("#valiCode").attr("src", "/Home/GetValidateCode?time=" + (new Date()).getTime());
             $.get("/Home/GetCurrentValidateCode", function (data) {
                 $("#ValidateCode").val(data);
             });
             //单击验证码事件
             $("#valiCode").bind("click", function () {
                 this.src = "/Home/GetValidateCode?time=" + (new Date()).getTime();
                 $.get("/Home/GetCurrentValidateCode", function (data) {
                     $("#ValidateCode").val(data);
                 });
             });
         });
           </script>

 </div>