Home > ASP.Net, Javascript > Create Captcha Image With Refresh Button in ASP.Net

Create Captcha Image With Refresh Button in ASP.Net


Hi all,

try this example to Create Captcha Image With Refresh Button in ASP.Net

1- Open VS 2010 and create a new Website

2- Add new Page and from ToolBox add the following Controls to be like this :

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript">
function Captcha() {
var img = document.getElementById('<%= Image1.ClientID %>');
img.src = "Image.aspx?id=" + Math.random(); ;
}
</script>
</head>
<body>
<form id="form1" runat="server">
<table>
<tr>
<td>
<asp:Image ID="Image1" runat="server" ImageUrl="Image.aspx" />
</td>
<td>
<asp:HyperLink ID="HyperLink1" runat="server" onclick="javascript:Captcha();" NavigateUrl="#">Refresh captcha</asp:HyperLink>
</td>
</tr>
<tr>
<td>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
</td>
<td>
<asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ErrorMessage="*"
ControlToValidate="TextBox1" ForeColor="#FF3300"></asp:RequiredFieldValidator>
<asp:Label ID="Label1" runat="server" Text=""></asp:Label>
</td>
</tr>
<tr>
<td>
<asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="check" />
</td>
<td>
</td>
</tr>
</table>
</form>
</body>
</html>

3-In Code behind add the following Code :


using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{

}
}
protected void Button1_Click(object sender, EventArgs e)
{
if (Session["Number"].ToString().Trim() == TextBox1.Text)
{
try
{
Label1.ForeColor = System.Drawing.Color.Green;
Label1.Font.Size = FontUnit.Larger;
Label1.Text = "correct";
}
catch (Exception ex)
{

}
}
else
{
Label1.ForeColor = System.Drawing.Color.Red;
Label1.Font.Size = FontUnit.Larger;
Label1.Text = "Try again";
}
}
}

4- Add new Page Called “Image.aspx” and In Code behind add the following Code :


using System;
using System.Web;
using System.Drawing;
using System.Drawing.Imaging;
using System.Web.SessionState;

public partial class Image : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
Random Rand = new Random();
int iNum = Rand.Next(10000, 99999);
Bitmap Bmp = new Bitmap(90, 50);
Graphics Gfx = Graphics.FromImage(Bmp);
Font Fnt = new Font("Verdana", 12, FontStyle.Bold);
Gfx.DrawString(iNum.ToString(), Fnt, Brushes.Yellow, 15, 15);
// Create random numbers for the first line
int RandY1 = Rand.Next(0, 50);
int RandY2 = Rand.Next(0, 50);
// Draw the first line
Gfx.DrawLine(Pens.Yellow, 0, RandY1, 90, RandY2);
// Create random numbers for the second line
RandY1 = Rand.Next(0, 50);
RandY2 = Rand.Next(0, 50);
// Draw the second line
Gfx.DrawLine(Pens.Yellow, 0, RandY1, 90, RandY2);
Bmp.Save(Response.OutputStream, ImageFormat.Gif);
Session["Number"] = iNum;
}
}

Hope this helps

Good Luck.

Advertisements
Categories: ASP.Net, Javascript
  1. No comments yet.
  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: