Ch3 server controls

 Types of Server Controls,
 HTML Server Controls,
 Web Controls,
 List Controls,
 Input Validation Controls,
 Rich Controls

 ASP.NET server controls are a fundamental part of
the ASP.NET architecture.

 Server controls are classes in the .NET Framework
that represent visual elements on a web form

 Some of these classes are relatively
straightforward and map closely to a specific HTML
tag.

Other controls are much more ambitious
abstractions that render a more complex
representation
2

ASP.NET offers many different server controls.
HTML server controls:
 Classes that wrap the standard HTML elements.
 Two examples include HtmlAnchor (for the <a>
tag) and HtmlSelect (for the <select> tag)
 Can turn any HTML tag into a server control
 If there isn’t a direct corresponding class,
ASP.NET will simply use the HtmlGenericControl
class. simply add the runat="server" attribute to
turn into server control
3

Web controls:
 Duplicate the functionalities of the basic HTML
elements
 But have a more consistent and meaningful set of
properties and methods that make it easier for the
developer to declare and access them
 Some examples are the HyperLink, ListBox, and
Button controls.
 More special types of web controls are also
available.

4

Rich controls:

 Advanced controls have the ability to
generate a large amount of HTML markup
and even client-side JavaScript to create the
interface.
 Examples include the Calendar, AdRotator,
and TreeView controls.

5

Validation controls:
 Set of controls allows you to easily validate an
associated input control against several standard or
user-defined rules.

 Can specify that the input can’t be empty, that it
must be a number

 If validation fails, you can prevent page
processing or allow these controls to show inline
error messages in the page.

6

Data controls
 Include sophisticated grids and lists that are
designed to display large amounts of data, with
support for advanced features such as editing,
sorting.

 Includes the data source controls that allow
you to bind to
different data sources declaratively, without
writing extra code.
7

Navigation controls
 Designed to display site maps and allow the user
to navigate from one page to another.
Login controls
 Support forms authentication, an ASP.NET model
for authenticating users against a database and
tracking their status
 Can use these controls to get prebuilt,
customizable login pages, password recovery, and
user-creation wizards.
8

Web parts controls
 ASP.NET model for building componentized,
highly configurable web portals.

ASP.NET AJAX controls
 Allow you to use Ajax techniques in your web
pages without forcing you to write client-side code
 Ajax-style pages can be more responsive because
they bypass the regular postback-and-refresh page
cycle.
9

ASP.NET mobile controls
 Set of controls that resembles the web
controls but is customized to support mobile
clients such as PDAs, smart phones, and so on

 Renders pages to markup standards such as
HTML 3.2 or WML 1.1.

10

All server controls derive from the base Control class
in the System.Web.UI namespace.

11

Most commonly used members of the Control class
Property Description
ClientID Identifier of the control
Controls Returns the collection of child controls
EnableViewState Returns or sets a Boolean value related to view
state of control
ID Returns or sets the identifier of the control
Page Returns a reference to the page object that
contains the control
Parent Returns a reference to the control’s parent
Visible Returns or sets a Boolean value indicating whether
the control should be Rendered
12

 Defined in the namespace System.Web.UI.HtmlControls

13

HTML server controls on the page is the same as what you use
for normal static HTML tags, with the addition of the
runat="server“ attribute.
Tag Declaration .NET Class Specific Members
<a runat="server"> HtmlAnchor HRef, Target, Title,
Name, ServerClick event
<button HtmlButton CausesValidation,
runat="server"> ValidationGroup,
ServerClick event
<form HtmlForm Enctype, Method, Target,
runat="server"> DefaultButton,
DefaultFocus
Complete this slide – page 120
<img HtmlImage Align, Alt, Border, Height,
runat="server"> Src, Width
14

<input HtmlInputButton Type, Value,
type="button" CausesValidation,
runat="server"> ValidationGroup,
ServerClick event
<input HtmlInputReset Type, Value
type="reset"
runat="server">
<input HtmlInputSubmit Type, Value, CausesValidation,
type="submit" ValidationGroup, ServerClick
runat="server"> event
<input HtmlInputCheckBox Checked, Type, Value,
type="checkbox" ServerClick event
runat="server">

