Contents

Tuesday, 28 June 2016


Why HTTP is called stateless protocol?

Http is called stateless protocol because each user request  for a page is served without storing the previous request. All the request are treated differently.  So after rendering it has no clue of the previous request. It doesn't maintain any state or session by its own.

We may see this with a help of an example.

In our example i will input my name and blog name in two textboxes. After that when i click save button i will store these in two variables and when the restore button is pressed it should restore the value from these variables. Lets see what happens.

Design



Code Behind



Output


After clicking save button:



After clicking restore button:


Surprise.....!! After clicking restore button then also the textboxs are blank. This is because the http protocols are stateless. So the variables used in the program(i.e.  name and blog) cannot retain their values after button click.

So to solve this we have many techniques which will be discussed in the upcoming post.


What is isPostback?

Postback is a way to send information from the client  to the server and after processing it back to the client. So sometimes in our project we need to check whether the page loading is done by the user action(for eg. Button  click) or it is an initial loading of the page. To check this we have a property of the page called isPostback property.

It is mainly used in pageloads to check whether the page loading is done by the initial request or not. 

Let  us look one example to make this more clear.

For example, if we want to  display a name as "guest" in a label on the initial loading of the page and then take a username from the user and display it in that label.

To do this we need to keep in mind that we need the name "guest" only when the page is first loaded and after the button  click we need to show the name of the user that is entered in the textbox.

Design




Code Behind


Output

On initial load:



After entering my name and clicking the display button:


Thursday, 23 June 2016


ASP.NET Page Life Cycle Events

In previous post i told you about Button_Click() event. This event was called when we click a button. In the similar way, ASP.NET page has life cycle events and methods which are called when the page is executed. When a page is requested by the user it will first load it into the server memory and then process it and displays it into the browser. When we close the browser it unloads the content from the memory. All these steps events are called to perform each take. This happens automatically. We can even override these events for our application.

Page Life Cycle Events

  • PreInit
It is the first event in the life cycle. It checks the IsPostBack property i.e the page is loaded for the first time or not. This event also sets the master page if it is used in the application(Details of Master page will be covered later).

        protected void Page_PreInit(object sender, EventArgs e)
        {

        }

  • Init
 This event initialize all the controls and its control properties.

         protected void Page_Init(object sender, EventArgs e)
        {

        }

  • InitComplete
It is raised when the initialization is complete. Here viewstate variables are loaded.

        protected void Page_InitComplete(object sender, EventArgs e)
        {

        }

  • PreLoad
 In this event postback data and viewstate are loaded.

        protected void Page_PreLoad(object sender, EventArgs e)
        {

        }

  • Load
In this event the page is loaded. We can add code in this event if we want something to be done when the page is loaded. For example, if we want to check the IsPostback() property we can write it here.

        protected void Page_Load(object sender, EventArgs e)
        {

        }

  •  Control Events
 This event handles the postback events like button click, TextBox control's TextChanged events.

        protected void Button1_Click(object sender, EventArgs e)
        {

        }


  • LoadComplete
 This event show the end of page loading.

        protected void Page_LoadComplete(object sender, EventArgs e)
        {

        }

  • PreRender
This event is called just before the output in rendered. 

        protected void Page_PreRender(object sender, EventArgs e)
        {

        }

  • PreRenderComplete
It ensures the completion of PreRender event.

        protected void Page_PreRenderComplete(object sender, EventArgs e)
        {

        }
  • SaveStateComplete
 All control's state are saved. Viewstate information is also saved.

        protected void Page_SaveStateComplete(object sender, EventArgs e)
        {

        }

  • UnLoad
This event is the last event called to unload all the controls recursively and at last the page itself.

        protected void Page_UnLoad(object sender, EventArgs e)
        {

        }
Now let us code these things.
Create a page having one label and a button for button click event.
Design
 
