How to: Add Literal Web Server Controls to a Web Forms Page

Article
10/15/2014

Add a Literal Web server control to your page when you want to set text programmatically without adding extra HTML tags. The Literal control is useful as a way to add text into a page dynamically without adding any elements that are not part of the dynamic text. For example, you can use the Literal control to display HTML that you read from a file or from a stream.

Note
If you want to display static text, you can present it using HTML; you do not need a Literal control. Use a Literal control only if you need to render text programmatically.

To add a Literal control to a Web Forms page

Type an<asp:Literal>element into the page. For syntax, see Literal Web Server Control Declarative Syntax.

The following example shows a simple page that displays a headline at run time. The body of the page, including the Literal control, might look like this:
```
<body>
   <form runat="server">
      <h1><asp:Literal id="Headline" runat=server /></h1>
   </form>
</body>
```
Optionally, set the Mode property to Transform, PassThrough, or Encode. The Mode property specifies how the control handles markup that you add to it. For details, see Literal Web Server Control Overview.

Add code to your page to set the control's Text property at run time.

The following example shows how to programmatically set the text and encoding of the Literal control. The page contains radio buttons that allow the user to choose between encoded and pass-through text.

Note
If you are setting the Text property to text that comes from an untrusted source, set the control's Mode property to Encode so that the markup does not result in executable markup. For more information, see How to: Protect Against Script Exploits in a Web Application by Applying HTML Encoding to Strings.

<%@ Page Language="VB" %>
<script runat="server">
Protected Sub Page_Load(ByVal sender As Object, _
        ByVal e As System.EventArgs)
    Literal1.Text = "This <b>text</b> is inserted dynamically."
    If radioEncode.Checked = True Then
        Literal1.Mode = LiteralMode.Encode
    ElseIf radioPassthrough.Checked = True Then
        Literal1.Mode = LiteralMode.PassThrough
    End If
End Sub
</script>

<html>
<head runat="server"></head>
<body>
<form id="form1" runat="server">
<div>
    <br />
    <asp:RadioButton 
        ID="radioEncode" 
        runat="server"
        GroupName="LiteralMode" 
        Checked="True" 
        Text="Encode" 
        AutoPostBack="True" />
    <br />
    <asp:RadioButton 
        ID="radioPassthrough" 
        runat="server" 
        GroupName="LiteralMode" 
        Text="PassThrough" 
        AutoPostBack="True" />
    <br />
    <br />
    <asp:Literal ID="Literal1" runat="server"></asp:Literal>
</div>
</form>
</body>
</html>

<%@ Page Language="C#" %>
<script runat="server">
    protected void Page_Load(object sender, EventArgs e)
    {
        Literal1.Text = "This <b>text</b> is inserted dynamically.";
        if (radioEncode.Checked == true)
        {
            Literal1.Mode = LiteralMode.Encode;
        }
        if(radioPassthrough.Checked == true)
        {
            Literal1.Mode = LiteralMode.PassThrough;
        }
    }
</script>

<html>
<head runat="server"></head>
<body>
    <form id="form1" runat="server">
    <div>
        <br />
        <asp:RadioButton 
            ID="radioEncode" 
            runat="server"
            GroupName="LiteralMode" 
            Checked="True" 
            Text="Encode" 
            AutoPostBack="True" />
        <br />
        <asp:RadioButton 
            ID="radioPassthrough" 
            runat="server" 
            GroupName="LiteralMode" 
            Text="PassThrough" 
            AutoPostBack="True" />
        <br />
        <br />
        <asp:Literal ID="Literal1" runat="server"></asp:Literal>&nbsp;</div>
    </form>
</body>
</html>

Share via

How to: Add Literal Web Server Controls to a Web Forms Page

To add a Literal control to a Web Forms page

See Also

Reference

Additional resources