ch3 server controls

SERVER CONTROLS

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

2

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

SERVER CONTROLS

3

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

TYPES OF SERVER CONTROLS

4

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.

TYPES OF SERVER CONTROLS CONT…

5

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.

TYPES OF SERVER CONTROLS CONT…

6

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.

TYPES OF SERVER CONTROLS CONT…

7

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.

TYPES OF SERVER CONTROLS CONT…

8

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.

TYPES OF SERVER CONTROLS CONT…

9

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.

TYPES OF SERVER CONTROLS CONT…

10

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.

TYPES OF SERVER CONTROLS CONT…

11

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

THE SERVER CONTROL HIERARCHY

12

Most commonly used members of the Control classProperty Description

ClientID Identifier of the controlControls Returns the collection of child controlsEnableViewState Returns or sets a Boolean value related to view

state of control

ID Returns or sets the identifier of the controlPage Returns a reference to the page object that

contains the control

Parent Returns a reference to the control’s parentVisible Returns or sets a Boolean value indicating whether

the control should be Rendered

THE SERVER CONTROL HIERARCHY CONT…

13

Defined in the namespace System.Web.UI.HtmlControls

HTML SERVER CONTROL

14

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.

Complete this slide – page 120

Tag Declaration .NET Class Specific Members

<a runat="server">

HtmlAnchor HRef, Target, Title,Name, ServerClick event

<button runat="server">

HtmlButton CausesValidation,ValidationGroup,ServerClick event

<form runat="server">

HtmlForm Enctype, Method, Target,DefaultButton,DefaultFocus

<img runat="server">

HtmlImage Align, Alt, Border, Height,Src, Width

THE HTML SERVER CONTROL CLASSES

15

Tag Declaration

.NET Class Specific Members

<input type="button" runat="server">

HtmlInputButton Type, Value,CausesValidation,ValidationGroup,ServerClick event

<input type="reset" runat="server">

HtmlInputReset Type, Value

<input type="submit" runat="server">

HtmlInputSubmit Type, Value, CausesValidation,ValidationGroup, ServerClick event

<input type="checkbox" runat="server">

HtmlInputCheckBox Checked, Type, Value,ServerClick event

HTML SERVER CONTROL CLASSES

16

Tag Declaration

.NET Class Specific Members

<input type="file" runat="server">

HtmlInputFile Accept, MaxLength,PostedFile, Size, Type,Value

<input type="hidden" runat="server">

HtmlInputHidden Type, Value,ServerChange event

<input type="image" runat="server">

HtmlInputImage Align, Alt, Border,Src, Type, Value,CausesValidation,ValidationGroup,ServerClick event

<input type="radio" runat="server">

HtmlInputRadioButton Checked, Type, Value,ServerChange event

THE HTML SERVER CONTROL CLASSES

17

Tag Declaration

.NET Class Specific Members

<input type="text" runat="server">

HtmlInputText MaxLength, Type, Value,ServerChange event

<input type="password" runat="server">

HtmlInputPassword MaxLength, Type, Value,ServerChange event

<select runat="server">

HtmlSelect Multiple, SelectedIndex,Size, Value, DataSource,DataTextField,DataValueField, Items(collection),ServerChange event

<table runat="server">,<td runat="server">

HtmlTable Align, BgColor, Border,BorderColor,CellPadding,CellSpacing, Height,NoWrap, Width, Rows(collection)

THE HTML SEVER CONTROL CLASSES

18

Tag Declaration

.NET Class Specific Members

<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 runat="server">

HtmlTextArea Cols, Rows, Value,ServerChange event

Any other HTML tag with therunat="server" attribute

HtmlGenericControl None

HTML SERVER CONTROL CLASSES

19

Can configure a standard HtmlInputText control

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

SETTING STYLE ATTRIBUTE AND OTHER PROPERTIES

20

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

PROGRAMMATICALLY CREATING CONTROLS

21

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

HANDLING SERVER-SIDE EVENTS

22

Event Controls That Provide It

ServerClick HtmlAnchor, HtmlButton, HtmlInputButton, HtmlInputSubmit,HtmlInputReset, HtmlInputImage

ServerChange

HtmlInputText, HtmlInputCheckBox, HtmlInputRadioButton, HtmlInputHidden, HtmlSelect, HtmlTextArea

HTML Control Events

HANDLING SERVER-SIDE EVENTS CONT…

23

Portion of the Inheritance Hierarchy for Web Controls

WEB CONTROLS

24

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

WEB CONTROLS CONT…

25

All the web controls inherit from the WebControl class.

The WebControl class also derives from Control.

WEB CONTROL CLASS PROPERTIES

26

Property Description

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.

WEB CONTROL CLASS PROPERTIES…

27

Property DescriptionBorderWidth

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.

WEB CONTROL CLASS PROPERTIES…

28

Property DescriptionForeColor 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.

WEB CONTROL PROPERTIES

29

ASP.NET Generated HTML Key Members

<asp:Button> <input type="submit"/> or<input type="button"/>

Text, CausesValidation, PostBackUrl,ValidationGroup, Click event

