asp.net 图片验证码的HtmlHelper

好的。首先，我们需要了解一下什么是HtmlHelper。HtmlHelper是在MVC框架中用来简化HTML表单等元素的生成过程的一个类。在MVC架构中，所有的视图(View)都是通过一个类型为“System.Web.Mvc.HtmlHelper”的对象生成的。 “HtmlHelper”对象可以允许我们以一种简洁、明了且类型安全的方式编写视图。

接下来，我们来详细讲解ASP.NET图片验证码的HtmlHelper的完整攻略。步骤如下：

步骤1：创建验证码生成器

首先，我们要创建一个生成图片验证码的类。

using System;
using System.Collections.Generic;
using System.Drawing;
using System.Drawing.Drawing2D;
using System.Drawing.Imaging;
using System.Linq;
using System.Text;
using System.Web.Mvc;

namespace WebApplication1.HtmlHelpers
{
    public static class CaptchaHelper
    {
        private static readonly Random _random = new Random();
        private static readonly string[] _fonts = new[] { "Arial", "Courier", "Georgia", "Tahoma", "Verdana" };

        public static MvcHtmlString Captcha(this HtmlHelper htmlHelper)
        {
            const int width = 110;
            const int height = 36;
            const int fontSize = 18;
            const string chars = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";

            var bitmap = new Bitmap(width, height, PixelFormat.Format32bppArgb);
            var graphics = Graphics.FromImage(bitmap);
            graphics.SmoothingMode = SmoothingMode.AntiAlias;

            var color = Color.FromArgb(240, 240, 240);
            graphics.Clear(color);

            var path = new GraphicsPath();
            var family = new FontFamily(_fonts[_random.Next(_fonts.Length)]);
            var font = new Font(family, fontSize, FontStyle.Bold);

            var len = chars.Length;
            var sb = new StringBuilder();
            var x = 10;

            for (var i = 0; i < 6; i++)
            {
                var c = chars[_random.Next(len)];
                sb.Append(c);

                var y = (height - font.Height) / 2 + _random.Next(-2, 2);

                var matrix = new Matrix();
                var point = new PointF(x, y);
                matrix.RotateAt(_random.Next(-15, 15), point);
                path.AddString(c.ToString(), family, (int) FontStyle.Bold, fontSize, point, StringFormat.GenericDefault);
                path.Transform(matrix);

                x += fontSize;
            }

            var pen = new Pen(Color.FromArgb(_random.Next(0, 100), _random.Next(0, 100), _random.Next(0, 100)), 3);
            graphics.DrawPath(pen, path);

            bitmap.Save(htmlHelper.ViewContext.HttpContext.Response.OutputStream, ImageFormat.Gif);
            htmlHelper.ViewContext.HttpContext.Response.ContentType = "image/gif";

            graphics.Dispose();
            bitmap.Dispose();

            return MvcHtmlString.Empty;
        }
    }
}

这个类有一个名为“Captcha”的静态方法，该方法生成一张验证码图片。在该方法内部，我们使用了Graphics类生成了一张指定大小的空白图片，然后选择了一个随机的字体，使用了GraphicsPath类绘制了验证码字符并进行了旋转处理，最终输出了该图像。

步骤2：添加HtmlHelper扩展方法

然后，我们需要在MVC应用程序中创建扩展HtmlHelper类。在这个类中，我们添加了一个名为“Captcha”的方法，该方法返回一个MvcHtmlString，内容为生成的验证码图片。

using System.Web.Mvc;
using WebApplication1.HtmlHelpers;

namespace WebApplication1
{
    public static class HtmlHelperExtensions
    {
        public static MvcHtmlString Captcha(this HtmlHelper htmlHelper)
        {
            return CaptchaHelper.Captcha(htmlHelper);
        }
    }
}

步骤3：在视图中使用HtmlHelper方法

最后，我们在视图中使用这个HtmlHelper方法来生成验证码图片。

@using WebApplication1.HtmlHelpers
<!DOCTYPE html>
<html>
<head>
    <title>ASP.NET MVC Captcha Example</title>
</head>
<body>
    <form method="post">
        <div>
            @Html.Captcha()
        </div>
        <br />
        <input type="submit" value="Submit" />
    </form>
</body>
</html>

这里使用了Html.Captcha()方法来生成验证码图片。

示例1：ASP.NET MVC 登录表单中使用图片验证码

下面是一个例子，演示如何在ASP.NET MVC应用程序中使用图片验证码来保护登录页面。用户输入用户名和密码后，如果输入正确的验证码图片，才能登录成功。否则，系统不允许用户登录。

@using WebApplication1.HtmlHelpers
@model LoginViewModel
<!DOCTYPE html>
<html>
<head>
    <title>Login Page</title>
</head>
<body>
    @using (Html.BeginForm("Login", "Account", FormMethod.Post))
    {
        <div>
            <label for="UserName">User Name:</label>
            <br />
            @Html.TextBoxFor(m => m.UserName)
        </div>
        <div>
            <label for="Password">Password:</label>
            <br />
            @Html.PasswordFor(m => m.Password)
        </div>
        <div>
            <label for="Captcha">Captcha:</label>
            <br />
            @Html.Captcha()
        </div>
        <br />
        <input type="submit" value="Login" />
    }
</body>
</html>

在控制器中，我们检查用户输入的验证码与生成的验证码是否一致。如果一致，再做其他操作：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace WebApplication1.Controllers
{
    public class AccountController : Controller
    {
        // GET: Account
        public ActionResult Login()
        {
            return View();
        }

        [HttpPost]
        public ActionResult Login(LoginViewModel model, string returnUrl)
        {
            if (!ModelState.IsValid)
            {
                return View(model);
            }

            if (Session["Captcha"] == null || Session["Captcha"].ToString() != model.Captcha)
            {
                ModelState.AddModelError("Captcha", "The captcha value is incorrect.");
                return View(model);
            }

            // Login logic here...

            return Redirect(returnUrl ?? "/");
        }
    }
}

示例2：ASP.NET核心 MVC 中使用图片验证码

下面是一个示例，演示如何在ASP.NET Core MVC应用程序中使用图片验证码保护登录页面。

@using WebApplication1.HtmlHelpers
@model LoginViewModel
<!DOCTYPE html>
<html>
<head>
    <title>Login Page</title>
</head>
<body>
    <form asp-controller="Home" asp-action="Login" method="post">
        <div>
            <label for="UserName">User Name:</label>
            <br />
            <input type="text" asp-for="UserName" />
        </div>
        <div>
            <label for="Password">Password:</label>
            <br />
            <input type="password" asp-for="Password" />
        </div>
        <div>
            <label for="Captcha">Captcha:</label>
            <br />
            @Html.Captcha()
        </div>
        <br />
        <input type="submit" value="Login" />
    </form>
</body>
</html>