Registration Form With Captcha Image in C#

Introduction

In this article, I will explain how to create a registration form in ASP.NET C#. This article also explains how we use Stored Procedures instead of explicit SQL statements to add data from a form to a database.

registration form

Use the following procedure to create a sample.

Step 1: Create a database and add a table for storing the data as in the following:

table

Step 2: Create a Stored Procedure to store the records in the database as in the following:
  1. Create PROCEDURE [dbo].[sp_EmpInformation]  
  2. @UserName varchar(50),  
  3. @Password varchar(50),  
  4. @FirstName varchar(50),  
  5. @LastName varchar(50),  
  6. @Email varchar(50),  
  7. @PhoneNo varchar(50),  
  8. @Location varchar(50),  
  9. @Created_By varchar(50),  
  10. @ERROR VARCHAR(100) OUT  
  11. AS  
  12. BEGIN-- SET NOCOUNT ON added to prevent extra result sets from-- interfering with SELECT statements.                 
  13. SET NOCOUNT ON;  
  14. ---Checking Condition if User exists or not if user not exists returns different message if exists returns different message  
  15. IF NOT EXISTS(SELECT * FROM Employee_Information WHERE UserName=@UserName)  
  16. BEGIN INSERT INTO Employee_Information  
  17. (  
  18.     UserName,  
  19.     [Password],  
  20.     FirstName,  
  21.     LastName,  
  22.     Email,  
  23.     PhoneNo,  
  24.     Location,  
  25.     Created_By  
  26. )VALUES(@UserName,  
  27. @Password,  
  28. @FirstName,  
  29. @LastName,  
  30. @Email,  
  31. @PhoneNo,  
  32. @Location,  
  33. @Created_By  
  34. )  
  35. SET @ERROR=@UserName+' has registered successfully.'  
  36. END  
  37. ELSE  
  38.   BEGIN  
  39.       SET @ERROR=@UserName + ' has already exists.'  
  40.   END  
  41. End  

Step 3: Open Visual Studio and select create Web application.

