服务器之家:专注于服务器技术及软件下载分享
分类导航

PHP教程|ASP.NET教程|JAVA教程|ASP教程|

服务器之家 - 编程语言 - ASP.NET教程 - asp.net 图片验证码的HtmlHelper

asp.net 图片验证码的HtmlHelper

2019-10-04 20:00asp.net开发网 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

延伸 · 阅读

精彩推荐