Step by Step Explanation For Creating a Registration Page in Asp.Net

INTRODUCTION:

       Hello friends!! In this article I will give a detailed explanation of how to create a Registration Page and store the registered data in a database(SQL server) but ,you must have known the basics in Asp.Net as to how to create a web form ,a text box and other such controls before continuing with this article. If you are not sure of how to do such basic things then read my article Basics in Asp.Net which will guide you step by step !!

GETTING STARTED..

   Follow the steps below and create a flawless registration page :)
  
STEP 1:  

     I have already created a registration page with simple controls and if you want to know of create a web page with simple controls read this article Basics in Asp.Net .
      Create a web form with 5 label ,5 text boxes and 2 buttons (Leave the last row(upload row) in the registration page .I will explain in great detail about that in next article)

If you want your web page look good then you can insert a 'table' by clicking Table tab found above(near File) and you can specify how many rows and columns you wish to create!! After creating table you can insert 'textbox' and 'labels' in an usual manner !!

STEP 2:

    You can see the red labels in the image above !! Those are nothing but validators !! 
   
WHAT IS A VALIDATOR ?? WHY DO WE USE IT?

    Look at the image below ....

   

  When we enter our correct email id /phone number and a password we will be navigated to the profile page but what happens when we enter some wrong email id or a password ?? We will get a error message as above !!
      So,who is checking all these email id and a password ?? Is that the our uncle Google(eg)  ??  The answer is no!!
   This is because our uncle Google  is busy all the time !! He doesn't have much time to do all these validation ..!!

WHO IS VALIDATING BEFORE SENDING TO OUR UNCLE ?
   
   Who is doing this breathtaking job ??
    It is nothing but the javaScript!
        Pretty !! Isn't ?? If we type all the stuffs(email id and password)and send it our uncle Google without validating then our uncle will take 30sec appx. to complete the validation and send the results back to the client(which may be your system/tablet/laptop/mobile)
      In order to let our uncle perform other stuffs,JavaScript came into being and said
     "Don't worry uncle !! I will help you !! I will be in each and every browser ,validate and send the form to you "!!
      So, JavaScript will be in each and every browser helps to validate and send the form to the server only if they are properly validated !!
      If there is some mismatch in the stuffs entered then javascript will throw back the error and lets user to correct !! 
     JavaScript performs other things too !! Since validation plays an important role in Asp.Net I explained with this story :)
    
HOW DO WE INCLUDE JAVASCRIPT IN ASP.NET??
     
       Ah dear folks !!! Your next question probably will be , Are we supposed to write any coding for js (JavaScript) to be included in Asp.Net for validation??
    My answer is  No !! Just a simple drag and drop will give life to javascript and it will help us and server to make things easier !! To include validator in web form follow the steps..

STEP 3:
     
     Go to toolbox and drag and drop 'RequiredFieldValidator' near the textbox. There are many validators but we are using this RequiredFieldValidator because we are telling the user that 'Entering text in the textbox is a required one'  We will discuss about other validators later !! 

STEP 4:

   

       Drag and drop the validator and right click that go to properties .

    Change the error message to "Please Enter your name" .This is the message that will be displayed when the user fails to enter the text in the textbox !! see image below for clear explanation !

 

STEP 5:

    But how to tell the js that we need to validate the textbox ??

   Click the validator as shown above and click source which will be near the design and you will see the page as below !!

   You will see a tag for RequiredFieldValidator and inside the tag,type this code

    

    ControlToValidate="TextBoxname"

   See image below for clear explanation !!

    
   "TextBoxname" is nothing but the "id" of the textbox to be validated. You can change the id by going to properties and change "id"which you will find under "Misc"
      
STEP 6:

      Click the webform1 (already created in my previous article Basics in Asp.Net .) and run the solution .

  When you click submit button without giving any name you will get the error message as above "Please Enter your name"
   This shows our JavaScript  is helping the server in validating !!

STEP 7:

     TO CREATE A PASSWORD FIELD ...
     
       Drag and drop a text field ,right click the box and click on properties you will find textmode .(see image below)Change the mode to 'password'
      When you change the mode to password,what ever text you type in that textfield will be hidden !! 

     
 Create a validation by following the similar steps !!   
 STEP 8:

      FOR VALIDATING THE EMAIL ... !!

      Validating email is somewhat different !! This is because we must not let users to enter some maid id which is not in proper format
       If the user enters xyz#gmail,com then we must prompt an error message saying it is not a proper format ..
     To do so, drag and drop RegularExpressionValidator and  also  'RequiredFieldValidator'  because you need to give the error message if the user fails to submit without entering the form and the RequiredFieldValidator is for checking whether the user enters 'email' in a proper format !!
      
    Right click the RegularExpressionValidator  go to properties,select ValidationExpression and you will get a pop up as below !! Select Internet email address and click ok!!

   Follow STEP 5 again to add "controlToValidate" in the source page !! It is must to follow step 5 because we must tell the .Net as to which control we must validate !!Add 'ControlToValidate' code for both .RegularExpressionValidator and  RequiredFieldValidator
     As you can see below,I have added that for all the controls !!

     STEP 9:
  
    FOR VALIDATING CONTACT NUMBER...

           Consider the user enters this  ^9a293!5%0  instead of entering the proper contact number in the field !! 
           Is there any way to validate phone number in .Net ?? Absolutely !!
      We humans will get damn angry if we see a form with such contact number but Wow JavaScript you have so much patience !! What ever wrong stuff the user enters you are giving a single error message alone :P Hats off JS !! :D
              Add the RequiredFieldValidator ,ControlToValidate,Regular ExpressionValidator . When you click ValidationExpression you may see Japanese phone number etc but not Indian Phone Number
          So,you are supposed to add this code manually

               ValidationExpression="^9\d{9}$"

 Add this inside Regular ExpressionValidator tab in source .For detailed explanation you can refer the image below !!

    

   
   So that's it if you want your web form to be appealing you can change the color of the text of Error message .You an find many such things in properties !!
     In my previous article I have shown to redirect to a particular page on clicking a button!! Similarly I have made the webform to be redirected to welcome page on clicking 'submit' .To know more about redirection read my article Basics in Asp.Net .

  Now that's it friends !!Run the solution. Go to first created web form (webform1.aspx) in this case and run it !!

  As you run it you will see the image below !! Notice when I type incorrect email id (incorrect format) JavaScript gives a message to enter correct email id !! Similarly you can test for all the fields ..When I click the button submit without giving contact number JS is giving error message .This is because we have included RequiredFieldValidator !!

   As I have entered all the fields in the proper format I am not getting any error and JavaScript is letting me to 'Submit' the form !

As soon as we have clicked the submit button we will be navigated to this welcome page.This is because of the code we have included in the code behind file !! 

   
   
CONCLUSION:

   Clap your hands and raise your collars if you have understood the concept better and created your own registration page !! Wasn't it easy?? I am expecting a big yesss from you ;) .If you still don't understand it better then don't worry practice a lot till you become a master !! Present your valuable comments below !! share and hit 'like' button to encourage me and help me post some more articles !! :) Thanks for spending your precious time in  reading this article !! Hope it helps you :)