Click here to download the sample source code for this lesson.  

ASP.NET is the Microsoft .NET web programming model.  It contains web oriented class libraries, controls and design paradigms.  An ASP.NET application contains one or more Web Forms (or Web Pages).  Each Web Form contains server controls.  Server controls are basically things that you see on a web page when the application executes, such as buttons, text boxes, drop down lists, labels, etc.  “Server” controls are named as such, because the ASP.NET web engine runs the event code for the controls on the server (not in the user’s web browser such as with Javascript).  This allows ASP.NET web programmers to define event handler Methods for controls and manipulate control properties in pre-compiled C# code that runs on the server.  This server side control paradigm is very powerful for programmers because it makes building web pages very dynamic, easy to do and easy to maintain.  With ASP.NET, there is no longer a need to use Response.Write statements to generate HTML code for the browser (classic ASP programmers, JSP programmers and PHP programmers will appreciate this).  ASP.NET generates HTML code for you at runtime when you use server controls.

In previous exercises we had gotten some basic experience with server controls when we used Button and TextBox controls.  Let’s spend some time practicing with some additionals controls and their properties.  Create a new website called Lab6.  On the default.aspx web form go to the Design view.  From the Toolbox window, drag the following controls onto the form one by one: a Label, a TextBox, a Button, a LinkButton, a DropDownList, a CheckBox, and a RadioButton.

Now let’s manipulate some of the properties for these server controls and see how their appearance changes.  In ASP.NET whenever you want to change the appearance or behavior of a server control, you can manipulate the control’s properties.  Every server control has a unique set of properties, however a lot of the controls share some common properties such as the Text property which defines what text appears on the control during runtime.

Click on the Label control that you put on the form and change the Text property to “My First Label”.  Change the Font->Bold property to True.

Click on the TextBox control and change the Font->Italic property to True.

Click on the Button control and change the BackColor property to “Yellow”.

Click on the LinkButton control and change the Text property to “My First Hyperlink”.

Click on the DropDownList control and change the Items property.  To add items into the DropDownList, click on the Items property and then click on the ellipses (…)  The ListItem Collection Editor window should come up.  This window lets you enter whatever values you want shown in the drop down list.  Click the Add button.  In the Text property type in “My first list item”.  Click the Add button again and in the Text property type in “My second list item”.  Click the OK button to apply the changes.

Click on the CheckBox control and change the Checked property to True.

Click on the RadioButton control and change the BorderStyle property to Solid.

Now that you have finished modifying all of these property values, run the application and pay attention to the following characteristics about the controls you added to your web form:

The label shows up with bold font.  If you type some text into the TextBox, it is in italics.  The button is yellow.  You have a hyperlink that says “My First Hyperlink”.  There is a drop down list with the two items that you entered into the list items editor earlier.  The radio button has a solid border box around it.

By using the property editor you can change the appearance of any server controls on your web forms.  In the next lesson, we will learn how to modify the appearance of server controls using C# code and more about a special ASP.NET event called Page Load.