15


<input type="file" HtmlInputFile Accept, MaxLength,
runat="server"> PostedFile, Size, Type,
Value

<input HtmlInputHidden Type, Value,
type="hidden" ServerChange event
runat="server">

<input HtmlInputImage Align, Alt, Border,
type="image" Src, Type, Value,
runat="server"> CausesValidation,
ValidationGroup,
ServerClick event

<input HtmlInputRadioButton Checked, Type, Value,
type="radio" ServerChange event
runat="server">

16

<input type="text" HtmlInputText MaxLength, Type,
runat="server"> Value,
ServerChange event
<input HtmlInputPassword MaxLength, Type,
type="password" Value,
runat="server"> ServerChange event
<select HtmlSelect Multiple,
runat="server"> SelectedIndex,
Size, Value,
DataSource,
DataTextField,
DataValueField, Items
(collection),
ServerChange event
<table HtmlTable Align, BgColor,
runat="server">, Border,
<td runat="server"> BorderColor,
CellPadding,
CellSpacing, Height,
17


<th runat="server"> HtmlTableCell Align, BgColor,
Border,
BorderColor, ColSpan,
Height, NoWrap,
RowSpan, VAlign,
Width
<tr runat="server"> HtmlTableRow Align, BgColor,
Border,
BorderColor, Height,
VAlign, Cells
(collection)
<textarea HtmlTextArea Cols, Rows, Value,
runat="server"> ServerChange event

Any other HTML HtmlGenericControl None
tag with the
runat="server" 18

 Can configure a standard HtmlInputText
control

 To read or set the current text in the text
box, you use the Value property.

19

 Sometimes you don’t know in advance how many
text boxes, radio buttons, table rows, or other
controls
 because this might depend on other factors such as
the number of records stored in a database or the
user’s input.
 With ASP.NET, the solution is easy.
 Can simply create instances of the HTML server
controls you need, set their properties with the
object-oriented approach

20

 HTML server controls provide a sparse event
model with two possible events: ServerClick and
ServerChange.
 The ServerClick event is simply a click that is
processed on the server side
 The ServerChange event responds when a
change has been made to a text or selection
control

21

HTML Control Events
Event Controls That Provide It
ServerClick HtmlAnchor, HtmlButton,
HtmlInputButton,
HtmlInputSubmit,HtmlInputReset,
HtmlInputImage

ServerChange HtmlInputText, HtmlInputCheckBox,
HtmlInputRadioButton,
HtmlInputHidden, HtmlSelect,
HtmlTextArea
22

Portion of the Inheritance Hierarchy for Web Controls

23

 HTML server controls provide a relatively fast way
to migrate to ASP.NET
 ASP.NET provides a higher-level web control
model
 web controls are defined in the
System.Web.UI.WebControls namespace
 Web controls also enable additional features,
such as automatic postback
 Extended controls don’t just map a single HTML
tag but instead generate more complex output made
up of several HTML tags and JavaScript code
24

 All the web controls inherit from the WebControl
class.

 The WebControl class also derives from Control.

25

AccessKey Returns or sets the keyboard shortcut that
allows the user to quickly navigate to the
control.
BackColor Returns or sets the background color
BorderColor Returns or sets the border color
BorderStyle One of the values from the BorderStyle
enumeration, including Dashed, Dotted,
Double, Groove, Ridge, Inset, Outset,
Solid, and None.

26

BorderWidth Returns or sets the border width.
CssClass Returns or sets the CSS style to associate
with the control. The CSS style can be
defined in a <style> section at the top of
the page or in a separate CSS file
referenced by the page.
Enabled Returns or sets the control’s enabled state.
If false, the control is usually rendered
grayed out and is not usable.
Font Returns an object with all the style
information of the font used for the
control’s text.27

ForeColor Returns or sets the foreground color.

Height Returns or sets the control’s height.
TabIndex A number that allows you to control the
tab order. This property is supported only
in Internet Explorer 4.0 and higher.
Tooltip Displays a text message when the user
hovers the mouse above the control. Many
older browsers don’t support this property.
Width Returns or sets the control’s width.

