Label Controls and Literal Controls

Both Label and Literal controls are used to control the text displayed on a page at runtime. The text to be displayed is set in the controls’ Text property, as shown in Example 4-4.

Example 4-4. Declaring labels and literals

<asp:Literal ID="Literal1" 
    runat="server" Text="This is a literal" />

<asp:Label ID="Label1" 
    runat="server" Text="This is a label" />

So, why have two controls for plain text? The answer is one of context. Add a new page called LabelsAndLiterals.aspx to the C4_BasicControls website, and add the code from Example 4-4 to it. Press Ctrl-F5 to run the page (or right-click the page and select View in Browser) and then have a look at the HTML generated by the two controls by right-clicking the page in the browser and selecting View Source. The key is that the Label control has wrapped its text in <span> tags whereas the Literal control has not:

This is a literal
        
<span id="Label1">This is a label</span>

The <span> elements enable you to control the formatting of the text in a Label control, which is why the Label control has many display-related properties whereas the Literal control has none. For example, you can add text formatting to Label controls inline or through a Cascading Style Sheet (CSS) like so:

<asp:Label  ID="Label2" runat="server" ForeColor="Blue"
   Font-Bold="True" Text="This is a label styled inline" />
        
<asp:Label  ID="Label3" runat="server" CssClass="StandardText"
   Text="This is a label styled with CSS" />

The resultant HTML shows how the <span> elements use the appropriate XHTML properties. Furthermore, ASP.NET will detect what browser version is being used and will use <font> tags if the browser does not support CSS.

<span id="Label2" style="color:Blue;font-weight:bold;">
   This is a label styled inline
</span>
        
<span id="Label3" class="StandardText">
   This is a label styled with CSS
</span>

The Label control has another trick up its sleeve as well. If you set its AssociatedControlID property to the ID of another form element, like this:

<asp:Label ID="Label4" runat="server" Text="This is a form label" 
   AssociatedControlID="form1" />

the control will generate an HTML <label> element with its for attribute set to the value of AssociatedControlID. The compiler will also check that the nominated ID also exists on the form, rather than create a semantically incorrect HTML form:

<label for="form1" id="Label4">This is a form label</label>

So, why use a Literal at all? Because in some situations those <span> elements are invalid XHTML—notably in the <head> area of a page. For example, if you were generating the title of a page dynamically from a database, you would use:

<head>
   <title>
      <asp:Literal id="PageTitle" text="Page Title" runat="server" />
   </title>
</head>

rather than:

<head>
   <title>
      <asp:Label id="PageTitle" text="Page Title" runat="server" />
   </title>
</head>

because the result of using the Label would be invalid:

<head>
   <title>
      <span id="PageTitle">Page Title</span>
   </title>
</head>

The HTML elements surrounding the text are also why you can use AJAX controls to extend the functionality of a Label control but not of a Literal control. Once the server has rendered your ASP.NET page as XHTML and JavaScript, that JavaScript can target the HTML elements, <span> or <label>, generated by a Label control, but there’s nothing to reference in a Literal control.

Get Programming ASP.NET 3.5, 4th Edition now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Start your free trial