2. ASP.net Controls

8/8/2019 2. ASP.net Controls

http://slidepdf.com/reader/full/2-aspnet-controls 1/75

Your IT Partner

ASP.NET Controls



CMC Limited

Objectives After completion of this chapter you will be able to:

Use different types of Standard Controls available in

Visual Studio. Use different types of List Controls.

Explain different types of Validation Controls.

Use different types of Rich Controls.



CMC Limited

Introduction When you create ASP.NET Web pages, you can

use the following types of controls:

o HTML server controls: HTML server controls

expose an object model that maps very closely

to the HTML elements that they render.

o Web server controls: Web server controlsinclude buttons, text boxes, calendar, menus,

and a tree view control.

o Validation controls: Validation controls enable

to check for a required field, to test against a

specific value or pattern of characters, to verify

that a value lies within a range, and so on.

o User controls: By user controls it is an easy

way to create toolbars.



CMC Limited

HTML Server Controls

HTML server controls are HTML elements containing

attributes that make them programmable in server code.

By default, HTML elements in an ASP.NET Web page are

not available to the server. Instead, they are treated as

opaque text and passed through to the browser. The object model for HTML server controls maps closely to

that of the corresponding elements.

Any HTML element on a page can be converted to an

HTML server control by adding the attribute runat="server".

During parsing, the ASP.NET page framework createsinstances of all elements containing the runat="server"

attribute.



CMC Limited

Standard Controls

This section describes how to work with ASP.NET

Web server controls that appears on the Standard

tab of the Visual Studio Toolbox.

These include controls that enable you to display

buttons, lists, images, boxes, hyperlinks, labels,tables, as well as more complicated controls that

work with static and dynamic data or controls that

act as containers for other controls.



CMC Limited

Label Control

Modify the text displayed in a page dynamically, usethe Label control.

Following are the steps to add a Label Web server

control to a Web Forms page:

o From the Standard tab of the Toolbox, drag a

Label control onto the page.

o Add the following code in the Page_Load event.Protected Sub Page_Load(ByVal sender

As Object, ByVal e As

System.EventArgs) Handles Me.LoadLabel1.Text = "Current Time is: " &

DateTime.Now.ToString("T")

End Sub

Standard Controls contd..



CMC Limited

Press CTRL+F5 to run the page. The current time

will be displayed in the browser.


Label Control

Label control renders its contents in an HTML<span> tag. Whatever value you assign to the Text

property is rendered to the browser enclosed in a

<span> tag.



CMC Limited

Literal Control

The Literal control differs from the Label control in

that the Literal control does not add any HTML

elements to the text.

The Literal control does not support any style

attributes, including position attributes. However, theLiteral control enables you to specify whether the

content is encoded.

The Literal control supports the Mode property, which

specifies how the control handles markup that you

add to it.




CMC Limited

Protected Sub Page_Load(ByVal sender As object,

ByVal e As System.EventArgs) Handles Me.LoadLiteral1.Text = "<hr/>"

Literal2.Text = "<hr/>"

Literal3.Text = "<hr/>³

End Sub


Literal Control



CMC Limited

Textbox Control

The TextBox server control is an input control that letsthe user to enter text.

The TextBox control can be used to display three

different types of input fields depending on the values

of its TextMode property. The TextMode property accepts the following values:

o SingleLine: Displays a single-line input field.

o MultiLine: Displays a multi-line input field.

o Password: Displays a single-line input field inwhich the text is hidden. Setting the TextMode

property to TextBoxMode.Password makes sure

that other people cannot see a password.




CMC Limited


TextBox Controls



CMC Limited

CheckBox Control

The CheckBox control provides a way for users to specifyyes/no (true/false) choices.

This control supports several properties like below:

o AccessKey

o AutoPostBacko Checked

o TabIndex

o Text

o TextAlign




CMC Limited

Protected Sub CheckBox1_CheckedChanged(ByVal

sender As Object, ByVal e As

System.EventArgs) Handles