CodeBehind

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace page_life_cycle_event
{
    public partial class WebForm1 : System.Web.UI.Page
    {
       
        protected void Page_PreInit(object sender, EventArgs e)
        {
            Label1.Text = Label1.Text + "</br>" + "PreInit";
        }
        protected void Page_Init(object sender, EventArgs e)
        {
            Label1.Text = Label1.Text + "</br>" + "Init";
        }
        protected void Page_InitComplete(object sender, EventArgs e)
        {
            Label1.Text = Label1.Text + "</br>" + "InitComplete";
        }
        protected void Page_PreLoad(object sender, EventArgs e)
        {
            Label1.Text = Label1.Text + "</br>" + "PreLoad";
        }
        protected void Page_Load(object sender, EventArgs e)
        {
            Label1.Text = Label1.Text + "</br>" + "Load";
        }

        protected void Button1_Click(object sender, EventArgs e)
        {
            Label1.Text = Label1.Text + "</br>" + "Button Click";
        }
        protected void Page_LoadComplete(object sender, EventArgs e)
        {
            Label1.Text = Label1.Text + "</br>" + "LoadComplete";
        }
        protected void Page_PreRender(object sender, EventArgs e)
        {
            Label1.Text = Label1.Text + "</br>" + "PreRender";
        }
        protected void Page_PreRenderComplete(object sender, EventArgs e)
        {
            Label1.Text = Label1.Text + "</br>" + "PreRenderComplete";
        }
        protected void Page_SaveStateComplete(object sender, EventArgs e)
        {
            Label1.Text = Label1.Text + "</br>" + "SaveStateComplete";
        }
        protected void Page_UnLoad(object sender, EventArgs e)
        {
            Label1.Text = Label1.Text + "</br>" + "Unload";
        }
    }
}

Now just run the application.

When page loads and the output will be:



After Button Click:



Thursday, 16 June 2016


Creating a simple Web Application

Now let us look at a simple example in which we will make three TextBoxs(textbox are use to take input from user) and a button(buttons are used to submit a page to the server). We will input 2 number in the first two TextBoxs and the last textbox will contain the sum of two numbers when we will click on the button.