<asp:CheckBox>

<input type="checkbox"/>

AutoPostBack, Checked, Text, TextAlign, CheckedChanged event

<asp:FileUpload>

<input type="file"> FileBytes, FileContent, FileName,HasFile, PostedFile, SaveAs()

<asp:HiddenField>

<input type="hidden">

Value

BASIC WEB CONTROL CLASSES

30

ASP.NET Generated HTML

Key Members

<asp:HyperLink>

<a>...</a> ImageUrl, NavigateUrl, Target, Text

<asp:Image> <img/> AlternateText, ImageAlign, ImageUrl

<asp:ImageButton>

<input type="image"/>

CausesValidation, ValidationGroup,Click event

<asp:ImageMap>

<map> HotSpotMode, HotSpots (collection),AlternateText, ImageAlign, ImageUrl

BASIC WEB CONTROL CLASSES

31

ASP.NET Generated HTML Key Members

<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

BASIC WEB CONTROL CLASSES

32

ASP.NET Generated HTML Key Members

<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"/> or<textarea>...</textarea>

AutoPostBack, Columns, MaxLength, ReadOnly, Rows, Text, TextMode, Wrap, TextChanged event

BASIC WEB CONTROL CLASSES

33

<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.

BASIC WEB CONTROL CLASSES

34

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" />

BASIC WEB CONTROL CLASSES

35

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");

BASIC WEB CONTROL CLASSES

36

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“>

BASIC WEB CONTROL CLASSES

37

Scrollable Panels:

The Panel control has the ability to scroll.

The panel is rendered as a <div> tag.

BASIC WEB CONTROL CLASSES

38

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

HANDLING WEB CONTROL EVENTS

39

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

THE LIST CONTROLS

40

Control Description

<asp:DropDownList>

A drop-down list populated by a collection of <asp:ListItem> objects.In HTML, it is rendered by a <select> tag with the size="1" attribute.

<asp:ListBox>A list box list populated by a collection of <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:RadioButtonList>

Like the <asp:CheckBoxList>, but the items are rendered as radiobuttons.

<asp:BulletedList>

A static bulleted or numbered list. In HTML, it is rendered using the <ul> or <ol> tags( Can use to create list of hyperlinks).

THE LIST CONTROLS CONT..

41

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

RadioButtonList and CheckBoxList render multiple option buttons or check Boxes.

THE SELECTABLE LIST CONTROLS

42

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

Property DescriptionBulletStyle 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

THE BULLETED LIST CONTROLS

43

Validation Control Description

<asp:RequiredFieldValidator>

Checks that the control to validate is not empty.

<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:RegularExpressionValidator>

Checks if the value of the control it has to 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:ValidationSummary>

Shows a summary with the error messages for each failed

validator on the page

INPUT VALIDATION CONTROLS

44

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.

VALIDATION PROCESS

45

BaseValidator Members:

ControlToValidate Display

EnableClientScript Enabled

ErrorMessage Text

IsValid SetFocusOnError

ValidationGroup Validate()

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

THE BASIC VALIDATOR CLASS

46

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>

REQUIRED FIELD VALIDATOR CONTROL

47

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>

RANGE VALIDATOR CONTROL

48

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>

COMPARE VALIDATOR CONTROL

49

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 expressionRegular 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>

REGULAR EXPRESSION VALIDATOR

50

Character Escapes

Description

Ordinary characters

Characters other than .$^{[(|)*+?\ match 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.

REGULAR EXPRESSION VALIDATOR

51

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

REGULAR EXPRESSION VALIDATOR

52

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

REGULAR EXPRESSION VALIDATOR

53

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 anysequence of word characters

Specific-length password

\w{4,10} Defines a password that must be at leastfour characters long but no longer than ten Characters

Advanced password

[a-zA-Z]\w{3,9} Defines a password that allows 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 letter).

REGULAR EXPRESSION

54

Commonly Used Regular ExpressionsContent Regular Expression Description

Another advanced password

[a-zA-Z]\w*\d+\w* Defines a password that starts with a letter character, followed by 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 asimilar pattern to require two numbers or any other special character.

Limited-length field

\S{4,10} Defines a string of four to ten characters(like the password example), but it allowsspecial characters (asterisks, ampersands,and so on).

REGULAR EXPRESSION VALIDATOR

55

Commonly Used Regular Expressions

Content Regular Expression Description

Social Security number (US)

\d{3}-\d{2}-\d{4} Defines a sequence of three, two, and thenfour digits, with each group separated by ahyphen. A similar pattern could be usedwhen requiring a phone number.

56

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

VALIDATION SUMMARY

RICH WEB SERVER CONTROLS Rich controls provide an object model

that has a complex HTML representation and

also client side JavaScript.

Examples:- AdRotator

Calendar

ADROTATOR CONTROL

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

TAGS IN ADROTATOR’S XML FILE

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.

<Impression>A new ad is selected whenever the Web 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

CALENDAR CONTROL <asp:Calendar ID="Calendar2"

runat="server"></asp:Calendar>