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.
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"/>
Demo
Downloads