CheckBox1.CheckedChanged

Label1.Text = CheckBox1.Text & ": " &

CheckBox1.Checked.ToString

End Sub


CheckBox Control



CMC Limited

RadioButton Control

RadioButton control enables users to select from a smallset of mutually exclusive, predefined choices. Only one

radio button in a group of RadioButton controls can be

checked at a time.

The RadioButton controls are grouped together with the

RadioButton control¶s GroupName property. After groupingthe RadioButton controls only one of them can be checked

at a time.

The RadioButton control supports several properties. Some

of them are described below:


o AccessKey

o AutoPostBack

o Checked

o Enabled

o GroupName

o TabIndex

o Text

o TextAlign



CMC Limited


Protected Sub Button1_Click(ByVal sender As

Object, ByVal e As System.EventArgs) Handles

Button1.Click

If RadioButton1.Checked Then

Label1.Text = "Wrong. You have selected '"

& RadioButton1.Text & "' option. Try again."

ElseIf RadioButton2.Checked ThenLabel1.Text = "Right. You have selected '"

& RadioButton2.Text & "' option."

ElseIf RadioButton3.Checked Then

Label1.Text = "Wrong. You have selected

'" & RadioButton3.Text & "' option. Tryagain."

End If

End Sub



CMC Limited


RadioButton Control



CMC Limited

Button Control

Use the Button control to create a push button on the Webpage. By default, a Button control is a Submit button.

A Submit button does not have a command name

associated with the button and simply posts the Web page

back to the server.

The Button control supports several properties. Some of them are described below:


o AccessKey

o CommandArgumento CommandName

o Enabled

o OnClientClicko PostBackUrl

o TabIndex

o Texto UseSubmitBeh

avior



CMC Limited

Protected Sub Button1_Command(ByVal sender As

Object, ByVal e As

System.Web.UI.WebControls.CommandEventArgs)

Handles Button1.Command

Label1.Text = "You clicked the " &

e.CommandName & _

" - " & e.CommandArgument & "button."

End Sub


Button Control



CMC Limited

LinkButton Control

The LinkButton control, like the Button control, enables topost a form to the server. The LinkButton control renders a

link instead of a push button.

The LinkButton control supports several properties as given

below :


o CommandArgument

o CommandNameo OnClientClick

o PostBackUrl

The LinkButton control also supports the following two

events:

o Click

o Command



CMC Limited

ImageButton Control

The ImageButton control always displays an image. Boththe Click and Command events are raised when the

ImageButton control is clicked.

By using the OnClick event handler, you can

programmatically determine the coordinates where the

image is clicked. Code a response, based on the values of the coordinates

The ImageButton control supports several properties as

given below:


o AlternateText

o DescriptionUrl

o CommandArgument

o CommandNameo ImageAlign

o ImageUrl

o OnClientClicko PostBackUrl



CMC Limited

Protected Sub ImageButton1_Click(ByVal

sender As Object, ByVal e AsSystem.Web.UI.ImageClickEventArgs)

Handles ImageButton1.Click

If ((e.X > 35 And e.X < 50) And (e.Y >

35 And e.Y < 50)) Then

Label1.Text = "You hit the

target."

Else

Label1.Text = "You miss the

target."End If

End Sub




CMC Limited


ImageButton Control



CMC Limited

Image Control

The Image Web server control allows to display images onan ASP.NET Web page and manage the images in your

own code.

Unlike most other Web server controls, the Image control

does not support any events.

The Image control supports several properties. Some of them are described below:


o AlternateText

o DescriptionUrlo GenerateEmptyAlternateText

o ImageAlign

o ImageUrl



CMC Limited

ImageMap Control

The ASP.NET ImageMap control enables to create animage that has individual regions that users can click,

which are called hot spots. Each of these hot spots may

be a separate hyperlink or postback event.

An ImageMap control is composed out of instances of

the HotSpot class. A HotSpot defines the clickableregions in an image map. The ASP.NET framework ships

