Important Events of some commonly used controls

Event	Use	Applicable to
Click	Occurs when the button is clicked.	Button
TextChanged	Occurs when the text in the control is changed.	TextBox, ListBox, DropDownList
SelectedIndexChanged	Occurs when the selection changes in the control.	ListBox, DropDownList
CheckedChanged	Occurs when the checked/un-checked state of the control changes.	CheckBox, RadioButton

To use the controls properly, a bit of coding is required. In the next lesson, we will learn about coding in detail. However, to demonstrate the use of server controls, let us make a simple page.

Open the project. Right click on the project name in the solution explorer and select `Add New Item...' from the menu.

In the dialog box, select `Web Form' as the template. Specify the name of the file. Check the option `Place code in separate file' and uncheck the option `Select master page'. We do not want to use this page for our project so there is no need to select a master page.

The new page is now added to our project. Switch to design view. A blank page is displayed.

From the ToolBox, drag a Label control and drop it on the page. Press the enter key to move the typing cursor to the next line. Now drag a TextBox control and drop it below the label control. Similarly, place a Button control and another Label control as shown in the figure:

Select the first label control. In the property window, change the ID property to `LabelInfo' and the Text property to `Please Enter Your Name Below:'

Similarly, select the Button control and change its ID property to `ButtonSubmit and the Text property to `Submit'. Next, select the second Label control, change its ID property to `LabelWelcome'. Make the Text property blank by deleting the existing text and set the visible property to `false'. This means that the control will not be visible when the page is displayed.

Double click on the Button control. A new page will open up in the IDE with some code in it. Look at the tab of the page. The name of the file is `TestPage.aspx.cs'. This is known as the code behind file. TestPage.aspx is the name of our actual page. The .cs indicates that the code is written in C# language. Remember that a visitor to our site can only view the .aspx pages which contains the design of the page. The code written in the .cs files can not be viewed. We will learn more about the code behind the pages in the next chapter.

The page contains some code but at this time, we are only interested in this piece of code:

 protected void ButtonSubmit_Click(object sender, EventArgs e) { } 

We can identify the ID of the Button control - `ButtonSubmit'. Also, notice the word `Click'. This indicates the click event of the button. Therefore, this piece of code means that we are programming the click event of the Button control that has the ID `ButtonSubmit'.

Type the following lines of code inside the curly braces -

 LabelWelcome.Text = "Welcome " + TextBox1.Text; LabelWelcome.Visible = true; 

The code should look like -

 protected void ButtonSubmit_Click(object sender, EventArgs e) { LabelWelcome.Text = "Welcome " + TextBox1.Text; LabelWelcome.Visible = true; } 

Notice how IntelliSense helps us by displaying the properties and control names in the lists when we type the code.

Let us examine the two lines of code that we have typed. The first line:

 LabelWelcome.Text = "Welcome " + TextBox1.Text;

`LabelWelcome' is the ID of the second Label control. We had set its Text property to blank using the property window. Our aim is for the Label to display the name entered by the user in the TextBox control along with a welcome message.

The name entered by the user can be accessed using the Text property of the TextBox control. The ID of the TextBox control is TextBox1. So, TextBox1.Text will return the text entered in the TextBox. In our case, it is the name entered by the user.

To add a welcome message with the name, we used:

 "Welcome " + TextBox1.Text

This will add the word `Welcome' before the name entered by the user. The `+' sign is the symbol for addition. The `+' sign is also used to concatenate multiple pieces of texts.

So, the complete meaning of the first line of code is -

"Get the text entered by the user in the TextBox1 control, add the word `Welcome' infront of it and assign the complete text to the Text property of the LabelWelcome control." For example, if the user enters Jonathan Jones as his name, the Text property of the LabelWelcome control will contain the message - Welcome Jonathan Jones. Our LabelWelcome control can now display a nice welcome message to the user.

But there is a problem. When setting the properties in step 6, we had set the Visible property of the LabelWelcome control to false. This makes the control invisible when the page is dislayed for the first time. After the user enters a name and clicks the submit button, the control should become visible in order to display the welcome message. The second line of code is used for this purpose:

 LabelWelcome.Visible = true;

Here, we are changing the Visible property of the control from false to true so that the control is displayed on the page.

• Save the project and run the page by pressing Ctrl+F5 keys.

When the page is loaded for the first time, the second Label control is not visible. Enter a name in the TextBox and click on the Submit button. Now the second Label will appear, displaying a welcome message.

This was a very simple example of using server controls in our ASP.NET 2.0 pages. In the coming chapters, we will learn about other server controls and how to use them. Before that, we need a little bit of knowledge about programming so that we can use the properties and events of the controls. The next chapter deals with programming in more detail.