23B74A0E.
zip
PLASMA UNIVERSITY
DOTNET (ASP)
CHAPTER 4. ASP.NET Web Controls
for Displaying Text
OUTLINE
In this Chapter, we will cover
Displaying text using the Literal and
Label Web controls.
Using the Literal Web control
Using the Label Web control
Understanding the differences
between the Literal and Label Web
controls
Altering the appearance of the Label
Web control
INTRODUCTION
Static HTML elements, are placed in the
ASP.NET page’s HTML portion. But unlike HTML
elements, Web controls can be accessed
programmatically from the page’s code.
In this manner, Web controls serve as an
intermediary between the source code and
HTML portions of an ASP.NET page.
ASP.NET’s various Web controls can be divided
into a number of categories, such as Web
controls that are used to display text, Web
controls that are used to collect user input, Web
controls that are used to display data from a
database, and so on.
EXAMINING THE WEB CONTROLS DESIGNED
FOR DISPLAYING TEXT
The HTML produced by an ASP.NET page can come
from either of the following:
The static HTML in the HTML portion
The HTML that is rendered by the page’s Web
controls
The static HTML in the HTML portion is sent to the
browser exactly as it is typed in. However, the
HTML produced by a Web control depends on the
values of its properties.
Two ASP.NET Web controls are designed for
displaying text: the Literal Web control and the
Label Web control. The differences between the
Literal and Label lie in the HTML produced by each
control..
EXAMINING THE WEB CONTROLS DESIGNED
FOR DISPLAYING TEXT
The Literal Web control’s rendered markup is the
value of its Text property.
The Label Web control, on the other hand, has a
number of formatting properties, such as
BackColor, ForeColor, Font, and so on, that specify
how the Label’s Text property should be displayed
USING THE LITERAL WEB CONTROL
The Literal Web control is one of the simplest Web
controls.
The Literal Web control has only eight properties.
These eight properties, as displayed in the Properties
window, are
Text
ClientIDMode
EnableViewState
Mode
ViewStateMode
Visible
(Expressions)
(ID)
When its Text property is not set, the Literal Web
USING THE LITERAL WEB CONTROL
SETTING THE LITERAL CONTROL’S
TEXT PROPERTY PROGRAMMATICALLY
To set the Literal control’s Text property
programmatically, use the following syntax in
the source code portion: Here, LiteralControlID is
the value of the Literal Web control’s ID property,
and value is the string value to assign to the
Literal Web control’s Text property.
We want the Literal Web control’s Text property set
to the current date and time whenever the page is
visited. Therefore, create an event handler for the
page’s Load event. The current date and time can
be retrieved using the DateTime.Now property.
CurrentTime.Text = DateTime.Now
LISTING 8.1 THE CURRENT DATE AND TIME IS
DISPLAYED IN THE CURRENTTIME LITERAL CONTROL
1: Partial Class LiteralTime
2: Inherits System.Web.UI.Page
3:
4: Protected Sub Page_Load(ByVal sender
As Object, ByVal e As System.EventArgs)
Handles Me.Load
5: CurrentTime.Text = DateTime.Now
6: End Sub
7: End Class
SETTING THE LITERAL CONTROL’S TEXT
PROPERTY PROGRAMMATICALLY
The Literal Web control does not contain any
properties to specify the format of its output.
There are no properties that you can set to indicate
that the text should be displayed in a larger font, or
that it should be underlined.
If you need to format the Literal control’s output,
you have to insert the appropriate HTML in the
control’s Text property. For example, to display the
current time in a bold font, you need to explicitly
include the HTML bold element (<b>):
CurrentTime.Text = “<b>The current time
is:</b> “ & DateTime.Now
USING THE LABEL WEB CONTROL
The Label Web control contains a number of
formatting properties that, when set, specify how
its Text property should be displayed in the
user’s browser.
For example, to display the text in a bold font,
set the Label control’s Font property’s Bold
subproperty to True; to have the text displayed in
a red font, set its ForeColor property to Red.
CONT…
EXAMINING THE FORMATTING PROPERTIES
OF THE LABEL WEB CONTROL
The Label Web control contains a number of
formatting properties, which can be divided into
the following classes: color properties, border
properties, font properties, and miscellaneous
properties.
LOOKING AT THE COLOR PROPERTIES
The Label Web control contains two properties for
specifying the color of the outputted text: ForeColor
and BackColor.
ForeColor : specifies the text’s color, whereas
BackColor specifies its background color. Now, set
the BackColor to a dark blue color and the
ForeColor to white.
Clicking the BackColor property’s ellipsis button
displays the More Colors dialog box shown in Figure
8.8.
If you do not see a color you like in the palette, click
the Custom button, which presents an interface
where you can specify the precise color settings.
CONT…
HOW COLORS ARE EXPRESSED IN HTML
Colors in a web page are typically expressed in one
of two ways:
as a named color or as a hexadecimal string
specifying the amount of red, green, and blue that,
mixed together, makes up the color.
There are only 16 “official” named colors (although
most browsers support many unofficial named
colors as well). Some of the official named colors
include black, white, red, green, blue, orange, and
yellow.
HOW COLORS ARE EXPRESSED IN HTML
Colors can also be expressed based on its
quantities of red, green, and blue, with
values ranging from 0 to 255.
This information is typically denoted as a
sixcharacter hexadecimal string.
Hexadecimal is an alternative numbering
system that has 16 digits—0, 1, 2, ..., 8, 9, A,
B, ..., E, F— instead of 10.
EXAMINING THE BORDER PROPERTIES
It is possible to put a border around the text
displayed by a Label Web control.
open a drop-down list that contains various
options for the style of border to be placed
around the Label Web control.
Select the Solid option for the BorderStyle
property.
We can change the border’s color via the
BorderColor property.
In addition to the BorderStyle and BorderColor
properties, there’s a BorderWidth property as
well.
EXAMINING THE BORDER PROPERTIES
DELVING INTO THE FONT
PROPERTIES
Let’s explore the Font property’s subproperties in
further detail.
Expand the Label’s Font property, which lists its
subproperties. (For a complete list of the
subproperties refer back to Table 8.1.).
Start by setting the Italic subproperty to True,
which will make the Label’s text appear in an italic
font in the designer.
Next, under the Name property, choose the font
name Arial.
Finally, type 22pt into the Size subproperty.
THE MISCELLANEOUS
PROPERTIES
The remaining Label Web control properties can be
classified as miscellaneous properties.
For example, there is a ToolTip property. The value of
this property, if specified, is displayed in the browser
whenever a visitor hovers his mouse pointer over the
label’s text.
AND LITERAL CONTROLS IN
ASP.NET
No Label control Literal control
Label control (by default) is Literal control is rendered as is
rendered as HTML <span> i.e. it is not enclosed within any
1 Tag i.e. the Text is enclosed HTML Tags.
within the HTML <span>
Tags.
Label control can be styled Literal control cannot be styled
i.e. its Font, Color, Font as it does not use any HTML
2
Size, etc. can be easily tag.
changed.
Label control can be easily Literal control in spite of giving
accessed via JavaScript or ID is rendered without ID hence
3 jQuery. cannot be accessed via
JavaScript or jQuery.
Generally used for Generally used for adding HTML
4 displaying Text content on content on page
Web pages.
END
