In this article I will explain how to implement Captcha Image with Refresh Button in ASP.Net.
I had already explained in past “How to use Mondor’s MSCaptcha in ASP.Net”. In this article, I am extending it by adding a Refresh Button to refresh the Captcha image and use of CustomValidator for validating the Captcha against the entered Text.
 
 
Integrating the Mondor’s MSCaptcha in ASP.Net
The DLL of the Mondor’s Captcha is available along with the attached sample code. You simply need to place the DLL inside the BIN folder of your project and then register the control on the page as shown below.
<%@ Register Assembly="MSCaptcha" Namespace="MSCaptcha" TagPrefix="cc1" %>
 
 
HTML Markup
The following HTML Markup consists of a TextBox, the MSCaptcha control, an ImageButton to refresh the Captcha, a CustomValidator to validate the Captcha and a Button.
<table border="0" cellpadding="3" cellspacing="0">
<tr>
    <td colspan="3">
        Enter Text
        <asp:TextBox ID="txtCaptcha" runat="server"></asp:TextBox>
    </td>
</tr>
<tr>
    <td colspan="2">
        <cc1:CaptchaControl ID="Captcha1" runat="server" CaptchaBackgroundNoise="Low" CaptchaLength="5"
            CaptchaHeight="60" CaptchaWidth="200" CaptchaMinTimeout="5" CaptchaMaxTimeout="240"
            FontColor="#D20B0C" NoiseColor="#B1B1B1" />
    </td>
    <td>
        <asp:ImageButton ImageUrl="~/refresh.png" runat="server" CausesValidation="false" />
    </td>
</tr>
<tr>
    <td>
        <asp:CustomValidator ErrorMessage="Invalid. Please try again." OnServerValidate="ValidateCaptcha"
            runat="server" />
    </td>
    <td align="right">
        <asp:Button ID="btnSubmit" runat="server" Text="Submit" />
    </td>
    <td>
    </td>
</tr>
</table>
 
 
Refreshing the Captcha Image using Refresh Button
The Mondor’s MSCaptcha automatically refreshes the image when PostBack happens and hence there’s no additional programming required. I have simply added a ImageButton in order to Refresh the Captcha Image.
 
 
Validating the TextBox text against the Captcha Image in ASP.Net
For validation I am making use of ASP.Net CustomValidator with Server Side validation function. When the Button is clicked, the CustomValidator OnServerValidate event is triggered.
Note: For more information on how to use ASP.Net CustomValidator with Server Side validation function, please refer ASP.Net Custom Validator Server Side validation using OnServerValidate event
C#
protected void ValidateCaptcha(object sender, ServerValidateEventArgs e)
{
    Captcha1.ValidateCaptcha(txtCaptcha.Text.Trim());
    e.IsValid = Captcha1.UserValidated;
    if (e.IsValid)
    {
        ClientScript.RegisterStartupScript(this.GetType(), "alert", "alert('Valid Captcha!');", true);
    }
}
 
VB.Net
Protected Sub ValidateCaptcha(sender As Object, e As ServerValidateEventArgs)
    Captcha1.ValidateCaptcha(txtCaptcha.Text.Trim())
    e.IsValid = Captcha1.UserValidated
    If e.IsValid Then
        ClientScript.RegisterStartupScript(Me.GetType(), "alert", "alert('Valid Captcha!');", True)
    End If
End Sub
 
 
Web.Config Configuration
You will need to add the following handler to <httpHandlers> in <system.web> section of your Web.Config.
 
<add verb="GET" path="CaptchaImage.axd" type="MSCaptcha.CaptchaImageHandler, MSCaptcha"/>
 
And add the following handler to <handlers> in <system.webServer> section of your Web.Config.
 
<add name="CaptchaImage" verb="GET" path="CaptchaImage.axd" type="MSCaptcha.CaptchaImageHandler, MSCaptcha"/>
 
Create Captcha Image with Refresh Button in ASP.Net
 
Demo
 
 
Downloads