with three HotSpot classes:


o CircleHotSpot

o PolygonHotSpoto RectangleHotSpot



CMC Limited

The ImageMap control supports several properties.

Some of them are described below:


o AlternateText

o DescriptionUrl

o GenerateEmptyAlternateText

o HotSpotMode

o HotSpots

o ImageAlign

o ImageUrl

o Target

ImageMap Control



CMC Limited

Panel Control

The Panel control as a container for other controls. Thisis particularly useful when you are creating content

programmatically and you need a way to insert the

content into the page.

Manage a group of controls and associated markup as a

unit by putting them in a Panel control and thenmanipulating the Panel control.

Add scrolling behavior by placing the control in a Panel

control. To add scrollbars to the Panel control, set the

Height and Width properties to constrain the Panelcontrol to a specific size, and then set the ScrollBars

property.




CMC Limited

The Panel control supports many properties as given below:


o DefaultButton

o Direction

o GroupingText

o HorizontalAlign

o ScrollBars

o Wrap

Panel Control



CMC Limited

HyperLink Control

Add a hyperlink to Web Forms page by placing aHyperLink Web server control on the page and

associating it with a URL.

Specify that HyperLink controls render as either text or

as graphics.

The Hyperlink control supports several properties asgiven below:


o Enabled

o ImageUrl

o NavigateUrlo Target

o Text



CMC Limited

List Controls

The list controls include the ListBox, DropDownList,CheckBoxList, RadioButtonList, and BulletedList. The list

controls work in essentially the same way but are

rendered differently in the browser.

The ListItem control supports the following five

properties:


o Attributes

o Enabled

o Selected

o Texto Value



CMC Limited

DropDownList Control

The DropDownList Web server control enables toselect an item from a predefined list. This control does

not support multi-selection mode.

The DropDownList control is actually a container for

the list items, which are of type ListItem. Each ListItem

object is a separate object with its own properties.

It raises the SelectedIndexChanged event when users

select an item. This event does not cause the page to

be posted to the server. However, you can cause the

control to force an immediate post by setting the AutoPostBack property to True.




CMC Limited


ListItem Collection Editor



CMC Limited

Protected Sub Page_Load(ByVal sender As Object,

ByVal e As System.EventArgs) Handles Me.Load

DropDownList1.Items.Add(New ListItem("C", "C"))DropDownList1.Items.Add(New ListItem("C++",

"C++"))

DropDownList1.Items.Add(New ListItem("Visual

Basic 6", "VB6"))

End Sub


DropDownList Control



CMC Limited

RadioButtonList Control

The RadioButttonList control displays a list of radiobuttons that can be arranged either horizontally or

vertically.

The RadioButtonList control, like the DropDownList

control, enables a user to select only one list item at a

time. The RadioButtonList control includes three properties

that have an effect on its layout:


o RepeatColumns

o RepeatDirectiono RepeatLayout



CMC Limited

Following are the steps to add a RadioButtonList Web

server control to a Web Forms page.

o From the Standard tab of the Toolbox, drag a

RadioButtonList control onto the page.

o Add items to the RadioButtonList Web server control

in the same way as shown in case of DropDownList

Web server control.


RadioButtonList Control



CMC Limited

ListBox Control

Use the ListBox Web server control to display multipleitems at a time and to enable users to select one or more

items from the predefined list.

The ListBox control differs from a DropDownList control

in that it can display multiple items at a time and that it

optionally enables the user to select multiple items. The ListBox control raises the SelectedIndexChanged

event when users select an item.

This event does not cause the page to be posted to the

server, but the control to force an immediate postback by

setting the AutoPostBack property to True.




CMC Limited


ListBox Control



CMC Limited

CheckBoxList Control

The CheckBoxList control renders a list of check boxes.It can be rendered horizontally or vertically.

The CheckBoxList control includes three properties that

affect its layout:

o RepeatColumns: The number of columns of check

boxes to display.o RepeatDirection: The direction in which the check

boxes are rendered. Possible values are Horizontal

and Vertical.

o RepeatLayout: Determines whether the check boxes

are displayed in an HTML table. Possible values are

Table and Flow.




CMC Limited

Follow the steps to add a CheckBoxList Web server

control to a Web Forms page:

o From the Standard tab of the Toolbox, drag aCheckBoxList control onto the page.

o In the Properties window, set the RepeateColumns

property to Horizontal.


CheckBoxList Control



CMC Limited

BulletedList Control

The BulletedList control renders either an unordered(bulleted) or ordered (numbered) list. Each list item can

be rendered as plain text, a LinkButton control, or a link

to another web page.

Control the appearance of the bullets that appear for

each list item with the BulletStyle property. This property accepts NotSet, Numbered, LowerAlpha,

UpperAlpha, LowerRoman, UpperRoman, Disc, Circle,

Square, and CustomImage values.

Modify the appearance of each list item by modifying the

value of the DisplayMode property.

This property accepts one of the following:

i) HyperLink ii) LinkButton iii) Text




