ASP.NET Controls

---

Controls are the back bone of developing a website with APS.NET and of the of the graphical user interface.  Controls help the user to enter data and/or make choices.  One can say without exaggeration that controls are the main elements in ASP.NET, because the entire scope of the ASP.NET environment is user interaction and dynamic web page creation.

Controls can be simple to complex and you will use them all the time when building a website.  Learning ASP.NET means learning to master these controls.

ASP.NET server controls are also called ASP controls.  They replace the classic client-side HTML controls with a server-side code implementation.  The servers-side code follows the object-oriented programming format of the .NET Framework. If you understand how server controls operate, you will be on your way to master website design with ASP.NET.

The server controls reside on the server.  When a page is requested by the client the server-side controls are processed by the ASP.NET runtime.  The controls then contribute to generating the HTML page for the client browser.  This is a great advantage of ASP.NET.  Instead of defining HTML controls on your page and then upload them to the browser, with ASP.NET remain on the server side and the result is a HTML page as requested by the client.  


ASP.NET controls can be divided into the following groups:

• Standard Controls
• Data Controls
• Navigation Controls
• Login Controls
• Ajax Extensions

In this section we will concentrate on Standard Controls, while the other controls will be discussed later.

Standard Controls

---

To access these controls you need to start your VWD (Visual Web Developer) or VS2008 (Visual Studio 2008).  Create a project (or open an already created project).  Open the Toolbox by pressing Ctrl+Alt+X or click on View>Toolbox.  The toolbox will show all the categories listed above.  Click on the + sign near Standard to open the standard controls.  The following image shows the way your development environment should look after opening the standard controls in the toolbox.





Simple controls

A few of these controls can be grouped as Simple Controls as they are easy to be learned and used.  In this category we can include TextBox, Button, Label, HyperLink, RadioButton and CheckBox.


TextBox

The TextBox control can be used for user input, read-only text display and password entry. It can be single-line or multiline. In multiline mode, it wraps the text it contains, but you can set the Wrap property to false if needed.  The text displayed in the TextBox control is specified or determined by using the Text property.

The TextBox can be dragged onto your page from the ToolBox.  If you select the TextBox, you can see its properties on the Properties sidebar on the VS2008 right hand side.  You can modify those properties as you wish to change the TextBox color, font, size, etc. The following image shows the TextBox properties location.




Button

The Standard Button is a control that directs the server to enable some server-side processing event.  To place it on page, go into Design mode and drag the button control on your page.  It is a push button, with an action that we can define in the Default.aspx.cs file.  If this file does not exist, all one has to do is to double click the button in the Default.aspx file.  Visual Studio will create the Default.aspx.cs file and will place the cursor inside the button object.  Now we can write the action.  The following two images show the standard button which was placed inside the page div, and the Default.aspx.cs page with the button code.

 

Label

The Label control is used to control the text displayed on a page, when the page is lunched at runtime.  With this control you can display text in any location on the page.  The text can be set in the Text property.  However, the text can also be set by a user action, as in the following example.  

This video shows a simple example with the controls we learned: TextBox, Button and Label.

 

More Standard Controls 

---

HyperLink

 

The HyperLink control simply places a link in the browser, similarly to the HTML anchor element <a>. Its action triggers the request of another page.  The requested page is defined by the control property NavigateUrl.  The text link displayed by the hyperlink is defined by the Text property, similarly to the TextBox control. 

 

 

RadioButton

A RadioButton allows the selection of one item from a list of many.  It derives from the CheckBox class and it is used to select a Boolean data, like True/False. 

The following example shows you how to control an event by checking a radio button. The event is the changing of a label text from ??? to “You did it!”

Click on the figure to see the demo.

 

To create this demo drag on the Default.aspx page two Labels and a RadioButton.  Place the first label on the top of the page and change its text to “Do you want to check the button?  

The radio button is placed next. Change its text property to whatever you want. Make sure its AutoPostBack property is set to True.  

The second label is placed underneath the radio button.  Change its text property to “???” or anything else.

Double click the RadioButton control.  The Default.aspx.cs page appears. Inside the RadioButton block type the following conditional statement.



Then click on File > Save All and build it.

 

Radio Button Lists

Groups of RadioButtons are supposed to be mutually exclusive. This means that only can be selected at a time. ASP.NET has made grouping RadioButtons easy through the use of the RadioButtonList Control. The control has a llist property that will allow you to add as many RadioButton items to the control as you need:

When you create a RadioButtonList it contains a collection of all of the RadiButtons that has been added. You can access each one of the items in the by it's index number. In the above example the 3 items were added to the RadioButtonList, they were "Yes", "No", "Maybe". These have index numbers 0,1,2 repectively. If you gave the RadioButtonList the Id of HappyButtons like in the example above you could then access each item as follows:

HappyButtons.Items[0].Text = "Hello";   //Change the text of the item


The following demo show how to use the RadioButtonList

Click on the figure to see the demo running.

 

 Here is how to create this example:

After you write “Are you happy?”, drag three RadioButtons on your page.  Also drag a Label Control under the buttons.  

Change the Label text to “Click a button”.

Change the RadioButton1 text to “Yes”, RadioButton2 text to “No”, and RadioButton3 text to “Don’t know”. Each button GroupName property should be HappyButtons.  Also, the AutoPostBack property should be True for each button.  This will tell the buttons to report  

Go to Default.aspx.cs and type the following code:

 

These are simple if and else if conditional statements which are used for choosing the right Label1 behavior.

 

CheckBox

The CheckBox control allows the selection of a Boolean data (True or False). The RadioButton control derives from this class.  As in the case with radio buttons, several CheckBoxes are independent unless grouped together.  If the CheckBoxes on your page are left independent you can select multiple options, they do not exclude each other.

In the following example you will see how three independent CheckBoxes can change the font of a label.  Click on the following image to see the demo.



To build this application, drag the appropriate controls on your page.  By now this should be easy for you.  In Default.aspx.cs type the following code.



As you can see, CheckBox.Checked is a boolean variable, which is set to True or False depending on the box being checked or not.  Therefore, it can be used in an if else conditional statement, as shown for CheckBox1 behavior.  It can also be used to set the Label.Font.Bold (or Italic) to True or False, as shown for CheckBox2 and CheckBox3.

 

LinkButton

A LinkButton behaves like the standard button and appears to the user as a hyperlink.  Although it looks like a hyperlink, it does not request another page.  Its action posts back, like the standard button.

 

ImageButton

Like the LinkButton, the ImageButton behaves like the standard button, except that the user can specify an image bitmap to act as a button on the browser. As with any image in HTML there is an AlternateText attribute, which shows the text that should be displayed on nongraphical browsers.

 

 

Image and ImageMap

Both controls display an image.  With their properties you can select the image URL and the height, width and alignment.  As in HTML controls, the image control has an AlternateText attribute that you should always set so that there is something meaningful displayed in nongraphical browsers.  

With ImageMap you can define hotspots by using the collection editor in the HotSpots property.  This is helpful when you want the user to navigate to different other areas of your website depending on the image region he/she clicked on.  This is a nice control.  Do not overlook it, because you can creat elaborate navigational areas with an ImageMap.