Handling Dynamic Images in ASP.NET 3.5 AJAX Applications - About the Data Storage

(Page 3 of 5 )

In this sample, the GuestBook.xml file under the App_Data folder is used to store the message information submitted by users. Moreover, the other two classes, GuestBook and Comment, are auxiliary classes to maintain this kind of data. The following defines the schema of this .xml file and already entered data:

<?xml version="1.0"?>

<GuestBook xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns="http://demo.126.com/">

<comment name="jime" text="hi,good work." />

<comment name="Mike" text="Thank you. This helps me a lot!" />

<comment name="John" text="I like your ASP.NET AJAX article. Would you please provide the related source code?" />

</GuestBook>

Next, the SQL Server 2005 database myNorthWind.mdf with only a table namedcodetableis defined to persist the verifying codes to help generate the verifying picture. In this sample, we put a string, 'GenerateCAPTCHATest' to the field Code in the codetable table to be used to generate the verification code (five characters are selected at random here).

Next, let us delve into the most interesting point in this sample.

Using GDI+ to Create the Verifying Picture in the Custom HTTP Handler

In this sample, we mainly employ two techniques to hold up the possible robot action. One is to use the above-introduced ASP.NET AJAX Toolkit control, NoBot, which is designed to achieve the result from the angle of time. In other words, only the data entered within specified time is allowed. The other solution is to take the traditional action, which is to draw some characters commingled with some pictures so that only users entering the specified correct characters can continue to take the next step.

For convenience, let's again look at the pictures which  contain the letters users are required to enter, as shown Figure 5 below.

Figure 5-only users that are able to enter the letters within the picture below is allowed to leave work

In this sample, to accomplish the above second blocking solution we have recourse to a custom HTTP handler, GenerateCAPTCHA.ashx. As you have guessed, all the secrets behind the scene are finished within the important function named ProcessRequest, defined in this HTTP handler. The following lists the complete source code of this function.

// render the verification code

public void ProcessRequest (HttpContext context)

{

// Create the Bitmap

using (Bitmap objBitmap = new Bitmap(_width, _height, PixelFormat.Format32bppArgb))

{

// create the canvas

using (Graphics objGraphics = Graphics.FromImage(objBitmap))

{

//specify the smoothing mode

objGraphics.SmoothingMode = SmoothingMode.AntiAlias;

//Define a rectangle to render the verification code

Rectangle rect = new Rectangle(0, 0, _width, _height);

 

//define a brush with specified hatching style

HatchBrush hBr = new HatchBrush(HatchStyle.WideDownwardDiagonal, Color.Yellow, Color.White);

// create a rectangle for rendering picture

objGraphics.FillRectangle(hBr, rect);

hBr.Dispose();

 

// define the character offset in the string

int charOffset = 0;

//compute the width for each character

double charWidth = Convert.ToDouble(_width) / Convert.ToDouble(_randomTextLength);

//look on per character as a rectangle so as to twist it easily

Rectangle rectChar;

// define the fond style

Font fnt = null;

 

//first use a black color brush to render the letter within the rectangle,

//then twist the rectangle, and at last use the rectangle to draw

using (Brush br = new SolidBrush(Color.Black))

{

foreach (Char ch in _randomText)

{

fnt = GetFontStyle();

rectChar = new Rectangle(Convert.ToInt32(charOffset * charWidth), 0, Convert.ToInt32(charWidth), _height);

GraphicsPath gp = TextPath(ch.ToString(), fnt, rectChar);

TwistText(gp, rectChar);

objGraphics.FillPath(br, gp);

charOffset += 1;

}

}

// add some background noise points as well as the line noise

AddNoise(objGraphics, rect);

AddLine(objGraphics, rect);

// specify the ContentType of the Response object

//, and require when the drawing is finished return the result to the browser side

context.Response.ContentType = "Image/Jpeg";

context.Response.Clear();

// set the Cache-Control: no-cache

context.Response.Cache.SetCacheability(HttpCacheability.NoCache);

context.Response.BufferOutput = true;

context.Response.Flush();

objBitmap.Save(context.Response.OutputStream, ImageFormat.Jpeg);

}

 

HttpApplication app = context.ApplicationInstance;

//you can use the following two sentence to create a unique GUID to access the newly-generated verifying code

//here we simply hard code it

//Guid guid = System.Guid.NewGuid();

// string strGuid = guid.ToString();

string strGuid = "CAPTCHA";

if (strGuid != String.Empty)

{

HttpRuntime.Cache.Insert(strGuid, _randomText);

}

}

}

I've put enough comments in the code that additional explanation should not be necessary. As for the other helper functions used in it, you can refer to the source code, which can be downloaded at the end of this article.

Next: Creating the Sample .aspx Page >>
 

More ASP.NET Articles
More By Xianzhong Zhu

Comments On: Handling Dynamic Images in ASP.NET 3.5 AJAX Applications

>>> Be the FIRST to comment on this article!