CMC Limited

Follow the steps to add a BulletedList Web server control

to a Web Forms page:

o From the Standard tab of the Toolbox, drag aBulletedList control onto the page.

o In the Properties window, set the DisplayMode

property to Hyperlink and Target property to _blank.


ListItem Collection Editor



CMC Limited

Press CTRL+F5 to run the page. When you click one of

the hyperlinks, the page is opened in a new window.


BulletedList Control



CMC Limited

Validation Controls Validation controls can be used to validate user

input entered in a Web form.

The following are the list of ASP.NET validation

controls and how to use them.

Type of validation Control to use Description

Required entryRequiredFieldValidator

Ensures that the user does not skip an entry.Comparison to a value CompareValidator Compares a user's entry against a constant value, against

the value of another control, or for a specific data type.

Range checking RangeValidator Checks that a user's entry is between specified lower andupper boundaries. You can check ranges within pairs of numbers, alphabetic characters, and dates.

Pattern matching RegularExpressionValidator Checks that the entry matches a pattern defined by aregular expression.

User-defined CustomValidator Checks the user's entry using validation logic that youwrite. This type of validation enables you to check thevalues derived at run time.

Lists of Validation Control



CMC Limited

RequiredFieldValidator Control

The RequiredFieldValidator control enables to require auser to enter a value into a form field.

Must set two important properties when using the

RequiredFieldValdiator control:

i) ControlToValidate ii) Text

V alidation Controls contd..

RequiredFieldValidator Control



CMC Limited

CompareValidator Control

Use the CompareValidator control to compare the valueentered by the user in an input control, such as a

TextBox control, with the value entered in another input

control or a constant value.

The CompareValidator control has following:


o ControlToValidate

o ControlToCompare

o Text

o Type

o Operator

o ValueToCompare



CMC Limited

Set the properties in the CompareValidator control:

o ControlToCompare to TextBox1

o ControlToValidate to TextBox2o Type to Date

o Operator to GreaterThan

o ErrorMessage to Finish date must be greater than

beginning date


CompareValidator Control



CMC Limited

RangeValidator Control

Use the RangeValidator control to determine whether auser's entry falls within a specific range of values.

Must set following properties when using the

RangeValidator control:


o ControlToValidate:

o MinimumValue

o MaximumValueo Type



CMC Limited

Set the following properties of the RangeValidator control:

o ControlToValidate to TextBox1

o MininumValue to 10o MaximumValue to 100

o Type to Integer

o Operator to GreaterThan

o ErrorMessage to Value out of range

The following output will be displayed.


RangeValidator Control



CMC Limited

RegularExpressionValidator Control

The RegularExpressionValidator control is used todetermine whether the value of an input control

matches a pattern defined by a regular expression.

This type of validation allows you to check for

predictable sequences of characters, such as those insocial security numbers, e-mail addresses, telephone

numbers, postal codes, and so on.

All regular expressions consist of two kinds of

characters:

