ARTICLE

Literal Control in ASP.NET

Posted by Puran Mehra in Articles | ASP.NET Controls in C# on November 19, 2009

Tags: Difference between a Literal Control and a Label Control, Encode, Label Control, Literal Control in ASP.NET, Literal control property, Mode, PassThrough, Transform, WebControl, What is Literal Control?, When to user Literal Control?

In this article I will explain about the Literal Control in ASP.NET and how to use it. Will also differentiate between Label and Literal controls.

Tweet
21491
5

Reader Level: Beginner

Download Files:

LiteralControl.zip

What is Literal Control?

The Literal Control is similar to the Label Control as they both are used to display static text on a web page.
The Literal Control is not inherited from WebControl namespace.
The Literal Control doesn't provide substantial functionality but Literal text is programmable.
It doesn't add any HTML elements to the web page. This control makes it possible to add HTML code directly in the code designer window without switching to design view and clicking the HTML button to edit the HTML.
You cannot apply a style to a literal control.
Unlike Label control, there is no property like BackColor, ForeColor, BorderColor, BorderStyle, BorderWidth, Height etc. for Literal control. That makes it more powerful, you can even put a pure HTML contents into it.

When to user Literal Control?

Literal control is one of the rarely used controls but it is very useful.
Literal control is light weight control.
The Literal Control is useful when you want to add text to the output of the page dynamically (from the server).
With that you can even programmatically manipulate the Literal text from the code behind.

In short you can say:

The Literal control is used to display text; that is, it renders static text on a Web page without adding additional HTML tags. It passes content directly to the client browser unless you use the Mode property to encode the content.

How to code Literal control in .aspx page

<asp:Literal ID="LiteralText" runat="server" Text="This is example of Literal"></asp:Literal>

The above code will be rendered as:

<div>
This is example of Literal
</div>

Output of above code

Table showing mode property of the Literal control:

Mode	Description
PassThrough	The contents of the control are not modified.
Encode	The contents of the control are converted to an HTML-encoded string.
Transform	Unsupported markup-language elements are removed from the contents of the control. If the Literal control is rendered on a browser that supports HTML or XHTML, the control's contents are not modified.

Listing shows how the Literal Control can be programmable in code behind

Code for .aspx page

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Untitled Page</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:Literal ID="Literal1" runat="server" />
        <asp:Literal ID="Literal2" runat="server" />
        <asp:Literal ID="Literal3" runat="server" />
    </div>
    </form>
</body>
</html>

Code for .aspx.cs page

using System;
using System.Configuration;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Xml.Linq;

public partial class _Default : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        Literal1.Mode = LiteralMode.Encode;
        Literal1.Mode = LiteralMode.PassThrough;
        Literal1.Mode = LiteralMode.Transform;

        Literal1.Text = @"<font size=4 color=red>Literal1 with Encode property example</font><script>alert(""Literal with Encode property"");</script></br></br>";

        Literal2.Text = @"<font size=4 color=green>Literal2 with PassThrough property example</font><script>alert(""Literal with PassThrough property"");</script></br></br>";

        Literal3.Text = @"<font size=4 color=blue>Literal3 with Encode Transform example</font><script>alert(""Literal with Transform property"");</script></br></br>";
    }
}

Output of the above code:

Difference between a Literal Control and a Label Control

Literal Control	Label Control
A Literal Web Server control used to insert static text on a web page. The Literal Control's only controllable aspect is the text that it holds.	The Label Web Server control is used to display static text on web page. The Label Control has properties that enable one to programmatically apply styles/stylesheet class to the rendered output. Can handle JavaScript at Client side.
The class hierarchy for this control is as follows: Object -> Control -> Literal	The class hierarchy for this control is as follows: Object -> Control -> WebControl -> Label
Literal Control doesn't add any HTML elements to the web page	Label Control is rendered as <span> tag.
You can't apply any style property to the Literal Control.	You can apply any style property to the Label Control.

Conclusion

I hope that this article would have helped you in understanding the Literal Control in ASP.NET. Please share it if you know more about this article. Your feedback and constructive contributions are welcome.

post comment

hi ..........

Posted by sreenivasa reddy on Dec 28, 2011

Dear Mehra, Please find this mistake in the code. Literal1.Mode = LiteralMode.Encode; Literal1.Mode = LiteralMode.PassThrough; Literal1.Mode = LiteralMode.Transform; In effect, the L2 and L3 modes are set to defaults and L1 mode is transform. You intended to set the three modes to 2 diff. literals, but the copy-paste demon came into place and made the literals all one !!!

Posted by Madhu Venugopal on Feb 10, 2011

Thank you Puran, This is really a nice and simple article

Posted by rag on Feb 10, 2011

its very useful

VARAPRASAD

Posted by Vara Prasad on Oct 27, 2010

Thank you Puran Mehra,
this is very useful for me I am always confused that what is a difference between these two controls.

Posted by Pankaj Pareek on Feb 05, 2010

TOP LEADERS