Step 4: Add a new Web page Emp_Registration.aspx and design it as below:

  1. <div>  
  2.     <asp:ScriptManager ID="SM1" runat="server">  
  3.     </asp:ScriptManager>  
  4.     <table align="center">  
  5.         <tr>  
  6.             <td align="center" colspan="2">  
  7.                 <h2>  
  8.                     Registration Form</h2>  
  9.             </td>  
  10.         </tr>  
  11.         <tr>  
  12.             <td>  
  13.                 <asp:Label ID="lbluser" runat="server" Text="Username"></asp:Label>  
  14.             </td>  
  15.             <td>  
  16.                 <asp:TextBox ID="txtuser" runat="server"></asp:TextBox>  
  17.             </td>  
  18.         </tr>  
  19.         <tr>  
  20.             <td>  
  21.                 <asp:Label ID="lblpwd" runat="server" Text="Password"></asp:Label>  
  22.             </td>  
  23.             <td>  
  24.                 <asp:TextBox ID="txtpwd" runat="server" TextMode="Password"></asp:TextBox>  
  25.             </td>  
  26.         </tr>  
  27.         <tr>  
  28.             <td>  
  29.                 <asp:Label ID="lblcnfmpwd" runat="server" Text="Confirm Password"></asp:Label>  
  30.             </td>  
  31.             <td>  
  32.                 <asp:TextBox ID="txtcnmpwd" runat="server" TextMode="Password"></asp:TextBox>  
  33.             </td>  
  34.         </tr>  
  35.         <tr>  
  36.             <td>  
  37.                 <asp:Label ID="lblfname" runat="server" Text="FirstName"></asp:Label>  
  38.             </td>  
  39.             <td>  
  40.                 <asp:TextBox ID="txtfname" runat="server"></asp:TextBox>  
  41.             </td>  
  42.         </tr>  
  43.         <tr>  
  44.             <td>  
  45.                 <asp:Label ID="lbllname" runat="server" Text="LastName"></asp:Label>  
  46.             </td>  
  47.             <td>  
  48.                 <asp:TextBox ID="txtlname" runat="server"></asp:TextBox>  
  49.             </td>  
  50.         </tr>  
  51.         <tr>  
  52.             <td>  
  53.                 <asp:Label ID="lblemail" runat="server" Text="Email"></asp:Label>  
  54.             </td>  
  55.             <td>  
  56.                 <asp:TextBox ID="txtEmail" runat="server"></asp:TextBox>  
  57.             </td>  
  58.         </tr>  
  59.         <tr>  
  60.             <td>  
  61.                 <asp:Label ID="lblCnt" runat="server" Text="Phone No"></asp:Label>  
  62.             </td>  
  63.             <td>  
  64.                 <asp:TextBox ID="txtphone" runat="server"></asp:TextBox>  
  65.             </td>  
  66.         </tr>  
  67.         <tr>  
  68.             <td>  
  69.                 <asp:Label ID="lbladd" runat="server" Text="Location"></asp:Label>  
  70.             </td>  
  71.             <td align="left">  
  72.                 <asp:TextBox ID="txtlocation" runat="server"></asp:TextBox>  
  73.             </td>  
  74.         </tr>  
  75.         <tr>  
  76.             <td>  
  77.             </td>  
  78.             <td valign="middle">  
  79.                 <asp:UpdatePanel ID="UP1" runat="server">  
  80.                     <ContentTemplate>  
  81.                         <table>  
  82.                             <tr>  
  83.                                 <td style="height: 50px; width: 100px;">  
  84.                                     <asp:Image ID="imgCaptcha" runat="server" />  
  85.                                 </td>  
  86.                                 <td valign="middle">  
  87.                                     <asp:Button ID="btnRefresh" runat="server" Text="Refresh" OnClick="btnRefresh_Click" />  
  88.                                 </td>  
  89.                             </tr>  
  90.                         </table>  
  91.                     </ContentTemplate>  
  92.                 </asp:UpdatePanel>  
  93.             </td>  
  94.         </tr>  
  95.         <tr>  
  96.             <td>  
  97.                 Enter above captcha code :  
  98.             </td>  
  99.             <td>  
  100.                 <asp:TextBox ID="txtCaptcha" runat="server" Width="200px"></asp:TextBox>  
  101.             </td>  
  102.         </tr>  
  103.         <tr>  
  104.             <td align="left" colspan="2">  
  105.                 <asp:Button ID="btnsubmit" runat="server" Text="Save" OnClick="btnsubmit_Click" />  
  106.                   <asp:Button ID="btnReset" Text="Reset" runat="server" />  
  107.             </td>  
  108.         </tr>  
  109.         <tr>  
  110.             <td colspan="2">  
  111.                 <span style="color: Red; font-weight: bold">  
  112.                     <asp:Label ID="lblErrorMsg" runat="server"></asp:Label></span>  
  113.             </td>  
  114.         </tr>  
  115.     </table>  
  116. </div> 

Step 5: Go to the Emp_Registration.aspx.cs page and add code.