28

ASP.NET Generated HTML Key Members
<asp:Button> <input type="submit"/> Text, CausesValidation,
or PostBackUrl,ValidationG
<input type="button"/> roup, Click event
<asp:CheckBox> <input AutoPostBack, Checked,
type="checkbox"/> Text, TextAlign,
CheckedChanged event
<asp:FileUpload <input type="file"> FileBytes, FileContent,
> FileName,
HasFile, PostedFile,
SaveAs()
<asp:HiddenFiel <input type="hidden"> Value
d>
29

<asp:HyperLink> <a>...</a> ImageUrl,
NavigateUrl, Target,
Text
<asp:Image> <img/> AlternateText,
ImageAlign,
ImageUrl
<asp:ImageButton <input CausesValidation,
> type="image"/> ValidationGroup,
Click event
<asp:ImageMap> <map> HotSpotMode,
HotSpots
(collection),
AlternateText,
30
ImageAlign,

<asp:Label> <span>...</span> Text,
AssociatedControlID
<asp:LinkButton> <a><img/></a> Text, CausesValidation,
Validation-
Group, Click event
<asp:Panel> <div>...</div> BackImageUrl,
DefaultButton,
GroupingText,
HorizontalAlign,
Scrollbars, Wrap
<asp:RadioButton> <input type="radio"/> AutoPostBack,
Checked, GroupName,
Text, TextAlign,
CheckedChanged event
31

<asp:Table> <table>...</table> BackImageUrl, CellPadding,
CellSpacing, GridLines,
HorizontalAlign, Rows
(collection)
<asp:TableCell <td>...</td> ColumnSpan, HorizontalAlign,
> RowSpan, Text, VerticalAlign,
Wrap
<asp:TableRow <tr>...</tr> Cells (collection),
> HorizontalAlign,
VerticalAlign
<asp:TextBox> <input type="text"/> AutoPostBack, Columns,
or MaxLength, ReadOnly, Rows,
<textarea>...</textar Text, TextMode, Wrap,
ea> TextChanged event
32

<asp:TextBox runat="server" ID="TextBox1"
Text="This is a test” ForeColor="red"
BackColor="lightyellow" Width="250px”Font-
Name="Verdana" Font-Bold="True" Font-Size="20" />

Differences:
• The control is declared using its class name (TextBox)
instead of the HTML tag name (input).
• The default content is set with the Text property, instead of
a less obvious Value attribute.
• The style attributes (colors, width, and font) are set by
direct properties, instead of being grouped together in a
single style attribute. 33

Enumerations:
 Enumerations are used heavily in the .NET class library
 Used to group a set of related constants.
 For example, can set a control’s BorderStyle property, you
can choose one of several predefined values from the
BorderStyle enumeration

ctrl.BorderStyle = BorderStyle.Dashed;

In the .aspx file, set an enumeration by specifying one of
the allowed values as a string (don’t include the name of the
enumeration type)
<asp:TextBox BorderStyle="Dashed" Text="Border
Test" id="txt” runat="server" />
34

Colors:
 Color property refers to a Color object (System.Drawing namespace)
 Can create Color objects in several ways:
• Using an ARGB (alpha, red, green, blue) color value: specify each
value as integer.
// Create a color from an ARGB value.
int alpha = 255, red = 0, green = 255, blue = 0;
ctrl.ForeColor = Color.FromArgb(alpha, red, green, blue);
• Using a predefined .NET color name: choose the correspondingly
named read-only property from the Color class
// Create a color using a .NET name.
ctrl.ForeColor = Color.Blue;
• Using an HTML color name: You specify this value as a string using
the ColorTranslator class.
// Create a color from an HTML code.
ctrl.ForeColor = ColorTranslator.FromHtml("Blue");
35

The Default Button:
 ASP.NET includes a mechanism that allows you
to designate a default button on a web page.
The default button is the button that is
“clicked” when the user presses the Enter key.
<form id="Form1" DefaultButton="cmdSubmit"
runat="server“>

36

Scrollable Panels:
 The Panel control has the ability to scroll.

