Create Captcha Image Control In ASP.NET

Rakesh

C#ASP.NET ControlASP.NET Image ControlCaptcha Image ControlCreate Captcha Image

18 Comments

Join the conversation! Your thoughts help the community grow.

Pramod Peyyala8y ago
It's Very Nice Artical
Santhakumar Munuswamy11y ago
Good one
Sibeesh Venu11y ago
Nice Share
- Rakesh11y ago
  Thanks Sibeesh Venu
Muhammad Aqib Shehzad11y ago
nice elaboration, good article
- Rakesh11y ago
  thanks Aqib Shehzad
Humayun Kabir Mamun11y ago
Nice...
- Rakesh11y ago
  thanks Humayun Kabir Mamun
Nilesh Jadav11y ago
Good work on Captcha
- Rakesh11y ago
  Thanks Nilesh Jadav
Harshad Pansuriya11y ago
Nice one
- Rakesh11y ago
  thanks Harshad
Debendra Dash11y ago
nice one.....
- Rakesh11y ago
  Thanks Debendra Dash
Praveen Kumar11y ago
Awesome
- Rakesh11y ago
  thanks Praveen Kumar
Rajeesh Menoth11y ago
Nice One..!!
- Rakesh11y ago
  thanks Rajeesh Menoth

Now many websites or applications create captcha image text validation for new registration or security. We will see step by step how to create image text value validation for textbox data pass.

Step 1: Create catch image page with suitable name.

Figure 1: Image page

Step 2: Write Catch image code

Figure 2: Catch image page

Now write the following code to create text image value on catchimage.aspx.cs page.

Catchimage.aspx.cs Code:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
// add needed resource file
using System.Drawing;
using System.Drawing.Drawing2D;
using System.Drawing.Imaging;
public partial class UI_Catchimage : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
Response.Clear();
int height = 50;
int width = 100;
Bitmap bt = new Bitmap(width, height);
RectangleF rectf = new RectangleF(7, 5, 0, 0);
Graphics grph = Graphics.FromImage(bt);
grph.Clear(Color.White);
grph.SmoothingMode = SmoothingMode.AntiAlias;
grph.InterpolationMode = InterpolationMode.HighQualityBicubic;
grph.PixelOffsetMode = PixelOffsetMode.HighQuality;
grph.DrawString(Session["ImgValue"].ToString(), new Font("Times New Roman", 13, FontStyle.Regular), Brushes.Blue, rectf);
grph.DrawRectangle(new Pen(Color.Red), 1, 1, width - 2, height - 2);
grph.Flush();
Response.ContentType = "images/download.png";
bt.Save(Response.OutputStream, ImageFormat.Jpeg);
grph.Dispose();
bt.Dispose();
}
}

Step 3: Add Sing Up page.

Add sing up Web form

Figure 3: Add sign up Web form

Now write design code using some ASP.NET control like textbox control, button control, and image control to display text value as image and Ajax script manager control. Update panel control as in the following design code.

Singup.aspx design page:

Figure 4: Design page

Design code:

<%@ Page Title="" Language="C#" MasterPageFile="~/Master/Master.master" AutoEventWireup="true" CodeFile="singup.aspx.cs" Inherits="UI_singup" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<div>
<table style="border: solid 1px inherit; padding: 15px; position: relative; top: 50px;"
>
<tr>
<td> Email ID </td>
<td>
<asp:TextBox ID="txtEmailID" runat="server" Width="200px"></asp:TextBox>
</td>
</tr>
<tr>
<td> Password </td>
<td>
<asp:TextBox ID="txtPassword" runat="server" TextMode="Password" Width="200px"></asp:TextBox>
</td>
</tr>
<tr>
<td>
</td>
<td>
<asp:UpdatePanel ID="UpdateImage" runat="server">
<ContentTemplate>
<table>
<tr>
<td style="height: 40px; width:50px;">
<asp:Image ID="btnImg" runat="server" />
</td>
</tr>
</table>
</ContentTemplate>
</asp:UpdatePanel>
</td>
</tr>
<tr>
<td> Enter Display Image Code </td>
<td>
<asp:TextBox ID="txtImage" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td></td>
<td colspan="2">
<asp:Button ID="btnRegiser" runat="server" Text="Sign Up" OnClick="btnRegister_Click" />
</td>
</tr>
</table>
</div>
</asp:Content>

Now write the following code to display text image control from catchimage.aspx page to singup.aspx as in the following code:

Singup.aspx.cs code:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Text;
public partial class UI_singup : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
FillImageText();
}
}
void FillImageText()
{
try
{
Random rdm = new Random();
string combination = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz";
StringBuilder ImgValue = new StringBuilder();
for (int i = 0; i < 5; i++)
{
ImgValue.Append(combination[rdm.Next(combination.Length)]);
Session["ImgValue"] = ImgValue.ToString();
btnImg.ImageUrl = "catchimage.aspx?";
}
}
catch
{
throw;
}
}
protected void btnRegister_Click(object sender, EventArgs e)
{
if (Session["ImgValue"].ToString() != txtImage.Text)
{
Response.Write("Invalid Image Code");
}
else
{
Response.Write("Valid Image Code");
}
FillImageText();
}
}

Now complete your code to run.

Figure 2: Match code

Figure 6: Mismatch code

I hope you understood how to create an image text value.