asp.net 图片验证码的HtmlHelper

  一个图片验证码的HtmlHelper,原来的调用代码如下:

  

复制代码 代码如下:

  <img id="validateCode" mailto:src='@Url.Action(%22GetValidateCode%22)'/>

  <script language="javascript" type="text/javascript">

  $(document).ready(function () {

  $("#validateCode").bind("click", function () {

  var url = $(this).attr("src");

  url += "?" + Math.random();

  $(this).attr("src", url);

  });

  });

  </script>

  封装成HtmlHelper后:

  @Html.ValidateCode()

  使用步骤如下:

  1.建一个验证码Helper

  

复制代码 代码如下:

  using System;

  using System.Collections.Generic;

  using System.ComponentModel;

  using System;

  using System.Collections.Generic;

  using System.Diagnostics.CodeAnalysis;

  using System.Globalization;

  using System.Linq.Expressions;

  using System.Security.Policy;

  using System.Text;

  using System.Web;

  using System.Web.Mvc;

  using System.Web.Mvc.Resources;

  using System.Web.Routing;

  namespace MvcApplication1

  {

  public static class ValidateCodeHelper

  {

  private const string IdPrefix = "validateCode";

  private const int Length = 4;

  public static MvcHtmlString ValidateCode(this HtmlHelper helper)

  {

  return ValidateCode(helper, IdPrefix);

  }

  public static MvcHtmlString ValidateCode(this HtmlHelper helper,string id)

  {

  return ValidateCode(helper, id, Length);

  }

  public static MvcHtmlString ValidateCode(this HtmlHelper helper, string id, int length)

  {

  return ValidateCode(helper, id, length, null);

  }

  public static MvcHtmlString ValidateCode(this HtmlHelper helper, string id, object htmlAttributes)

  {

  return ValidateCode(helper, id, Length, htmlAttributes);

  }

  public static MvcHtmlString ValidateCode(this HtmlHelper helper, int length, object htmlAttributes)

  {

  return ValidateCode(helper, IdPrefix, length, htmlAttributes);

  }

  public static MvcHtmlString ValidateCode(this HtmlHelper helper, object htmlAttributes)

  {

  return ValidateCode(helper, 4, htmlAttributes);

  }

  public static MvcHtmlString ValidateCode(this HtmlHelper helper, int length)

  {

  return ValidateCode(helper,length, null);

  }

  public static MvcHtmlString ValidateCode(this HtmlHelper helper,string id,int length,object htmlAttributes)

  {

  string finalId = id + "_imgValidateCode";

  var tagBuild = new TagBuilder("img");

  tagBuild.GenerateId(finalId);

  var defaultController = ((Route)RouteTable.Routes["Default"]).Defaults["controller"] + "/";

  var controller = HttpContext.Current.Request.Url.Segments.Length == 1

  ? defaultController

  : HttpContext.Current.Request.Url.Segments[1];

  tagBuild.MergeAttribute("src", string.Format("/{0}GetValidateCode?length={1}",controller,length));

  tagBuild.MergeAttribute("alt", "看不清?点我试试看!");

  tagBuild.MergeAttribute("style","cursor:pointer;");

  tagBuild.MergeAttributes(AnonymousObjectToHtmlAttributes(htmlAttributes));

  var sb = new StringBuilder();

  sb.Append("<script language=\"javascript\" type=\"text/javascript\">");

  sb.Append("$(document).ready(function () {");

  sb.AppendFormat("$(\"#{0}\").bind(\"click\", function () {{", finalId);

  //sb.Append("$(this).attr(\"style\", \"cursor:pointer;\");");

  sb.Append("var url = $(this).attr(\"src\");");

  sb.Append("url += \"&\" + Math.random();");

  sb.Append("$(this).attr(\"src\", url);");

  sb.Append("});");

  sb.Append("});");

  sb.Append("</script>");

  return MvcHtmlString.Create(tagBuild+sb.ToString());

  }

  public static RouteValueDictionary AnonymousObjectToHtmlAttributes(object htmlAttributes)

  {

  var result = new RouteValueDictionary();

  if (htmlAttributes != null)

  {

  foreach (PropertyDescriptor property in TypeDescriptor.GetProperties(htmlAttributes))

  {

  result.Add(property.Name.Replace('_', '-'), property.GetValue(htmlAttributes));

  }

  }

  return result;

  }

  }

  }

  2.生成验证码的代码:

  

