Step by step explanation of basics in Asp.Net for beginners

INTRODUCTION:

   In this article I will explain you to how to create a new project in Asp.Net and some basics in design and coding in code behind file..!! If you want a detailed explanation of what is Asp.Net or how to install Visual Studio and get started then visit my previous post Geting started with Asp.Net which will guide you to get started !! 
GETTING STARTED...

  Here are some steps with screenshots to guide you for creating a project with some basic design..!!

STEP 1:

    Click visual studio 2013 and you will see the start up page

STEP 2:

    Click file and create a new project

STEP 3:

      Remember we are creating an ASP.NET web application so click visual c# which is under templates as shown below and click ASP.NET web application.Give your project a name .In this I have given as "Project1" and click on "Browse" to change the location of the project.By default it will be under 'c' drive but for the safer side its better to have under some other drive.Choose the path and click "ok"

 STEP 4:

       Next you will be prompted to select the type of template. Its better to choose "Web forms" as the visual studio by default, will create a web form and will include all the stuffs.For your convenience ,I have shown here with a web form . To follow along with me, better choose web form as a template and click 'ok' !! 

 STEP 5:

       If you had created a project successfully then you may see the page below! (If you don't see the page below then don't panic .Few may or may not get depending on the framework !!

STEP 6:

     By default you may see 'default.aspx' page under 'solution explorer' but to let you all know of how to create a webform(.aspx page), I have shown with an example below !! 
    Note:  If you know, what the .aspx and .cs page actually does then you can go to STEP 7 else read the story given below :)
      
WHAT IS .ASPX PAGE AND .CS PAGE ??  
   
     A web form has both design page and a code behind page(.cs)
Design page is nothing but a .aspx page .We will do all the design in that .aspx page ie. we can design the page with a text box,label and button etc . For better understanding consider a facebook page

    Note the word "Email or Phone" and "Password" is called as "label" and the boxes you see below is called as "textbox"
     We  have a "Login" button too !!
     (Note: Facebook is been developed in PHP the image above is just for better understanding of what is a webform)
     So,we will give our email id and password if we are existing user and we will click on "login". We can design the same page in Asp.Net too !! A page with username ,password,email id etc.. For designing all these stuffs we need an awesome page and that is nothing but a  '.aspx' page .!! We all must say thanks to .Net for giving such a wonderful and easy opportunity to create this cute web page :P  
    ok..!! now ,we have given our username and password and clicked login button..!! OMG !! we need something to happen as soon as we click on login button ! Isnt ?? So who is taking you to the profile page then ?? Its nothing but our cutie pie ".cs" page (code behind) . This cutie is responsible for all the redirection,navigation etc !! In short it will take care of coding part !! But how do we link both the pages ?? To know the solution..just follow the steps !!
     
     

STEP 6:
  
TO CREATE A NEW WEB FORM:
      Folks .!!.hope now you all know , what is a webform, a label , a textbox and for what these things are used for!! 
    To create a new web form right click your project which is under solution explorer and click on 'ADD'  and click new 'Web Form'
     Give webform a name, and in this I have created a form called 'webform1' .As soon as you create a webform you can see that in under your project !!

STEP 7:

   

      Now its time for designing!! You can do design in 2 ways .Either you can write the 'html' code or simply you can drag and drop it.Its always easy to drag and drop so click design tab as shown below!

STEP 8:

   

    Now to add a 'label'  click toolbox and drag and drop a label

NOTE: If you dont see toolbox then click on 'View' tab which you will find near 'File' and click 'ToolBox' .If you don't find solution explorer also you can go to view and click 'Solution Explorer' and you can see it appear in your window

STEP 9:

    As soon as  you drag and drop a label,right click it and select 'properties' you will get a window as shown below and in that select 'Text' and type some content for label eg.Enter your name and click enter..!! The name which you have given will appear .

STEP 10:

  

    To create a textbox , go to toolbox drag and drop a textbox !! The user will type their name(say) in that textbox and so you wont go to properties and type the content for 'Text' as we did while creating a 'label' !!

STEP 11:

    You will see the image below as you drag and drop the textbox !

 STEP 12:

  

      Now to create a button similarly go to toolbox and drag and drop a 'button' .But we need the name of the button to be somewhat meaningful !! So lets change the name of the button to 'submit'  .But how we do it usually?? 
    Similarly ,go to properties and type 'submit' in the 'Text'

STEP 13:

     As you change the name of the button from 'button' to 'submit' you will see the changes as shown below !!
      Now let us run the project
     To run , Click the green arrow as shown below!! you can also change the browser to run you project by clicking the drop down!!

STEP 14:

     If see the image below then that shows you have compiled your project  without any errors !!
     Clap your hands for successfully creating a project :)
   

STEP 15:

     When you click on 'submit' button in your web page nothing will happen !! That's because we haven't specified or instructed our beloved friend .cs page(code behind file) as to what to do on clicking the 'submit' button !! Remember as I had said earlier , .cs file is responsible for navigating or redirecting !! 

      You can find .cs file by clicking the expand button as shown below!!

STEP 16:

   Double click the submit button and it will take you to the code behind file !! There is nothing necessary for you to type any code ,The code you see below is autogenerated !! 

     You will see 2 methods one is pageload() and button1_click()

The button1 is nothing but your submit button !! An event will be generated when the user clicks the submit button..!! What event is that ?? It is "button click event" 

   Ok!! What is that button1_Click ?? I dont like that name and I may get confused if I add 2 or more buttons in my page !! Is there any way to change that damn name to something pretty ?? The answer is absolutely !!

   To  change that name,

   Click design and right click the button -> properties->Id 

   You will find Id under Misc and here you go !!you can change id of the button to something pretty !! 

   Remember Id of the controls is only for developer's understanding/convenience where as the text of the controls is for user's understanding.User may see only the text but not the id !!

STEP 17:

      As you can see below I have changed the 'ID' of the button!! But though you have changed the Id of the button you may not see changes in the code behind .This is because we have already invoked the "onclick event" of a button !!

    

  Go to the design page and you can see the onclick event for that button is already created !! Delete that particular line ie .Onclick="Button1_click" .

      Delete the already invoked event handler in code behind file .Now follow step 16 to change the 'id' of a button ,double click and method will be created in code behind !!    

  

STEP 18:

     We want the user to be navigated to 'WELCOME' page .So create a web form similarly and type some content in the design page as below !! I have created 'Welcome.aspx' 

STEP 19:

     

     After creating we are going to link the first page with the welcome page with a single line of code !!

      We are instructing the .Net that on clicking the 'submit' button we need user to be redirected to 'Welcome.aspx' 

       As you can see below I have written the line 

      Response.Redirect("~/Welcome.aspx",true);

    

IMPORTANT:   The web form must be in quotes and " ~/ " implies the root directory . The web form we created isn't under any folder .Its under the project(root) right ?? So we have specified "~/ "  .The "~" character specifies "root directory" !!

        

    

STEP 20:

  

   Go to webform1 and run the project.Its the first page we want to display so you must go to webform1.aspx and run it!! 

   You may see the pages as below !!

    Give any name and click 'submit'

   

    You will be redirected to this page and you can see your webform's name in the url !! I have given my webform's name as 'Welcome'  and so my url!!

    

   

CONCLUSION:

     So that's it folks !! Hope you all understood some basics in .Net !! Wasn't it easy ?? Your answer will be probably a big yesss !! Clap your hands and cheer yourself if you got the final output as above ! :)

But similarly,I need you all to cheer me up by sharing this article ,hitting the 'like' button or by giving your valuable comments !! Thanks for spending your precious time in reading this article !!!  :)