The panel is rendered as a <div> tag.

37

 Server-side events work in much the same
way as the server events of the HTML server
controls.

 Web controls support the AutoPostBack
feature.

 Example application adds a new entry to a
list control every time one of the events
occurs 38

 The list controls are specialized web controls
that generate list boxes, drop-down lists, and other
repeating controls.

 Can be either bound to a data source

 Allow the user to select one or more items

39

Control Description
A drop-down list populated by a collection of
<asp:DropDownList <asp:ListItem> objects.In HTML, it is rendered
> by a <select> tag with the size="1" attribute.
A list box list populated by a collection of
<asp:ListBox> <asp:ListItem> objects. In HTML, it is rendered
by a <select> tag with the size="x" attribute,
where x is the number of visible items.
<asp:CheckBoxList> Its items are rendered as check boxes.
<asp:RadioButtonLis Like the <asp:CheckBoxList>, but the items are
t> rendered as radiobuttons.
A static bulleted or numbered list. In HTML, it
<asp:BulletedList> is rendered using the <ul> or <ol> tags( Can use
to create list of hyperlinks).
40

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

 RadioButtonList and CheckBoxList render
multiple option buttons or check Boxes.

41

The BulletedList control is the server-side equivalent of
the <ul> (unordered list) or <ol>

BulletStyle Determines the type of list
BulletImageUrl If the BulletStyle is set to
CustomImage, this points to the
image.
FirstBulletNumber this sets the first value
DisplayMode Determines whether the text of each
item is rendered as text or a
hyperlink
42

Validation Control Description
<asp:RequiredFieldValid Checks that the control to validate is not empty.
ator>
<asp:RangeValidator> Checks that the value of the associated control is
within a
specified range
<asp:CompareValidator Checks that the value of the associated control
> matches a
specified comparison
<asp:RegularExpression Checks if the value of the control it has to
Validator> validate matches
the specified regular expression
<asp:CustomValidator> Allows you to specify any client-side JavaScript
validation
routine and its server-side counterpart for
validataion
<asp:ValidationSummar Shows a summary with the error messages for
y> each failed
validator on the page
43

 What happens when the user clicks the
button depends on the value of the
CausesValidation property.
 CausesValidation is false: ASP.NET will
ignore the validation controls.
 CausesValidation is true (the default):
ASP.NET will automatically validate the
page when the user clicks the button.

44

The validation control classes are found in the
System.Web.UI.WebControls namespace and inherit
from the BaseValidator class.

BaseValidator Members:
ControlToValidate Display
EnableClientScript Enabled
ErrorMessage Text
IsValid SetFocusOnError
ValidationGroup Validate()
45

 The simplest available control is RequiredFieldValidator.
 Ensures that the associated control is not empty.
 Simple Example:
<asp:TextBox runat="server" ID="Name" />
<asp:RequiredFieldValidator runat="server"
ControlToValidate="Name" ErrorMessage="Name is
required” Display="dynamic">*
</asp:RequiredFieldValidator>
46

 The RangeValidator control verifies that an input value falls
within a predetermined range.
 The MinimumValue and MaximumValue properties define an
inclusive range of valid values
 Example:
<asp:TextBox runat="server" ID="DayOff" />
<asp:RangeValidator runat="server" Display="dynamic"
ControlToValidate="DayOff" Type="Date"
ErrorMessage="Day Off is not within the valid interval"
MinimumValue="08/05/2008"
MaximumValue="08/20/2008">*
</asp:RangeValidator>
47

The CompareValidator control compares a value in one control
with a fixed value or, more commonly, a value in another control.
Operator property allows you to specify the type of comparison
you want to do(Equal, NotEqual, GreaterThan, GreaterThanEqual,
LessThan, LessThanEqual, and DataTypeCheck).
 The DataTypeCheck value forces the validation control to check
that the input has the required data type.

<asp:TextBox runat="server" ID="Age" />
<asp:CompareValidator runat="server" Display="dynamic"
ControlToValidate="Age" ValueToCompare="18"
ErrorMessage="You must be at least 18 years old"
Type="Integer" Operator="GreaterThanEqual">*
</asp:CompareValidator>
48

 The RegularExpressionValidator control is a powerful tool in the
