MVC采用HtmlHelper扩展和Filter封装验证码的功能

最近因为有个项目除了登录还有其他很多地方需要用到验证码的功能，所以想到了采用HtmlHelper和ActionFilter封装一个验证码的功能，以便能够重复调用。封装好以后调用很方便，只需在View中调用Html扩展好的方法，相应的Action加上验证功能的Filter就行了。

首先写一个能够随机生成数字的图片的类，园子里有一大把这样的文章，直接拿过来就用了，自己懒得写了。

   public class CaptchaRender
     {
         public CaptchaRender()
         {
         }

         /// <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*12.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.2f, 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();
             }
         }

         /// <summary>
         /// 得到验证码图片的长度
         /// </summary>
         /// <param name="validateNumLength">验证码的长度</param>
         /// <returns></returns>
         public static int GetImageWidth(int validateNumLength)
         {
             return (int) (validateNumLength*12.0);
         }

         /// <summary>
         /// 得到验证码的高度
         /// </summary>
         /// <returns></returns>
         public static double GetImageHeight()
         {
             return 22.5;
         }
     }

然后写HtmlHelper类型的扩展方法，以便在View中调用。

  public static class HtmlExtensions
     {
         /// <summary>
         /// 生成验证码
         /// </summary>
         /// <param name="helper">当前View的HtmlHelper</param>
         /// <param name="urlHelper">当前View的UrlHelper</param>
         /// <returns>带验证码的Img</returns>
         public static MvcHtmlString GenerateCaptcha(this HtmlHelper helper, UrlHelper urlHelper)
         {
             var sb = new StringBuilder();
             var builder = new TagBuilder("img");
             builder.Attributes.Add("id", "captcha");
             builder.Attributes.Add("style", "cursor:pointer");
             builder.Attributes.Add("src", urlHelper.Action("GetCaptcha", "Common"));
             builder.Attributes.Add("alt", "单击刷新验证码");
             sb.AppendLine(builder.ToString(TagRenderMode.Normal));

             sb.AppendLine("<script>");
             sb.AppendLine("$(function(){");
             sb.AppendLine("$('#captcha').bind('click',function(){this.src='" +
                           urlHelper.Action("GetCaptcha", "Common") + "?time='+(new Date()).getTime()})");
             sb.AppendLine("})");
             sb.AppendLine("</script>");

             return MvcHtmlString.Create(sb.ToString());
         }

         /// <summary>
         /// 生成验证码
         /// </summary>
         /// <typeparam name="TModel">Model</typeparam>
         /// <typeparam name="TValue">Model的值</typeparam>
         /// <param name="helper">当前View的HtmlHelper</param>
         /// <param name="expression">Model属性的Lambda表达式</param>
         /// <param name="urlHelper">当前View的UrlHelper</param>
         /// <returns>封装好的label，textbox，带验证码的img</returns>
         public static MvcHtmlString GenerateCaptcha<TModel, TValue>(this HtmlHelper<TModel> helper,
             Expression<Func<TModel, TValue>> expression, UrlHelper urlHelper)
         {
             StringBuilder sb = new StringBuilder();
             var label = helper.LabelFor(expression, new {}, "：");
             var textbox = helper.TextBoxFor(expression);
             var captcha = GenerateCaptcha(helper, urlHelper);
             sb.AppendLine(label.ToHtmlString());
             sb.AppendLine(textbox.ToHtmlString());
             sb.AppendLine(captcha.ToHtmlString());

             return MvcHtmlString.Create(sb.ToString());
         }
     }

其中builder.Attributes.Add("src", urlHelper.Action("GetCaptcha", "Common"))调用了用于生成带验证码的GetCaptcha方法，该方法后面会提到，本人写在
CommonController当中，GetCaptcha方法其实就是调用了上面的CaptchaRender类中的CreateValidateCode方法，生成验证码输出到View。

GenerateCaptcha<TModel, TValue>这个泛型方法可以绑定视图模型中验证码的字段，并且生成label，textbox，image标签，还有相关的脚本，在View中输出的内容如下：

<label for="Captcha">验证码：</label>
<input id="Captcha" name="Captcha" type="text" value="" />
<img alt="单击刷新验证码" id="captcha" src="/Common/GetCaptcha" style="cursor:pointer"></img>
<script>
$(function(){
$('#captcha').bind('click',function(){this.src='/Common/GetCaptcha?time='+(new Date()).getTime()})
})
</script>

CommonController中的GetCaptcha方法如下：

        /// <summary>
        /// 生成验证码
        /// </summary>
        /// <returns></returns>
        public ActionResult GetCaptcha()
        {
            CaptchaRender captcha = new CaptchaRender();
            string code = captcha.CreateValidateCode();
            TempData["Captcha"] = code;
            byte[] bytes = captcha.CreateValidateGraphic(code);
            return File(bytes, "image/jpeg");
        }

TempData["Captcha"] = code是把生成的验证码放到TempData中，以便在ActionFilter中获取到验证码的值，ActionFilter方法如下：

     public class CaptchaValidatorAttribute : ActionFilterAttribute
     {
         private const string CaptchaFormValue = "Captcha";
         public override void OnActionExecuting(ActionExecutingContext filterContext)
         {
             bool valid = false;

             foreach (var value in filterContext.HttpContext.Request.Form.AllKeys)
             {
                 if (value.Contains(CaptchaFormValue))
                 {
                     valid = (string) filterContext.Controller.TempData["Captcha"] ==
                             filterContext.HttpContext.Request.Form[value];
                     break;
                 }
             }
             filterContext.ActionParameters["captchaValid"] = valid;
             base.OnActionExecuting(filterContext);
         }
     }

CaptchaValidator过滤器其实就是在相应的Action执行前，遍历Form窗体变量集合的所有Key值，把保存在TempData["Captcha"]中的验证码的值和Form窗体中name="Captcha"(Key值="Captcha")的Textbox的值(用户输入的验证码)比较，然后再把比较后的bool值赋值给用CaptchaValidator特性修饰的Action的captchaValid参数。(Action根据captchaValid参数的值去判断是否通过验证)。

View视图代码调用如下：

@Html.GenerateCaptcha(m => m.Captcha, Url)

Action调用如下：

一定要记得Action的参数名称captchaValid和过滤器中 filterContext.ActionParameters["captchaValid"]一致。

效果图如下：