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.

Image page
Figure 1: Image page

Step 2: Write Catch image code

Catch image page
Figure 2: Catch image page

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

Catchimage.aspx.cs Code:

  1. using System;
  2. using System.Collections.Generic;
  3. using System.Linq;
  4. using System.Web;
  5. using System.Web.UI;
  6. using System.Web.UI.WebControls;
  7. // add needed resource file
  8. using System.Drawing;
  9. using System.Drawing.Drawing2D;
  10. using System.Drawing.Imaging;
  12. public partial class UI_Catchimage : System.Web.UI.Page
  13. {
  14. protected void Page_Load(object sender, EventArgs e)
  15. {
  16. Response.Clear();
  17. int height = 50;
  18. int width = 100;
  19. Bitmap bt = new Bitmap(width, height);
  21. RectangleF rectf = new RectangleF(7, 5, 0, 0);
  23. Graphics grph = Graphics.FromImage(bt);
  24. grph.Clear(Color.White);
  25. grph.SmoothingMode = SmoothingMode.AntiAlias;
  26. grph.InterpolationMode = InterpolationMode.HighQualityBicubic;
  27. grph.PixelOffsetMode = PixelOffsetMode.HighQuality;
  28. grph.DrawString(Session["ImgValue"].ToString(), new Font("Times New Roman", 13, FontStyle.Regular), Brushes.Blue, rectf);
  29. grph.DrawRectangle(new Pen(Color.Red), 1, 1, width - 2, height - 2);
  30. grph.Flush();
  31. Response.ContentType = "images/download.png";
  32. bt.Save(Response.OutputStream, ImageFormat.Jpeg);
  33. grph.Dispose();
  34. bt.Dispose();
  35. }
  36. }
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:

Design page
Figure 4: Design page

Design code:
  1. <%@ Page Title="" Language="C#" MasterPageFile="~/Master/Master.master" AutoEventWireup="true" CodeFile="singup.aspx.cs" Inherits="UI_singup" %>
  3. <asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
  4. </asp:Content>
  5. <asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
  6. <asp:ScriptManager ID="ScriptManager1" runat="server">
  7. </asp:ScriptManager>
  8. <div>
  9. <table style="border: solid 1px inherit; padding: 15px; position: relative; top: 50px;"
  10. >
  11. <tr>
  12. <td> Email ID </td>
  13. <td>
  14. <asp:TextBox ID="txtEmailID" runat="server" Width="200px"></asp:TextBox>
  15. </td>
  16. </tr>
  17. <tr>
  18. <td> Password </td>
  19. <td>
  20. <asp:TextBox ID="txtPassword" runat="server" TextMode="Password" Width="200px"></asp:TextBox>
  21. </td>
  22. </tr>
  23. <tr>
  24. <td>
  25. </td>
  26. <td>
  27. <asp:UpdatePanel ID="UpdateImage" runat="server">
  28. <ContentTemplate>
  29. <table>
  30. <tr>
  31. <td style="height: 40px; width:50px;">
  32. <asp:Image ID="btnImg" runat="server" />
  33. </td>
  34. </tr>
  35. </table>
  36. </ContentTemplate>
  37. </asp:UpdatePanel>
  38. </td>
  39. </tr>
  40. <tr>
  41. <td> Enter Display Image Code </td>
  42. <td>
  43. <asp:TextBox ID="txtImage" runat="server"></asp:TextBox>
  44. </td>
  45. </tr>
  46. <tr>
  47. <td></td>
  48. <td colspan="2">
  49. <asp:Button ID="btnRegiser" runat="server" Text="Sign Up" OnClick="btnRegister_Click" />
  50. </td>
  51. </tr>
  52. </table>
  53. </div>
  54. </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:
  1. using System;
  2. using System.Collections.Generic;
  3. using System.Linq;
  4. using System.Web;
  5. using System.Web.UI;
  6. using System.Web.UI.WebControls;
  7. using System.Text;
  9. public partial class UI_singup : System.Web.UI.Page
  10. {
  11. protected void Page_Load(object sender, EventArgs e)
  12. {
  13. if (!IsPostBack)
  14. {
  15. FillImageText();
  16. }
  17. }
  18. void FillImageText()
  19. {
  20. try
  21. {
  22. Random rdm = new Random();
  23. string combination = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz";
  24. StringBuilder ImgValue = new StringBuilder();
  25. for (int i = 0; i < 5; i++)
  26. {
  27. ImgValue.Append(combination[rdm.Next(combination.Length)]);
  28. Session["ImgValue"] = ImgValue.ToString();
  29. btnImg.ImageUrl = "catchimage.aspx?";
  30. }
  31. }
  32. catch
  33. {
  34. throw;
  35. }
  36. }
  37. protected void btnRegister_Click(object sender, EventArgs e)
  38. {
  39. if (Session["ImgValue"].ToString() != txtImage.Text)
  40. {
  41. Response.Write("Invalid Image Code");
  42. }
  43. else
  44. {
  45. Response.Write("Valid Image Code");
  46. }
  47. FillImageText();
  48. }
  50. }
Now complete your code to run.

Match code
Figure 2: Match code

mismatch code
Figure 6: Mismatch code

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