o Literals

o Metacharacters




CMC Limited

Regular Expression Characters


Character Description* Zero or more occurrences of the previous character or subexpression.

+ One or more occurrences of the previous character or subexpression.

( ) Groups a subexpression that will be treated as a single element.

{m,n} The previous character (or subexpression) can occur from m to n times.

| Either of two matches.

[ ] Matches one character in a range of valid characters.

[^ ] Matches a character that isn¶t in the given range.

. Any character except newline.

\s Any whitespace character (such as a tab or space).

\S Any nonwhitespace character.

\d Any digit character.\D Any character that isn¶t a digit.

\w Any ³word´ character (letter, number, or underscore).

\W Any character that isn¶t a ³word´ character (letter, number, or underscore).



CMC Limited

Commonly used regular expression


Content Regular Expression

Description

E-mail

address

\S+@\S+\.\S

+

Check for an at (@) sign and dot (.) and allow

nonwhitespace characters only.

Password \w+ Any sequence of one or more word characters (letter, space,

or underscore).

Specific-

length

password

\w{4,10} A password that must be at least four characters long but no

longer than ten characters.

Advanced

password

[a-zA-

Z]\w{3,9}

As with the specific-length password, this regular expression

will allow four to ten total characters. The twist is that the first

character must fall in the range of a±z or A±Z.

Limited-

length field

\S{4,10} Like the password example, this allows four to ten

characters, but it allows special characters (asterisks,

ampersands, and so on).

U.S. Social

Security

number

\d{3}-\d{2}-

\d{4}

A sequence of three, two, then four digits, with each group

separated by a dash. You could use a similar pattern when

requiring a phone number.



CMC Limited

Regular Expression Editor


RegularExpressionValidator Control



CMC Limited

CustomValidator Control

If none of the other validation controls perform the typeof validation that you need, you can use the

CustomValidator control.

The CustomValidator control has following important

properties:o ControlToValidate

o Text

o ClientValidationFunction


C



CMC Limited

Adding ServerValidate Event


CustomValidator Control

V lid ti C t l td



CMC Limited

ValidationSummary Control

The ValidationSummary control allows you tosummarize the error messages from all validation

controls on a Web page in a single location.

The summary can be displayed as a list, a bulleted list,

or a single paragraph, based on the value of theDisplayMode property.

The ValidationSummary control supports the following

properties:

o DisplayMode

o HeaderTexto ShowMessageBox

o ShowSummary


V lid ti C t l td



CMC Limited

Web Form in Design View


ValidationSummary Control

V lid ti C t l td



CMC Limited

ValidationSummary Control ± Displaying error messages in

a popup alert box




CMC Limited

Rich Controls

Rich controls are web controls that model complexuser interface elements.

The Rich Controls supports the following properties:

o FileUpload

o Calendar

o AdRotator o MultiView

o Wizard control

Ri h C t l td



CMC Limited

FileUpload Control

The FileUpload control enables users to uploadpictures, text files, or other files.

The FileUpload control displays a text box where users

can enter the full path to the file on the local computer

that they want to upload to the server. The user can select the file by clicking the Browse

button, and then locating it in the Choose File dialog

box.

For security reasons, you cannot pre-load the name of

a file into the FileUpload control. The FileUpload control does not automatically send a

file to the server after the user selects the file to upload.

R ich Controls contd..

Ri h C t l td



CMC Limited

The FileUpload control supports many properties like below:


o FileByteso FileContent

o FileName

o HasFileo PostedFile o Focuso SaveAs

FileUpload Control ± No file provided to upload

Rich Controls contd



CMC Limited


FileUpload Control ± in case of selecting file other than

".bmp", ".gif" or ".jpg³

Rich Controls contd



CMC Limited


FileUpload Control ± After successfully upload the file

Rich Controls contd



CMC Limited

Calendar Control

The Calendar Web server control can be used to display

selectable dates in a calendar and to display data

associated with specific dates.

The Calendar control supports many properties like below:


