Displaying Information
| The ASP.NET Framework includes two controls you can use to display text in a page: the Label control and the Literal control. Whereas the Literal control simply displays text, the Label control supports several additional formatting properties. Using the Label ControlWhenever you need to modify the text displayed in a page dynamically, you can use the Label control. For example, the page in Listing 2.1 dynamically modifies the value of a Label control's Text property to display the current time (see Figure 2.1). Figure 2.1. Displaying the time with a Label control. Listing 2.1. ShowLabel.aspx
Any string that you assign to the Label control's Text property is displayed by the Label when the control is rendered. You can assign simple text to the Text property or you can assign HTML content. As an alternative to assigning text to the Text property, you can place the text between the Label control's opening and closing tags. Any text that you place before the opening and closing tags gets assigned to the Text property. By default, a Label control renders its contents in an HTML <span> tag. Whatever value you assign to the Text property is rendered to the browser enclosed in a <span> tag. The Label control supports several properties you can use to format the text displayed by the Label (this is not a complete list):
In general, I recommend that you avoid using the formatting properties and take advantage of Cascading Style Sheets to format the rendered output of the Label control. The page in Listing 2.2 contains two Label controls: The first is formatted with properties and the second is formatted with a Cascading Style Sheet (see Figure 2.2). Listing 2.2. FormatLabel.aspx
Figure 2.2. Formatting a label. You should use a Label control when labeling the fields in an HTML form. The Label control includes a property named the AssociatedControlID property. You can set this property to point at an ASP.NET control that represents a form field. For example, the page in Listing 2.3 contains a simple form that contains fields for entering a first and last name. Label controls are used to label the two TextBox controls. Listing 2.3. LabelForm.aspx
When you provide a Label control with an AssociatedControlID property, the Label control is rendered as an HTML <label> tag instead of an HTML <span> tag. For example, if you select View Source on your web browser, you'll see that the first Label in Listing 2.3 renders the following content to the browser: <label for="txtFirstName" >First Name:</label> Always use a Label control with an AssociatedControlID property when labeling form fields. This is important when you need to make your website accessible to persons with disabilities. If someone is using an assistive device, such as a screen reader, to interact with your website, the AssociatedControlID property enables the assistive device to associate the correct label with the correct form field. A side benefit of using the AssociatedControlID property is that clicking a label when this property is set automatically changes the form focus to the associated form input field. Web Standards Note Both the WCAG 1.0 and Section 508 accessibility guidelines require you to use the <label for> tag when labeling form fields. For more information, see http://www.w3.org/wai and http://www.Section508.gov. Using the Literal ControlThe Literal control is similar to the Label control. You can use the Literal control to display text or HTML content in a browser. However, unlike the Label control, the Literal control does not render its content inside of a <span> tag. For example, the page in Listing 2.4 uses a Literal control in the page's <head> tag to dynamically modify the title displayed in the browser title bar. The current date is displayed in the Literal control (see Figure 2.3). Figure 2.3. Modifying the browser title with a Literal control. Listing 2.4. ShowLiteral.aspx
If you used a Label control in Listing 2.4 instead of a Literal control, the uninterpreted <span> tags would appear in the browser title bar. Note The page in Listing 2.4 uses a format specifier to format the date before assigning the date to the Label control. The D format specifier causes the date to be formatted in a long format. You can use several standard format specifiers with the ToString() method to format dates, times, currency amounts, and numbers. For a list of these format specifiers, look up the Format Specifiers topic in the index of the Microsoft .NET Framework 2.0 SDK Documentation. Because the contents of a Literal control are not contained in a <span> tag, the Literal control does not support any of the formatting properties supported by the <span> tag. For example, the Literal control does not support either the CssClass or BackColor properties. The Literal control does support one property that is not supported by the Label control: the Mode property. The Mode property enables you to encode HTML content. The Mode property accepts any of the following three values:
For example, the page in Listing 2.5 contains three Literal controls that are set to the three possible values of the Mode property (see Figure 2.4). Figure 2.4. Three values of the Literal control's Mode property. Listing 2.5. ShowLiteralMode.aspx
When you request the page in Listing 2.5 with a web browser, the first Literal control displays a horizontal rule, the second Literal control displays the uninterpreted <hr /> tag, and the final Literal control displays another horizontal rule. If you requested the page from a device (such as a WML cell phone) that does not support the <hr> tag, the third <hr /> tag would be stripped. |
/xhtml1/DTD/xhtml1-transitional.dtd"> <script runat="server"> Sub Page_Load() lblTime.Text = DateTime.Now.ToString("T") End Sub </script> <html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server"> <title>Show Label</title> </head> <body> <form runat="server"> <div> <asp:Label Runat="server" /> </div> </form> </body> </html> 