ASP.Net: Literal vs Label

Question

I just wanted to hear some authorities on when and where you should use a LITERAL control over a LABEL.

As I understand it, the difference is this: A LABEL can be styled via the <SPAN> tags that are added.

I personally find the addition of <SPAN> tags in my HTML to be very annoying and never actually apply styles through ASP, and so LITERALs seem to be what should be used most of the time... but I'm concerned there's other considerations or benefits to using a LABEL over it that I'm unaware of.

Is it 100% fine to replace any LABELs with LITERALs, provided we're not applying styles to them? Are there NO other considerations?

Geof

Answer 1

Yep, the main difference is that Literal controls just render out text, but Label controls surround it with <span> tags (Unless you use the AssociatedControlID property, in which case a Label control will render a <label> tag).

So, labels can be styled easier, but if you're just inserting text, literals are the way to go. Literal controls also have a handy property Mode which governs how the text is rendered. You can have it HTML-encoded, or rendered without any changes, or have any "unsupported markup-language elements" removed.

If you're not applying any styles (e.g. by using Label's CssClass property), it will be fine to replace Label controls with Literal controls.

Yahwistic

So, just to be sure here, there are NO other considerations at all? I ask because you write "the main difference is...". Obviously I'm not interested in the main difference. Thanks. – Geof

@Django: Chris Marisic's answer is really important; ASP.Net Label controls should always be used when you want an HTML <label> element. Apart from that, Labels render text between <spans>, Literals don't, and Literals give you greater control over how the text is rendered. There are no special events on either control, and their contents can be accessed in the code-behind in exactly the same way (through the Text property). – Yahwistic

CHECKBOXES! RADIO-BUTTONS! If you use Label controls, you can add the AssociatedControlID attribute with the ID of the checkbox or radio-button that the label is associated with. That way you can click on the label, and the associated control will be activated. Making the clickable target-area bigger will also make the user-interface easier to use. – Averell

Answer 2

When you have code similar to

<asp:Label EnableViewState="false" ID="Label8" runat="server" 
        AssociatedControlID="txtEmail">Email Address:</asp:Label>

<asp:TextBox ID="txtEmail" runat="server"></asp:TextBox>

It is optimal to use a label element because it will correctly turn it into a html label element with the correct for attribute targeting your text box, so that if a user clicks on the label it automatically sets their cursor inside the text field.

Otherwise use the literal unless having the text wrapped in a span would be beneficial for css styling.

Eric

Answer 3

To display simple text, formatted text or HTML text as it is i will start with literal first as its lightweight and does not emit out extra SPAN tags.

See this video which demonstrates about those extra tags.

But we can not apply CSS on a literal , we can not add attributes like Label1.Attributes.Add to a literal. Any container oriented things can not be achieved as literal is not surrounded by a SPAN tag.

It's also sad to see lot of ASP.NET Webform guys by default choose label to display text not knowing that it generates extra SPAN tags which can make your HTML heavy if you have lot's of label.

Horlacher

Answer 4

Difference b/w Label and Literal Control in asp.net

In almost all ways a Literal control is the same as a Label control. Both of these controls are used to display Text on a webform. (The Text property can be set in the HTML or in the code-behind.)

The biggest difference is that the Label control wraps the text in a span when rendered. Any style that is applied to the Label control, will be rendered using the style property of the span.

For example, the following HTML

<asp:Label ID="Label1" runat="server"  Text="Label Text"
ForeColor="Red" Font-Bold="true" ></asp:Label>

Will be rendered as

<span id="Label1" style="color:Red;font-weight:bold;">Label Text</span>

A Literal control doesn't output any surrounding tags, so the Text is displayed as is:

For example, the following HTML

<asp:Literal ID="Literal1" runat="server" 
Text="Literal Control Text"></asp:Literal>

will be rendered as

Literal Control Text

So if you want to apply any styles to a than use Label control otherwise use the Literal control. Because of this, the Literal control is a light weight control, when compared with the Label control.

FYI: The inheritance hierarchy for Literal control class is (Object => Control => Literal), where as for the Label control, the hierarchy is (Object => Control => WebControl=> Label)

Whipperin

Literal mode="PassThrough": techrepublic.com/blog/software-engineer/… – Dunstable