o DayNameFormat

o NextMonthText

o NextPrevFormat

o PrevMonthText

o SelectedDate

o SelectedDateso SelectionMode

o SelectMonthText

o SelectWeekText

o ShowDayHeader

o ShowNextPrevMonth

o ShowTitle

o TitleFormat

o TodaysDate

o VisibleDateo DayRender

o SelectionChanged

o VisibleMonthChanged

Rich Controls contd



CMC Limited


Calendar Control

Rich Controls contd



CMC Limited

AdRotator Control

The AdRotator Web server control provides a way to

display advertisements on your ASP.NET Web pages.

The control displays a .gif file or other graphic image that

provide. When users click the ad, they are redirected to a

target URL that you have specified.

The control automatically reads advertisement information,such as the graphic file name and the target URL, from a

list of ads that you provide using a data source.

The AdRotator control selects ads randomly, changing the

displayed ad each time the page is refreshed.

Ads can be weighted to control the priority level of banners, making it possible to have certain ads display

more often than others.


Rich Controls contd



CMC Limited

The AdRotator control supports many properties as below:


o AdvertisementFileo AlternateTextField

o DataMember

o DataSourceo DataSourceID

o ImageUrlField

o KeywordFilter o NavigateUrlField

o Target

Add xml code as shown above within this ads.xml file.

XML file

Rich Controls contd



CMC Limited


AdRotator Control

Rich Controls contd



CMC Limited

MultiView Control

The MultiView control enables you to hide and display

different areas of a page.

The MultiView control contains one or more View controls.

You use the MultiView control to select a particular View

control to render.

The contents of the remaining View controls are hidden.You can render only one View control at a time.

The MultiView control supports the following properties:

o ActiveViewIndex

o Views

o GetActiveViewo SetActiveView


Rich Controls contd



CMC Limited


MultiView and View Controls ± multiview.aspx

Rich Controls contd



CMC Limited


Recognized Command Names for the MultiView

Command Name MultiView Field Description

PrevView PreviousViewCommandName Moves to the previous view.

NextView NextViewCommandName Moves to the next view.

SwitchViewByID SwitchViewByIDCommandName Moves to the view with a

specific ID (string name). TheID is taken from the

CommandArgument property

of the button control.

SwitchViewByIndex SwitchViewByIndexCommandName Moves to the view with a

specific numeric index. The

index is taken from the

CommandArgument property

of the button control.

Rich Controls contd



CMC Limited


MultiView Control ± Displaying View1

Rich Controls contd



CMC Limited

Wizard Control

The Wizard control, like the MultiView control, can be used

to divide a large form into multiple sub-forms.

The Wizard control, however, supports many advanced

features that are not supported by the MultiView control.

The Wizard control supplies navigation buttons and a

sidebar with links for each step on the left. The Wizard control contains one or more WizardStep child

controls.

The Wizard control supports the following properties:


o ActiveStep

o ActiveStepIndexo CancelDestinationPageUrl

o DisplayCancelButton

o DisplaySideBar

o FinishDestinationPageUrl

o HeaderText

o WizardSteps

Rich Controls contd



CMC Limited

The Wizard control also supports the following templates:


o FinishNavigationTemplateo HeaderTemplate

o SideBarTemplate

o StartNavigationTemplateo StepNavigationTemplate

The Wizard control also supports the following methods:

o GetHistory()o GetStepType()

o MoveTo()

The Wizard control also supports the following events:

o ActiveStepChangedo CancelButtonClick

o FinishButtonClick

o Activate

o NextButtonClicko PreviousButtonClick

o SideBarButtonClick

o Deactivate

Rich Controls contd..



CMC Limited

The WizardStep control supports the following properties:


o AllowReturno Name

o StepType

o Titleo Wizard

Follow the steps to work with Wizard web control:

Wizard Control ± Step 1 WizardStep




CMC Limited








Wizard Control

2. ASP.net Controls

Documents

Transcript of 2. ASP.net Controls