Step 6 : Add code for the Page Load as below:

  1. protected void Page_Load(object sender, EventArgs e)  
  2. {  
  3.     FillCapctha();  
  4. }  
  5.   
  6. void FillCapctha()  
  7. {  
  8.     try  
  9.     {  
  10.         Random random = new Random();  
  11.         string combination = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz";  
  12.         StringBuilder captcha = new StringBuilder();  
  13.         for (int i = 0; i < 6; i++)  
  14.         {  
  15.             captcha.Append(combination[random.Next(combination.Length)]);  
  16.             Session["captcha"] = captcha.ToString();  
  17.             imgCaptcha.ImageUrl = "GenerateCaptcha.aspx?" + DateTime.Now.Ticks.ToString();  
  18.         }
  19.     catch  
  20.     {  
  21.         throw;  
  22.     }  
  23. }

Step 7: Add code for the button Submit click as in the following:

  1. protected void btnsubmit_Click(object sender, EventArgs e)  
  2. {  
  3.     if (Session["captcha"].ToString() != txtCaptcha.Text)  
  4.         lblErrorMsg.Text = "Invalid Captcha Code";  
  5.      else  
  6.      {  
  7.          if (txtpwd.Text == txtcnmpwd.Text)  
  8.          {  
  9.              string UserName = txtuser.Text;  
  10.              string Password = txtpwd.Text;  
  11.              string ConfirmPassword = txtcnmpwd.Text;  
  12.              string FirstName = txtfname.Text;  
  13.              string LastName = txtlname.Text;  
  14.              string Email = txtEmail.Text;  
  15.              string Phoneno = txtphone.Text;  
  16.              string Location = txtlocation.Text;  
  17.              string Created_By = txtuser.Text;  
  18.              SqlConnection con = new SqlConnection(@"Data Source=.\sqlexpress;Initial Catalog=LMS;Integrated Security=True");  
  19.              con.Open();  
  20.              SqlCommand cmd = new SqlCommand("sp_EmpInformation", con);  
  21.              cmd.CommandType = CommandType.StoredProcedure;  
  22.              cmd.Parameters.AddWithValue("@UserName", UserName);  
  23.              cmd.Parameters.AddWithValue("@Password", Password);  
  24.              cmd.Parameters.AddWithValue("@FirstName", FirstName);  
  25.              cmd.Parameters.AddWithValue("@LastName", LastName);  
  26.              cmd.Parameters.AddWithValue("@Email", Email);  
  27.              cmd.Parameters.AddWithValue("@PhoneNo", Phoneno);  
  28.              cmd.Parameters.AddWithValue("@Location", Location);  
  29.              cmd.Parameters.AddWithValue("@Created_By", Created_By);  
  30.              cmd.Parameters.Add("@ERROR", SqlDbType.Char, 500);  
  31.              cmd.Parameters["@ERROR"].Direction = ParameterDirection.Output;  
  32.              cmd.ExecuteNonQuery();  
  33.              if (!string.IsNullOrEmpty(cmd.Parameters["@ERROR"].Value.ToString()))  
  34.              {  
  35.                  message = (string)cmd.Parameters["@ERROR"].Value;  
  36.              }  
  37.              con.Close();  
  38.             }  
  39.          else  
  40.          {  
  41.              Page.RegisterStartupScript("UserMsg""<Script language='javascript'>alert('" + "Password mismatch" + "');</script>");  
  42.          }  
  43.          lblErrorMsg.Text = message;  
  44.          ClearControls();  
  45.       }  
  46. }

Step 8: Add code for the Refresh button as in the following:

  1. protected void btnRefresh_Click(object sender, EventArgs e)  
  2. {  
  3.     FillCapctha();  
  4. }   

Step 9: Add another Webform GenerateCaptcha.aspx

Step 10: Add the following code on the page Load of GenerateCaptcha.aspx:

  1. Response.Clear();  
  2. int height = 30;  
  3. int width = 100;  
  4. Bitmap bmp = new Bitmap(width, height);  
  5. RectangleF rectf = new RectangleF(10, 5, 0, 0);  
  6. Graphics g = Graphics.FromImage(bmp);  
  7. g.Clear(Color.White);  
  8. g.SmoothingMode = SmoothingMode.AntiAlias;  
  9. g.InterpolationMode = InterpolationMode.HighQualityBicubic;  
  10. g.PixelOffsetMode = PixelOffsetMode.HighQuality;  
  11. g.DrawString(Session["captcha"].ToString(), new Font("Thaoma", 12, FontStyle.Italic), Brushes.Chocolate, rectf);  
  12. g.DrawRectangle(new Pen(Color.Blue), 1, 1, width - 2, height - 2);  
  13. g.Flush();  
  14. Response.ContentType = "image/jpeg";  
  15. bmp.Save(Response.OutputStream, ImageFormat.Jpeg);  
  16. g.Dispose();  
  17. bmp.Dispose();

Step 11: Press F5 to run the application.

Step 12: Add a new entry in the registration form as in the following:

Entry in registration form

Step 13: Records are stored in the database as below:
 
Records stored in the database

Conclusion

In this article, I have explained how to work with a registration form with Captcha feature and store data in SQL Server using Stored Procedure.