ASP.NET developer’s toolbox.
 allows you to validate text by matching against a pattern defined
in a regular expression
Regular expressions are also powerful tools—they allow you to
specify complex rules.
<asp:TextBox runat="server" ID="Email" />
<asp:RegularExpressionValidator runat="server"
ControlToValidate="Email"
ValidationExpression=".*@.{2,}..{2,}"
ErrorMessage="E-mail is not in a valid format"
Display="dynamic">*
</asp:RegularExpressionValidator>

49

Character Description
Escapes
Ordinary Characters other than .$^{[(|)*+? match
characters themselves
b Matches a backspace
t Matches a tab
r Matches a carriage return
v Matches a vertical tab.
f Matches a form feed
n Matches a newline
If followed by a special character (one of
.$^{[(|)*+?), this character escape matches
that character literal.
50

Character Class Description
. Matches any character except n.
[aeiou] Matches any single character specified in the set.
[^aeiou] Matches any character not specified in the set.
[3-7a-dA-D] Matches any character specified in the specified ranges (in
the example the ranges are 3–7, a–d, A–D).
w Matches any word character; that is, any alphanumeric
character or the underscore (_).
W Matches any non-word character
s Matches any whitespace character (space, tab, form feed,
newline, carriage return, or vertical feed).
S Matches any non-whitespace character.
d Matches any decimal character.
D Matches any non-decimal character
51

Quantifiers

Quantifier Quantifier Description
* Zero or more matches
+ One or more matches
? Zero or one matches
{N} N matches
{N,} N or more matches
{N,M} Between N and M matches (inclusive

52

Commonly Used Regular Expressions
Content Regular Expression Description
E-mail address S+@S+.S+ Defines an email address that
requires anat symbol (@) and a dot
(.), and only allows nonwhitespace
characters.
Password w+ Defines a password that allows any
sequence of word characters
Specific-length w{4,10} Defines a password that must be at
password leastfour characters long but no
longer than ten Characters
Advanced [a-zA-Z]w{3,9} Defines a password that allows
password four to ten total characters, as
with the specific-length password.
The twist is that the first
character must fall in the range of
a–z or A–Z (that is to say, it must
start with a nonaccented ordinary
53 letter).

Another [a-zA-Z]w*d+w* Defines a password that starts with
advanced a letter character, followed by
password zero or more word characters, one
or more digits, and then zero or
more word characters. In short, it
forces a password to contain a
number somewhere inside it. You
could use a
similar pattern to require two
numbers or any other special
character.
Limited-length S{4,10} Defines a string of four to ten
field characters
(like the password example), but it
allows
special characters (asterisks,
ampersands,
54
and so on).

Social Security d{3}-d{2}-d{4} Defines a sequence of three, two,
number (US) and then
four digits, with each group
separated by a
hyphen. A similar pattern could be
used
when requiring a phone number.

55

 The ValidationSummary control doesn’t
perform any validation
 it allows you to show a summary of all the
errors in the page
 summary displays the ErrorMessage value of
each failed validator
 ShowMessageBox and ShowSummary
Properties
56

 Rich controls provide an object model that
has a complex HTML representation and also
client side JavaScript.

Examples:-
 AdRotator

 Calendar

 Steps for using AdRotator

 Define the XML schedule file with <Ad> tag
and its properties defined

 Specify Advertisement file value un
AdRotator definition in Page design view.

 AdCreated event can be trapped

TAG Description

<ImageUrl> The image that will be displayed.

<NavigateUrl> The link will be followed if user clicks
the banner.

<Alternate> The text will be displayed in place of
picture.

A new ad is selected whenever the Web
<Impression> page refreshes. An impression attribute
can be assigned to each ad. It controls
how often an ad is selected relative to
other ad in ad file

 <asp:Calendar ID="Calendar2"
runat="server"></asp:Calendar>

Ch3 server controls

Recommended

More Related Content

What's hot (20)

Similar to Ch3 server controls (20)

More from Madhuri Kavade (6)

Ch3 server controls