In this article I will explain with an example, how to implement Arithmetic Captcha in ASP.Net MVC.
Note: For beginners in ASP.Net MVC, please refer my article ASP.Net MVC Hello World Tutorial with Sample Program example.
 
 
Download ASPSnippets Captcha DLL
You can download the latest ASPSnippets.Captcha.dll from the following link.
Download DLL file
Note: You will need to add the reference of ASPSnippets.Captcha DLL in your project.
 
 
Model
The Model class consists of following properties.
public class PersonModel
{
    ///<summary>
    /// Gets or sets PersonId.
    ///</summary>
    public int? PersonId { get; set; }
 
    ///<summary>
    /// Gets or sets Name.
    ///</summary>
    public string Name { get; set; }
 
    ///<summary>
    /// Gets or sets Gender.
    ///</summary>
    public string Gender { get; set; }
 
    ///<summary>
    /// Gets or sets City.
    ///</summary>
    public string City { get; set; }
 
    ///<summary>
    /// Gets or sets ImageData.
    ///</summary>
    public string ImageData { get; set; }
 
    ///<summary>
    /// Gets or sets CaptchaAnswer.
    ///</summary>
    public string CaptchaAnswer { get; set; }
}
 
 

Adding reference of ASPSnippets.Captcha DLL in project

1. Inside the Solution Explorer, right click on Reference of your Project and then click on Add Reference.
ASP.Net MVC: Implement Arithmetic Captcha
 
2. Then, inside the Reference Manager window, click on Browse button.
ASP.Net MVC: Implement Arithmetic Captcha
 
3. Locate the ASPSnippets.Captcha and select it.
ASP.Net MVC: Implement Arithmetic Captcha
 
4. The ASPSnippets.Captcha DLL is now visible in the Reference Manager window. Select it and click OK button as shown below.
ASP.Net MVC: Implement Arithmetic Captcha
 
Finally, the ASPSnippets.Captcha DLL is now referenced.
ASP.Net MVC: Implement Arithmetic Captcha
 
 
Namespaces
You will need to import the following namespace.
using ASPSnippets.Captcha;
 
 
Controller
Inside the Controller, a property of class Captcha is created.
Note: The property is a TempData property. For more information please refer ASP.Net MVC: TempData Tutorial with example.
 
The Controller consists of following Action methods.
Action method for handling GET operation
Inside this Action method, Captcha object is initialized and its width, height, Font size, Font color, background color and Mode are set.
Note: The ASPSnippets.Captcha works in four different Modes i.e. Numeric, Alphabets, AlphaNumeric and Arithmetic. This article will use Arithmetic mode.
 
Then, an object of PersonModel class is created and its ImageData property is set with the ImageData property of Captcha class and returned to the View.
 
Action method for handling POST operation
This Action method accepts the PersonModel class object as parameter.
Inside this Action method, the Captcha is validated using the IsValid method which accepts the Answer inputted by the User.
If the validation fails then, the Error Message is set to a ViewBag object.
Finally, the ImageData property of PersonModel class is set with the ImageData property of Captcha and returned to the View.
public class HomeController : Controller
{
    public Captcha Captcha
    {
        get
        {
            return (Captcha)TempData["Captcha"];
        }
        set
        {
            TempData["Captcha"] = value;
        }
    }
 
    // GET: Home
    public ActionResult Index()
    {
        this.Captcha = new Captcha(100, 40, 20f, "#FFFFFF", "#61028D", Mode.Arithmetic);
        PersonModel person = new PersonModel();
        person.ImageData = this.Captcha.ImageData;
        return View(person);
    }
 
    [HttpPost]
    public ActionResult Index(PersonModel person)
    {
        if (this.Captcha.IsValid(person.CaptchaAnswer))
        {
            int personId = person.PersonId.Value;
            string name = person.Name;
            string gender = person.Gender;
            string city = person.City;
        }
        else
        {
            ViewBag.Error = "Captcha invalid";
        }
 
        person.ImageData = this.Captcha.ImageData;
        return View(person);
    }
}
 
 

View

HTML Markup
Inside the View, in the very first line the PersonModel class is declared as model for the View.
The View consists of an HTML Form which has been created using the Html.BeginForm method with the following parameters.
ActionName – Name of the Action. In this case it is Index.
ControllerName – Name of the Controller. In this case the name is Home.
FormMethod – It specifies the Form Method i.e. GET or POST. In this case it will be set to POST.
Inside the HTML Markup, the TempData object keeps the Captcha as key.
The Form consists of four TextBoxes and a DropDownList created using Html.TextBoxFor and Html.DropDownListFor method respectively.
There is also an HTML img element for displaying Captcha and HTML SPAN element for displaying error message when validation fails.
The Form also consists of a Submit button.
@model Captcha_MVC.Models.PersonModel
 
@{
    Layout = null;
}
 
<!DOCTYPE html>
 
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
</head>
<body>
    @{
        TempData.Keep("Captcha");
    }
    @using (Html.BeginForm("Index", "Home", FormMethod.Post))
    {
        <table cellpadding="0" cellspacing="0">
            <tr>
                <th colspan="2" align="center">Person Details</th>
            </tr>
            <tr>
                <td>Person Id: </td>
                <td>@Html.TextBoxFor(m => m.PersonId)</td>
            </tr>
            <tr>
                <td>Name: </td>
                <td>@Html.TextBoxFor(m => m.Name)</td>
            </tr>
            <tr>
                <td>Gender: </td>
                <td>
                    @Html.DropDownListFor(m => m.Gender, new List<SelectListItem>
                   { new SelectListItem{Text="Male", Value="M"},
                     new SelectListItem{Text="Female", Value="F"}}, "Please select")
                </td>
            </tr>
            <tr>
                <td>City: </td>
                <td>@Html.TextBoxFor(m => m.City)</td>
            </tr>
            <tr>
                <td><img src="@Model.ImageData" alt="Captcha" /></td>
                <td>
                    @Html.TextBoxFor(m => m.CaptchaAnswer)
                    <span style="color:red">@ViewBag.Error</span>
                </td>
            </tr>
            <tr>
                <td></td>
                <td><input type="submit" value="Submit" /></td>
            </tr>
        </table>
    }
</body>
</html>
 
 
Screenshot
ASP.Net MVC: Implement Arithmetic Captcha
 
 
Demo
View Demo
 
 
Downloads
Download Code