复制代码 代码如下:

  using System;

  using System.Collections.Generic;

  using System.Linq;

  using System.Web;

  using System.Drawing;

  using System.Drawing.Drawing2D;

  using System.IO;

  using System.Drawing.Imaging;

  namespace MvcApplication1

  {

  public class ValidateCode

  {

  public ValidateCode()

  {

  }

  /// <summary>

  /// 验证码的最大长度

  /// </summary>

  public int MaxLength

  {

  get { return 10; }

  }

  /// <summary>

  /// 验证码的最小长度

  /// </summary>

  public int MinLength

  {

  get { return 1; }

  }

  /// <summary>

  /// 生成验证码

  /// </summary>

  /// <param name="length">指定验证码的长度</param>

  /// <returns></returns>

  public string CreateValidateCode(int length)

  {

  var randMembers = new int[length];

  var validateNums = new int[length];

  var validateNumberStr = "";

  //生成起始序列值

  var seekSeek = unchecked((int)DateTime.Now.Ticks);

  var seekRand = new Random(seekSeek);

  var beginSeek = (int)seekRand.Next(0, Int32.MaxValue - length * 10000);

  var seeks = new int[length];

  for (var i = 0; i < length; i++)

  {

  beginSeek += 10000;

  seeks[i] = beginSeek;

  }

  //生成随机数字

  for (var i = 0; i < length; i++)

  {

  var rand = new Random(seeks[i]);

  var pownum = 1 * (int)Math.Pow(10, length);

  randMembers[i] = rand.Next(pownum, Int32.MaxValue);

  }

  //抽取随机数字

  for (var i = 0; i < length; i++)

  {

  var numStr = randMembers[i].ToString();

  var numLength = numStr.Length;

  var rand = new Random();

  var numPosition = rand.Next(0, numLength - 1);

  validateNums[i] = Int32.Parse(numStr.Substring(numPosition, 1));

  }

  //生成验证码

  for (var i = 0; i < length; i++)

  {

  validateNumberStr += validateNums[i].ToString();

  }

  return validateNumberStr;

  }

  /// <summary>

  /// 创建验证码的图片

  /// </summary>

  /// <param name="validateCode">验证码</param>

  public byte[] CreateValidateGraphic(string validateCode)

  {

  var image = new Bitmap((int)Math.Ceiling(validateCode.Length * 12.0), 22);

  var g = Graphics.FromImage(image);

  try

  {

  //生成随机生成器

  var random = new Random();

  //清空图片背景色

  g.Clear(Color.White);

  //画图片的干扰线

  for (int i = 0; i < 25; i++)

  {

  var x1 = random.Next(image.Width);

  var x2 = random.Next(image.Width);

  var y1 = random.Next(image.Height);

  var y2 = random.Next(image.Height);

  g.DrawLine(new Pen(Color.Silver), x1, y1, x2, y2);

  }

  //Font font = new Font("Arial", 12, (FontStyle.Bold | FontStyle.Italic));

  string[] fontName = { "华文新魏", "宋体", "圆体", "黑体", "隶书" };

  var font = new Font(fontName[new Random().Next(0, validateCode.Length)], 12, (FontStyle.Bold | FontStyle.Italic));

  var brush = new LinearGradientBrush(new Rectangle(0, 0, image.Width, image.Height),

  Color.Blue, Color.DarkRed, 1.2f, true);

  g.DrawString(validateCode, font, brush, 3, 2);

  //画图片的前景干扰点

  for (var i = 0; i < 100; i++)

  {

  var x = random.Next(image.Width);

  var y = random.Next(image.Height);

  image.SetPixel(x, y, Color.FromArgb(random.Next()));

  }

  //画图片的边框线

  g.DrawRectangle(new Pen(Color.Silver), 0, 0, image.Width - 1, image.Height - 1);

  //保存图片数据

  var 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 23;

  }

  }

  }

  3.建一个BaseController

  

复制代码 代码如下:

  using System;

  using System.Collections.Generic;

  using System.Linq;

  using System.Web;

  using System.Web.Mvc;

  namespace MvcApplication1

  {

  public class BaseController:Controller

  {

  public ActionResult GetValidateCode(int length)

  {

  var vCode = new ValidateCode();

  var code = vCode.CreateValidateCode(length);

  Session["ValidateCode"] = code;

  var bytes = vCode.CreateValidateGraphic(code);

  return File(bytes, @"image/gif");

  }

  protected string GetValidateCode()

  {

  return Session["ValidateCode"].ToString();

  }

  }

  }

  4.让Controller继承BaseController:

  

复制代码 代码如下:

  using System;

  using System.Collections.Generic;

  using System.Linq;

  using System.Web;

  using System.Web.Mvc;

  using System.Web.Security;

  namespace MvcApplication1.Controllers

  {

  public class HomeController :BaseController

  {

  public ActionResult Index()

  {

  ViewBag.Message = "Welcome to ASP.NET MVC!";

  return View();

  }

  public ActionResult About()

  {

  var code = GetValidateCode();

  return View();

  }

  }

  }

  5.页面调用代码:

  

复制代码 代码如下:

  @using MvcApplication1

  @{

  ViewBag.Title = "About Us";

  }

  <h2>About</h2>

  <p>

  Put content here.

  </p>

  @Html.ValidateCode()

  6.验证码的效果图:

asp.net 图片验证码的HtmlHelper

  源码可以从这里下载: ValidateCode.rar