在项目中验证码的生成通常是需要页面无刷新的，所以验证码图片实际是跟在某个input后面的img，通过控制该img来控制验证码显示的位置，例如：

<div>
<input id="testcode" type="text"/><img id="testimg" src="../Home/codeindex"/>
<a href="javascript:freshimg()" style="font-size: 12px; color: Green;">看不清</a>
</div>
<div>
<img id="imgtest" width="500px" height="600px" src="~/pp.png" style="display:none"/>
</div>

需要做到无刷新的切换图片

function freshimg() {
var randomnum = Math.random();
var getimagecode = document.getElementById("testimg");
getimagecode.src = "../Home/codeindex? " + randomnum;
}

验证输入的验证码是否正确

$(document).ready(function () {
var PerformSearch;
$("#testcode").keyup(function () {
var va = $(this).val();
if (PerformSearch) clearTimeout(PerformSearch);
PerformSearch=setTimeout(function () {
$.ajax({
type: "post",
url: "../Home/CheckCode",
data: { valdatecode: va },
dataType: "text",
success: function (data) {
if (data == "true") {
alert("验证码输入正确");
document.getElementById("imgtest").style.display = "block";
}
else {
alert("验证码输入错误");
fresh();
document.getElementById("imgtest").style.display = "none";
}
}
});
}, 1000)
});
});

后台代码为

public ActionResult codeindex()  //该段代码转载其他文档
{
#region 方法1:调用类方法
//CreateValdateCode cc = new CreateValdateCode();
//cc.GetValDateCode();
//Session["code"] = cc.Code;
//return View();
#endregion

#region 方法二
string chkCode = string.Empty;
//颜色列表，用于验证码、噪线、噪点
Color[] color = { Color.Black, Color.Red, Color.Blue, Color.Green, Color.Orange, Color.Brown, Color.Brown, Color.DarkBlue };
//字体列表，用于验证码
string[] font = { "Times New Roman", "MS Mincho", "Book Antiqua", "Gungsuh", "PMingLiU", "Impact" };
//验证码的字符集，去掉了一些容易混淆的字符
char[] character = { '2', '3', '4', '5', '6', '8', '9', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'J', 'K', 'L', 'M', 'N', 'P', 'R', 'S', 'T', 'W', 'X', 'Y','a','b','c' };
Random rnd = new Random();
//生成验证码字符串
for (int i = 0; i < 4; i++)
{
chkCode += character[rnd.Next(character.Length)];
}
Session["code"] = chkCode;
Bitmap bmp = new Bitmap(100, 40);
Graphics g = Graphics.FromImage(bmp);
g.Clear(Color.White);
//画噪线
for (int i = 0; i < 10; i++)
{
int x1 = rnd.Next(100);
int y1 = rnd.Next(40);
int x2 = rnd.Next(100);
int y2 = rnd.Next(40);
Color clr = color[rnd.Next(color.Length)];
g.DrawLine(new Pen(clr), x1, y1, x2, y2);
}
//画验证码字符串
for (int i = 0; i < chkCode.Length; i++)
{
string fnt = font[rnd.Next(font.Length)];
Font ft = new Font(fnt, 18);
Color clr = color[rnd.Next(color.Length)];
g.DrawString(chkCode[i].ToString(), ft, new SolidBrush(clr), (float)i * 18 + 8, (float)8);
}
//画噪点
for (int i = 0; i < 100; i++)
{
int x = rnd.Next(bmp.Width);
int y = rnd.Next(bmp.Height);
Color clr = color[rnd.Next(color.Length)];
bmp.SetPixel(x, y, clr);
}
Response.Buffer = true;
Response.ExpiresAbsolute = System.DateTime.Now.AddMilliseconds(0);
Response.Expires = 0;
Response.CacheControl = "no-cache";
Response.AppendHeader("Pragma", "No-Cache");
MemoryStream ms = new MemoryStream();
try
{
bmp.Save(ms, ImageFormat.Png);
Response.ClearContent();
Response.ContentType = "image/Png";
Response.BinaryWrite(ms.ToArray());

}
finally
{
bmp.Dispose();
g.Dispose();
}
#endregion
return View();
}

public string CheckCode(string valdatecode)
{
if ( Session["code"].ToString().ToUpper()== valdatecode.ToUpper())
{
return "true";
}
else
{
return "false";
}
}