COEPD – Center of Excellence for Professional Development Happy Learning
This article gives an overview of how to use the core controls contained in ASP.NET framework. These core controls used to build every application in ASP.NET. Given article explains how these core controls display the information to users.
Display information using Label and Literal controls:-
ASP.NET Framework includes two controls to display text on the web page. They are:
-
Label control
-
Literal control
Label Control:-
Label control dynamically modifies the text displayed on the web pages. For Example, the given below web page, it dynamically modifies the value of a Label control’s text property to display the current time.
DisplayLabel.aspx:-
————————
<%@ Page Language=”C#” %>
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional //EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<script runat=”server”>
void Page_Load()
{
lblTime.Text=DateTime.Now.ToString(“T”);
}
</script>
<html xmlns=”http://www.w3.org/1999/xhtml>
<head id=”Head1” runat=”server”>
<title> Show Label</title>
</head>
<body>
<form id=”form1” runat=”server”>
<div>
<asp:Label
id=”lblTime”
Runat=”server” />
</div>
</form>
</body>
</html>
Label Control takes simple text or HTML content as a value to its Text property, it renders it and displayed it on web page. By default Label control renders its content in the HTML <span> tag.
To format the displayed text, The Label control supports several properties. Few of them given below:
BackColor:- To change the background color of the label
BorderColor:- To set the color of a border rendered around the label
BorderStyle:- To display a border around the label. Possible values are NotSet, None, Dotted, Dashed, Solid, Double, Groove, Ridge, Inset and Outset.
BorderWidth:- To set the size of border rendered around the label
CssClass:- To associate a Cascading Style Sheet class with the label
Font: To set the label’s font properties
ForeColor:- To set the color of the content tendered by the label
Style:- To assign style attributes to the label
ToolTip:- To set a label’s title attribute
In general, we used to avoid using the formatting properties and take advantage of Cascading Style Sheets to format the rendered output of the Label control.
You should use a Label control when labelling the fields in an HTML form, this control includes a property named AssociatedControlID property. You can set this property to point at an ASP.NET control that represents a form field. For example, below Page contains a simple form that contains fields for entering a first and last name. Label controls label the two TextBox controls.
LabelForm.aspx:-
———————
<%@ Page Language=”C#” %>
<!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 id=”Head1” runat=”server”>
<title>Label Form</title>
</head>
<body>
<form id=”form1” runat=”server”>
<div>
<asp:Label
id=”lblFirstName”
Text=”First Name:”
AssociatedControlID=”txtFirstName”
Runat=”server” />
</br/>
<asp:TextBox
id=”txtFirstName”
Runat=”server” />
</br/></br/>
<asp:Label
id=”lblLastName”
Text=”Last Name:”
AssociatedControlID=”txtLastName”
Runat=”server” />
</br/>
<asp:TextBox
id=”txtLastName”
Runat=”server” />
</div>
</form>
</body>
</html>
When you provide a Label control with an AssociatedControlID property, the Label control is rendered as an HTML<label> tag instead of an HTML<span> tag. Use Label control with an AssociatedControlID property when labeling form fields.
Literal Control:-
Literal control displays text or HTML content in a browser similar to Label control. Unlike the Label control, Literal control do not render its content inside of a <span> tag.
For example, given below page uses Literal control in the page’s <head> tag to dynamically modify the title displayed in the browser title bar.
ShowLiteral.aspx:-
———————-
<%@ Page Language=”C#” %>
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional //EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<script runat=”server”>
void Page_Load()
{
ltlTitle.Text=DateTime.Now.ToString(“D”);
}
</script>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<title><asp:Literal id=”ltlTitle” Runat=”Server”/></title>
</head>
<body>
<form id=”form1” runat=”server”>
<div>
<h1>Look in the title bar</h1>
</div>
</form>
</body>
</html>
Literal control does not support any of the formatting properties supported by <span> tag. Literal control supports the Mode property, which is not supported by the Label control. This property enables you to encode HTML content and accepts the following values:
PassThrough:- Displays the content of the control without encoding
Encode:- Displays the contents of the control after HTML encoding the content.
Transform:- Displays the contents of the control after stripping markup not supported by the requesting device.
