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.