ASP.NET 2.0: A Getting Started Guide

Web Server Controls

Web server controls can be seen as more advanced versions of HTML server controls. Web server controls are those that generate content for you--you're no longer in control of the HTML being used. While having good knowledge of HTML is useful, it's not a necessity for those working with web server controls.

Let's look at an example. We can use the Label web server control to place simple text inside a web form. To change the Label's text from within our C# or VB code, we simply set its Text property like so:

myLabel.Text = "Mickey Mouse"

Similarly, to add a text box to our form, we use the TextBox web server control. Again, we can read or set its text using the Text property:

username = usernameTextBox.Text;

Though we're applying the TextBox control, ASP.NET still uses an input element behind the scenes; however, we no longer have to worry about this detail. With web server controls, Microsoft has basically reinvented HTML from scratch.

Unlike HTML server controls, web server controls don't have a direct, one-to-one correspondence with the HTML elements they generate. For example, we can use either of two web server controls--the DropDownList control, or the ListBox control--to generate a select element.

Web server controls follow the same basic pattern as HTML tags, but the tag name is preceded by asp:, and is capitalized using Pascal Casing. Pascal Casing is a form that capitalizes the first character of each word (e.g. TextBox). The object IDs are usually named using Camel Casing, where the first letter of each word except the first is capitalized (e.g. usernameTextBox).

Consider the following HTML input element, which creates an input text box:

<input type="text" name="usernameTextBox" size="30" />

The equivalent web server control is the TextBox control, and it looks like this:

<asp:TextBox id="usernameTextBox" runat="server" Columns="30">              
</asp:TextBox>

Remember that, unlike any normal HTML that you might use in your web forms, web server controls are first processed by the ASP.NET engine, where they're transformed to HTML. A side effect of this approach is that you must be very careful to always include closing tags (the </asp:TextBox> part above). The HTML parsers of most web browsers are forgiving about badly formatted HTML code, but ASP.NET is not. Remember that you can use the shorthand /> syntax if nothing appears between your web server control's opening and closing tags. So, you could also write this TextBox like so:

<asp:TextBox id="usernameTextBox" runat="server" Columns="30" />

To sum up, the key points to remember when working with web server controls are:

• Web server controls must be placed within a <form runat="server"> tag to function properly.
• Web server controls require the runat="server" attribute to function properly.
• We include web server controls in a form using the asp: prefix.

There are more web server controls than HTML controls, some offer advanced features that simply aren't available using HTML alone, and some generate quite complex HTML code for you. We'll meet many of the web server controls as we work through this and future chapters.

For more information on web server controls, including the properties, methods, and events for each, have a look at Appendix B.

Standard Web Server Controls

The standard set of web server controls that comes with ASP.NET mirrors the HTML server controls in many ways. However, web server controls offer some new refinements and enhancements, such as support for events and view state, a more consistent set of properties and methods, and more built-in functionality. In this section, we'll take a look as some of the controls you're most likely to use in your day-to-day work.

Remember to use the .NET Framework 2.0 SDK Documentation whenever you need more details about any of the framework's classes (or controls). Access the documentation from Start > All Programs > Microsoft .NET Framework SDK v2.0 > Documentation. To find a class, simply search for the class's name. If there are many classes with a given name in different namespaces, you'll be able to choose the one you want from the Index Results window. For example, you'll find that there are three classes named Label, situated in the System.Web.UI.MobileControls, System.Web.UI.WebControls, and System.Windows.Forms namespaces, as Figure 4.3 illustrates. You'll most likely be interested in the version of the class situated in the WebControls namespace.

Figure 4.3. Documentation for the Label control

Label

The easiest way to display static text on your page is simply to add the text to the body of the page without enclosing it in any tag. However, if you want to modify the text displayed on a page using ASP.NET code, you can display your text within a Label control. Here's a typical example:

<asp:Label id="messageLabel" Text="" runat="server" />

The following code sets the Text property of the Label control to display the text "Hello World":

Public Sub Page_Load()              
 messageLabel.Text = "Hello World"              
End Sub              
             
public void Page_Load()                
{              
 messageLabel.Text = "Hello World";              
}

Reading this Page_Load handler code, we can see that when the page first loads, the Text property of the Label control with the id of message will be set to "Hello World."

Literal

This is perhaps the simplest control in ASP.NET. If you set Literal's Text property, it will simply insert that text into the output HTML code without altering it. Unlike Label, which has similar functionality, Literal doesn't wrap the text in <span> tags that would allow the setting of style information.

TextBox

The TextBox control is used to create a box in which the user can type or read standard text. Using the TextMode property, this control can be set to display text in a single line, across multiple lines, or to hide the text being entered (for instance, in HTML password fields). The following code shows how we might use it in a simple login page:

<p>              
 Username: <asp:TextBox id="userTextBox" TextMode="SingleLine"              
     Columns="30" runat="server" />              
</p>              
<p>              
 Password: <asp:TextBox id="passwordTextBox"              
     TextMode="Password" Columns="30" runat="server" />              
</p>              
<p>              
 Comments: <asp:TextBox id="commentsTextBox"              
     TextMode="MultiLine" Columns="30" Rows="10"              
     runat="server" />              
</p>

In each of the instances above, the attribute TextMode dictates the kind of text box that's to be rendered.

HiddenField

HiddenField is a simple control that renders an input element whose type attribute is set to hidden. We can set its only important property, Value.

Button

By default, the Button control renders an input element whose type attribute is set to submit. When a button is clicked, the form containing the button is submitted to the server for processing, and both the Click and Command events are raised.

The following markup displays a Button control and a Label:

<asp:Button id="submitButton" Text="Submit" runat="server"              
   OnClick="WriteText" />              
<asp:Label id="messageLabel" runat="server" />

Notice the OnClick attribute on the control. When the button is clicked, the Click event is raised and the WriteText subroutine is called. The WriteText subroutine will contain the code that performs the intended function for this button, such as displaying a message to the user:

Public Sub WriteText(s As Object, e As EventArgs)              
 messageLabel.Text = "Hello World"              
End Sub              
             
public void WriteText(Object s, EventArgs e)                
{              
 messageLabel.Text = "Hello World";              
}

It's important to realize that events are associated with most web server controls, and the basic techniques involved in using them, are the same events and techniques we used with the Click event of the Button control. All controls implement a standard set of events because they all inherit from the WebControl base class.