ASP.NET Label Control vs Literal Control

7. August 2012 12:21 by Forrest C. Shields II in .NET  //  Tags: ,   //   Comments (0)

Difference between Label and Literal controls

The Literal control reserves a spot in your HTML page for content that is directly injected into the page without adding any additional tags. It is more basic (and lightweight) than the Label control. The Label control has more formatting options and can tie your label to an HTML input control.

The ASP.NET Label control

Inheritance Hierarchy:
System.Object
   System.Web.UI.Control
     System.Web.UI.WebControls.WebControl
       System.Web.UI.WebControls.Label

Because it inherits from WebControl, you have lots of styling/theming options.

Contrary to popular belief, the Label control can be used to inject HTML into the page. From Microsoft's documentation: "The Text property can include HTML. If it does, the HTML will be passed unchanged to the browser, where is might be interpreted as markup and not as text."

Normally, it wraps the entire output in <span> tags.

You can associate it with another control using the AssociatedControlID property. When you do this, the output is wrapped in <label> tags instead of <span> tags. This ties your your label correctly to your input control:

<asp:Label id="Label1" AssociatedControlId="TextBox1" Text="First Name:" runat="server" />
<asp:TextBox id="TextBox1" runat="server" />

Yields the following HTML:

<label for="TextBox1" id="Label1">First Name:</label> 
<input name="TextBox1" type="text" id="TextBox1" />

The ASP.NET Literal control

Inheritance Hierarchy:
System.Object
   System.Web.UI.Control
     System.Web.UI.WebControls.Literal

Inject pre-formed HTML into your page using Mode="PassThrough":

<asp:Literal ID="TestLiteral" runat="server" Mode="PassThrough"
             Text="This is <b>bold</b>"></asp:Literal>

Yields: This is bold

Or have it automatically HTMLEncode your text using Mode="Encode":

<asp:Literal ID="TestLiteral" runat="server" Mode="Encode"
             Text="This is <b>bold</b>"></asp:Literal>

Yields: This is <b>bold</b>

The Literal control does not add any extraneous HTML, unlike the Label control.

Conclusion

For the most part, the Literal control is just a placeholder for content. (In fact, I wish they had just called it the Content control!) You should use it in most cases, unless you need the styling/theming capability of the Label control or if you are actually labeling an input control. Never use a Label control when a Literal will do.

About the author

Forrest C. Shields II is a Technology Consultant at iServices.com, LLC in Colorado Springs, CO USA. Forrest has worked as a consultant for over 22 years where he specializes in using technology to find solutions to business problems in the small-to-medium sized business sector. His expertise covers the entire spectrum of Microsoft products, including: SharePoint, Exchange, SQL Server, IIS, Hyper-V, and the entire Microsoft Office Suite.

Month List