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.
This article will explain, how to add a Refresh Button to refresh the Captcha image and use CustomValidator for validating the Captcha control in ASP.Net using C# and VB.Net.
Note: For more details on how to integrate the Captcha in ASP.Net, please refer my article How to implement Captcha in ASP.Net.
 
 
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.
The ImageButton has been assigned a Refresh Icon in the ImageUrl property.
The CustomValidator has been assigned with OnServerValidate event handler.
Note: For more details on how to use ASP.Net CustomValidator with Server Side validation function, please refer ASP.Net Custom Validator Server Side validation using OnServerValidate event.
 
<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
When the Refresh ImageButton is clicked, the Captcha image is automatically refreshed.
 
 
Validating the Captcha using CustomValidator
When the Submit Button is clicked, the following event handler is executed.
Inside this event handler, the TextBox value is validated using the ValidateCaptcha method.
Then, using the UserValidated property of Captcha is verified and returned value is set inside the IsValid property of the ServerValidateEventArgs Argument.
Finally, if the IsValid is true, then success message is displayed in JavaScript Alert Message Box.
C#
protected void ValidateCaptcha(object sender, ServerValidateEventArgs e)
{
    e.IsValid = false;
    if (!string.IsNullOrEmpty(txtCaptcha.Text.Trim()))
    {
        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)
    e.IsValid = False
    If Not String.IsNullOrEmpty(txtCaptcha.Text.Trim()) Then   
        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 If
End Sub
 
 
Screenshot
Create Captcha Image with Refresh Button in ASP.Net
 
 
Demo
View Demo
 
 
Downloads
Download Code