Now let us begin by designing the page.

  • So first we need to open an asp.net web application which i already explain you how to do it in my chapter 1 please refer it if needed. After that a default.aspx page display. It is the default page which is loaded when you open a new web application. This page already contains some default styling. Follow picture shows the design and code view of default.aspx.
       DESIGN VIEW


        CODE VIEW


  • If you need a blank web page/form then you can simply add it by going to the solution explorer in that you can find the web application name(here it is Web Application7) right click on that then click on add then new item as show below.
 


  • A new dialog box opens up where you can find Web Form. Just click on that give a name to the webpage below(here i am keeping WebForm1.aspx and the click on add.
 
  •  A new page will display in the middle of the screen. And if you click on the design view button you can see that it is a blank page which has nothing on it. 
        DESIGN VIEW

        
  • Now in the design view type anything like "First Number" after that simply drag and drop a textbox from the toolbox present on your left side of the screen. Repeat it for the "Second Number" after that add a button for the page submission(If Toolbox is not present then you can add it by going to View -> Toolbox or simple pressing Ctrl+Alt+X). After doing that the design would look like this.

  •   Now in order to manipulate any property of the controls we can do it in the property window. For example if we need to change the name of the Button to "Calculate", first click on the button which need the change after that go to property window which is on the right side. There you can find a field named Text, there you can change the name for Button to Calculate.
  • Now our design is complete. Lets move onto the code behind part where we will do a little bit of coding. This is needed because if we will run this page without coding the page will not do the task which we want on button click. The page will display as it is as we made in the design view. It will also take values in textbox but the button click event will not work and also the result will not be displayed in the third textbox. 
  • Now in order to move to the code behind double click on the button in the design view. The code behind will look like this.
  • You can see the code behind named WebForm.aspx.cs. This is where we write the C# code. In this page you may see a function like this.
           protected void Button1_Click(object sender, EventArgs e)
         {

          }
This is the button click event. This is called when the button is click. Leave the rest part on the code in this page as i will cover it in the upcoming posts. 
  • Now in this function we have to perform addition operation and display the result in the third TextBox. So in order to do that we have to fetch the values entered in the textbox. This can be done by simply writing the "ID of the Textbox".Text (ID can be found of the textbox just by click the textbox which you want to find the ID and go to property window and you may check the Id from the ID field). The following is the code.
       protected void Button1_Click(object sender, EventArgs e)
        {
            int res=Convert.ToInt32(TextBox1.Text) + Convert.ToInt32(TextBox2.Text);
            TextBox3.Text = Convert.ToString(res);
        }

I think some of you are surprised with this code as some are thinking why did i use Convert.ToInt. We can simple write the following code.
     protected void Button1_Click(object sender, EventArgs e)
        {
            TextBox3.Text =TextBox1.Text + TextBox2.Text;
        }
Sorry to say the above code will not work as expected because Textboxs always return string values. So if we right the above code it will concatenate the two string and show the result in the third textbox but we don't want that. That is why we converted both the textboxs to int and stored in the res variable which is also an integer type. After that we convert the integer to string as Textboxs accepts string values only.

  • Now the are done with the program. Now just run the program by clicking on the play button on the to of the page. The output will look like this.

To stop the running application close the browser and then click on stop present in the upper portion of the application.

  • Now we are left with one more thing. We can see that the third textbox value can be manipulated by changing the vale from 24 to any other value but we don't want that. We can solve the problem by changing the property of that textbox. Set the Enabled property to false. This will do it. Now when we run the application we are disabled with the privilege of changing the value of the third TextBox. and that TextBox turns to grey in colour. After the change it will look like this.
  
  • Now to save the application press Ctrl+Shift+S or go to File -> Save All.

Monday, 6 June 2016


Visual Studio IDE Basic Components

There are several windows found when you open a new project in Visual Studio they are as follows:

  • Toolbox on the left
  • Property window on the right
  • Solution Explorer also on the right
  • Design/Code in the middle

Toolbox

Toolbox consists of many different controls that can be used by the developer on the webpage to design it in the desired manner that he likes. It ease the developer from hard coding the controls as this toolbox allows a developer to just drag and drop controls from the toolbox to the webpage. Source code will be effected automatically when the design is changed. Examples of controls found in toolbox are TextBox control,Buttons,Labels etc.

Property Window

The properties windows shows all the properties of each control of the toolbox which are added to the design of the web application. For example, we can change the TextMode property of the TextBox from singleline to password for login purposes.

Solution Explorer

The Solution Explorer window is used to manage your projects and the files that are created and opened in the visual basic tool. The following are the most common tasks that can be done by using Solution Explorer:

  • Rename an existing solution.
  • Rename, add, and remove a project.
  • Rename, add, and remove files.
  • Add and remove References.
  • Add a folder and manage contents inside it.

Design/Code View

It is the middle part of the screen. Design view is the place where we add controls from the toolbox. Here we design the page according to our needs. It also contain a source view where the code is automatically added when we make changes to the design view. Source view contains html codes. There is a split view which shows both design and source view in a split screen. Code view(also called Codebehind) is the place where we can add the coding content for a page inorder to perform a particular task on runtime. This view is based on a specific language like vb or c#.
  
You may see the IDE components below:



Sunday, 5 June 2016


Opening an asp web page

  • First, click on Microsoft Visual Studio.
  • Then a window will open up Click on File ->New->Project.
  • Click on Visual C# which will be present in the left of the popup window.
  • Under Visual C# Click on Web.
  • List of web contents will be shown in the popup window.
  • Now click on ASP.NET Web Application.
  • Give the name you want and then Click OK.
  • Then you will see a Default.aspx page.
Further will be explained in next post. 



Index

In this I will give direct links to all posts an this will be available in Contents tab.
     
        Chapter 1: Introduction

        Chapter 2: Opening an asp web page.

        Chapter 3:Visual Studio IDE Basic Components.

         Chapter 4: Creating a simple Web Application

        Chapter 5: ASP.NET Page Life Cycle Events

        Chapter 6: What is isPostBack?

        Chapter 7: Why HTTP protocol is called Stateless Protocol?

        Chapter 8: Managing State
                       
                        Client Side Technique

                         1) View State
                     
                         2) Cookies

                         3) Query String

                         4) Hidden Field

                        Server Side Technique
                  
                        1) Session State

                        2) Application State

      Chapter  9: Validation Controls in ASP.NET

                         1) RequiredFieldValidator Control 


What is Web Application?


A web application is an application that is accessed by users using web browser like Firefox,Google Chrome, IE etc.


ASP.NET Introduction


ASP.NET is a web application system created and advertised by Microsoft to permit software engineers to construct dynamic sites. It permits you to utilize many programming language,like C# or VB.NET to fabricate web applications effectively.
            ASP.NET is a subset of .NET framework. It is introduced in 2002 with .Net Framework 1.0.
The ASP.NET application contain codebehind which can be written in any of the following languages:
  • C#
  • Visual Basic.Net
  • Jscript
  • J#

We will be using C# language for our web page.

NOTE:


This blog is made for beginners to help them understand the basics of ASP.NET web application.

Prerequisites

  • First you need to install Microsoft Visual Studio of any version.
  • Install it and set it up.