asp.net 图片验证码的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.验证码的效果图：

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