Scribd
Upload
2 views

Chapter4 _ASP.NET Web Controls for Displaying Text

Chapter 4 of the document discusses ASP.NET Web controls for displaying text, focusing on the Literal and Label controls. It explains their properties, differences, and how to programmatically set their text, as well as formatting options available for the Label control. The chapter also covers color and border properties, font properties, and miscellaneous properties related to the Label control.

Uploaded by

mohamedliban972
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
2 views

Chapter4 _ASP.NET Web Controls for Displaying Text

Chapter 4 of the document discusses ASP.NET Web controls for displaying text, focusing on the Literal and Label controls. It explains their properties, differences, and how to programmatically set their text, as well as formatting options available for the Label control. The chapter also covers color and border properties, font properties, and miscellaneous properties related to the Label control.

Uploaded by

mohamedliban972
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 24

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

You might also like