In this article I will explain with an example, how to create Captcha Image with Refresh Button in ASP.Net using C# and VB.Net.
 
 

HTML Markup

Captcha implementation

Following controls are required for Captcha implementation.
TextBox – For capturing Captcha answer.
Image – For displaying Captcha image.
 

Adding ImageButton for refreshing Captcha

ImageButton – For refreshing Captcha.
 
CustomValidator – For validating Captcha.

Properties

ErrorMessage – For displaying error message when validation fails.
 

Events

The CustomValidator has been assigned with an OnServerValidate event handler for performing Captcha validation.
 
Button – For submitting the Form.
<table border="0" cellpadding="3" cellspacing="0">
    <tr>
        <td>Enter Text:</td>
        <td colspan="3"><asp:TextBox ID="txtCaptchaAnswer" runat="server"></asp:TextBox></td>
    </tr>
    <tr>
        <td>
            <asp:Image ID="imgCaptcha" runat="server" />
            <asp:ImageButton ImageUrl="~/images/refresh.png" runat="server" CausesValidation="false" OnClick="OnRefresh" />
        </td>
        <td><asp:CustomValidator ErrorMessage="Captcha invalid!" OnServerValidate="ValidateCaptcha" runat="server" /></td>
    </tr>
    <tr>
        <td></td>
        <td><asp:Button ID="btnSubmit" runat="server" Text="Submit" /></td>
    </tr>
</table>
 
 

Adding reference of ASPSnippets.Captcha DLL in project

1. Inside the Solution Explorer, right click on Project and then click on Add and then click on Reference.
 
2. Then, inside the Reference Manager window, click on Browse button.
 
3. Locate the ASPSnippets.Captcha and select it.
 
4. The ASPSnippets.Captcha DLL is now visible in the Reference Manager window. Select it and click OK button as shown below.
 
Finally, the ASPSnippets.Captcha DLL is now referenced.
 
 

Namespaces

You will need to import the following namespace.
C#
using ASPSnippets.Captcha;
 
VB.Net
Imports ASPSnippets.Captcha
 
 

Implementing Captcha in ASP.Net

In the code-behind, a property of class Captcha is created.
Note: The property is a ViewState property so that its value is preserved across PostBacks. For more information please refer Preserving state and values of Custom Properties across PostBack in ASP.Net.
 

Page_Load

Inside the Page_Load event handler, 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.
 
Finally, the Image control is set with the ImageData property.
C#
 
private Captcha Captcha
{
    get
    {
        return (Captcha)ViewState["Captcha"];
    }
    set
    {
        ViewState["Captcha"] = value;
    }
}
 
protected void Page_Load(object sender, EventArgs e)
{
    if (!this.IsPostBack)
    {
        this.Captcha = new Captcha(130, 40, 20f, "#FFFFFF", "#61028D", Mode.AlphaNumeric);
        imgCaptcha.ImageUrl = this.Captcha.ImageData;
    }
}
 
VB.Net
 
Private Property Captcha As Captcha
    Get
        Return CType(ViewState("Captcha"), Captcha)
    End Get
    Set(ByVal value As Captcha)
        ViewState("Captcha") = value
    End Set
End Property
 
Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles Me.Load
    If Not Me.IsPostBack Then
        Me.Captcha = New Captcha(130, 40, 20.0F, "#FFFFFF", "#61028D", Mode.AlphaNumeric)
        imgCaptcha.ImageUrl = Me.Captcha.ImageData
    End If
End Sub
 
 

Refreshing the Captcha Image using Refresh Button

When the Refresh ImageButton is clicked, the Refresh method of Captcha class is called which in turns refreshes the Captcha image.
Finally, the Image control’s ImageUrl property is updated with the ImageData property
C#
protected void OnRefresh(object sender, EventArgs e)
{
    this.Captcha.Refresh();
    imgCaptcha.ImageUrl = this.Captcha.ImageData;
}
 
VB.Net
Protected Sub OnRefresh(ByVal sender As Object, ByVal e As EventArgs)
    Me.Captcha.Refresh()
    imgCaptcha.ImageUrl = Me.Captcha.ImageData
End Sub
 
 

Validating the Captcha using CustomValidator in C# and VB.Net

When the Submit button is clicked, the OnCaptchaValidate event handler of the CustomValidator is executed.
Inside this event handler, the Captcha is validated using the IsValid method to which the Answer inputted by the User is passed.
If the IsValid method returns FALSE, the Error Message is displayed using the CustomValidator else the success message is displayed using JavaScript Alert Message Box.
C#
protected void ValidateCaptcha(object sender, ServerValidateEventArgs e)
{
    e.IsValid = this.Captcha.IsValid(txtCaptchaAnswer.Text.Trim());
    if (e.IsValid)
    {
        ClientScript.RegisterStartupScript(this.GetType(), "alert", "alert('Valid Captcha!');", true);
    }
}
 
VB.Net
Protected Sub ValidateCaptcha(ByVal sender As Object, ByVal e As ServerValidateEventArgs)
    e.IsValid = Me.Captcha.IsValid(txtCaptchaAnswer.Text.Trim())
    If e.IsValid Then
        ClientScript.RegisterStartupScript(Me.GetType(), "alert", "alert('Valid Captcha!');", True)
    End If
End Sub
 
 

Screenshot

 
 

Demo

View Demo
 
 

Downloads

Download Code