BUILDING WEB APPLICATIONS USING

ASP.NET, AJAX AND JAVASCRIPT

Dynamic Web Programming

AGENDA

5. ASP.NET Server Controls

5.1 Page Control Hierarchy

5.2 Types of Server Controls

5.3 Web Controls

5.4 List Controls

5.5 Input Validation Controls

5.6 Rich Controls

Building Web Applications Using ASP.NET, AJAX And JavaScript

5. ASP.NET SERVER CONTROLS

5.1 PAGE CONTROL HIERARCHY

ASP.NET controls are processed on the server and rendered in

HTML/JavaScript to the client in an object-oriented manner.

ASP.NET collects all controls on a page and renders them

according to the aspx markup specification.

Each control can also have child controls.

At the page level, ASP.NET added a controls collection that keeps

track of the controls on a

page (runat=“server”).

By looping through the

controls collection you can

examine each individual

control.

66

5.1 PAGE CONTROL HIERARCHY

67

5.1 PAGE CONTROL HIERARCHY

68

5.1 PAGE CONTROL HIERARCHY

69

5.2 TYPES OF SERVER CONTROLS

HTML Server Controls: Classes that wrap the standard HTML

elements. You can turn any general HTML tag into a server

control by adding the attribute runat=“server”.

Web Controls: These classes duplicate the functionalities of the

basic HTML elements but have a more consistent and

meaningful set of properties and methods. You have much more

programmatic control over those controls to build a rich UI

experience.

Rich Controls: These advanced controls have the ability to

generate a large amount of HTML markup and even client-side

JavaScript to create an interface.

Validation Controls: These controls allow you to build

sophisticated validation tools for all types of controls and

validation needs.

70

5.2 TYPES OF SERVER CONTROLS

Data Controls: These controls include sophisticated grids and

lists to display large amount of data with support for advanced

features such as templating, editing, sorting, and pagination.

Navigation Controls: These controls are designed to display site

maps and allow the user to perform basic navigation tasks.

Login Controls: These controls support forms authentication, an

ASP.NET model for authenticating users against a database.

These are prebuilt controls having customizable login pages,

password recovery, and user creation wizard.

ASP.NET AJAX Controls: These controls allow you to use AJAX

techniques in your web pages without forcing you to write client-

side code.

There are other controls that do not translate into visible

controls such as DataSource, Panel, etc. controls.

71

5.3 WEB CONTROLS

These controls are modeled after the HTML controls but contain

much more functionality.

Some web controls do not map to a single HTML control, but

instead generate

more complex

output made up of

several HTML tags

and JavaScript

code.

Properties of the

general

Control class

72

Property Description

ClientID Returns the identifier of the control, which is a unique name created by

ASP.NET at the time the page is instantiated.

Controls Returns the collection of child controls. You can use the Page.Controls

collection to get the top-level collection of controls on the page. Each

control in the Controls collection may contain its own child controls, and

those controls can hold still more controls of their own, and so on.

EnableVie

wState

Returns or sets a Boolean value indicating whether the control should

maintain its state across postbacks of its parent page. This property is

true by default.

ID Returns or sets the identifier of the control. In practice, this is the name

through which you can access the control from the server-side scripts or

the code-behind class.

Page Returns a reference to the page object that contains the control.

Parent Returns a reference to the control’s parent, which can be the page or

another container control.

Visible Returns or sets a Boolean value indicating whether the control should be

rendered. If false, the control is not just made invisible on the client—

instead, the corresponding HTML tag is not generated.

5.3 WEB CONTROLS

Common methods of

the general Control

Class.

Web Control Class has

additional powerful

properties and

methods.

73

Method Description

DataBind() Binds the control and all of its child controls to the specified data source or

expression.

FindControl() Searches for a child control with a specific name in the current control and all

contained controls. If the child control is found, the method returns a reference of

the general type Control. You can then cast this control to the proper type.

HasControls() Returns a Boolean value indicating whether this control has any child controls. The

control must be a container tag to have child controls (such as a <div> tag).

Render() Writes the HTML output for the control based on its current state. You do not call

this method directly. Instead, ASP.NET calls it when the page is being rendered.

Properties Description

AccessKey Returns or sets the keyboard shortcut that allows the user to quickly navigate to the

control. For example, if set to A, the user can move the focus to this control by

pressing Alt+A.

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.

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.

This property includes subproperties that can be set with the object-walker syntax

shown in this chapter.

ForeColor Returns or sets the foreground color—for example, that of the text of the control.

Height Returns or sets the control’s height.

TabIndex A number that allows you to control the tab order. The control with a TabIndex of 0

has the focus when the page first loads. Pressing Tab moves the user to the control

with the next lowest TabIndex, provided it is enabled.

Tooltip Displays a text message when the user hovers the mouse above the control.

Width Returns or sets the control’s width.

5.3 WEB CONTROLS

Basic Web

controls

It also shows

the basic

generated HTML

output.

74

ASP.NET Tag Generated HTML Key Members

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

<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

<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

<asp:Label> <span>...</span> Text, AssociatedControlID

<asp:LinkButton> <a><img/></a> Text, CausesValidation, ValidationGroup, Click event

<asp:Panel> <div>...</div> BackImageUrl, DefaultButton, GroupingText, HorizontalAlign,

Scrollbars, Wrap

<asp:RadioButton> <input type="radio"/> AutoPostBack, Checked, GroupName, Text, TextAlign,

CheckedChanged event

<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

5.3 WEB CONTROLS

Web controls have two restrictions:

Every control must have an ending tag or use the empty (/>) syntax.

All web controls must be declared within a server-side form tag (and there

can be only one form per page).

75

5.3 WEB CONTROLS

Using color values in ASP.NET. Use System.Drawing namespace.

Specify the argb (alpha, red, green, blue) value.

Use .NET predefined color name from the color class.

Use HTML color name (must use ColorTranslator class).

Font property refers to a full FontInfo object.

When using font properties in markup code,

use the object-walker syntax:

Every input control provides a Focus() method.

Server-side events exist for all web controls,

there are quite a few.

Use AutoPostback=True to fire event immediately.

Most common events: Click, Changed, Checked

76

5.3 WEB CONTROLS

77

5.3 WEB CONTROLS

78

5.4 LIST CONTROLS

79

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

Either bound to a data source (database or hard-coded values) or programmatically filled with items.

All list controls support same base properties and methods.

Additionally, they inherited from the System.Web.UI.WebControls.ListControl class for special properties and methods (next slide).

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, aligned

in a table with one or more columns.

<asp:RadioButtonList> Like the <asp:CheckBoxList>, but the items

are rendered as radio buttons.

<asp:BulletedList> A static bulleted or numbered list. In HTML, it

is rendered using the <ul> or <ol> tags. You

can also use this control to create a list of

hyperlinks.

5.4 LIST CONTROLS

80

Most common event: SelectedIndexChanged

Member Description

AutoPostBack If true, the form is automatically posted back when the user changes the current

selection.

Items Returns a collection of ListItem items (the items can also be added declaratively by

adding the <asp:ListItem> tag).

SelectedIndex Returns or sets the index of the selected item. For lists with multiple selectable items,

you should loop through the Items collection and check the Selected property of each

ListItem instead.

SelectedItem Returns a reference to the first selected ListItem. For lists with multiple selectable

items, you should loop through the Items collection and check the Selected property of

each ListItem instead.

DataSource You can set this property to an object that contains the information you want to display

(such as a DataSet, DataTable, or collection). When you call DataBind(), the list will be

filled based on that object.

DataMember Used in conjunction with data binding when the data source contains more than one

table (such as when the source is a DataSet). The DataMember identifies which table

you want to use.

DataTextField Used in conjunction with data binding to indicate which property or field in the data

source should be used for the text of each list item.

DataValueField Used in conjunction with data binding to indicate which property or field in the data

source should be used for the value attribute of each list item (which isn’t displayed

but can be read programmatically for future reference).

DataTextFormatString Sets the formatting string used to render the text of the list item (according to the

DataTextField property).

5.4 LIST CONTROLS

81

5.4 LIST CONTROLS

82

5.5 INPUT VALIDATION CONTROLS

Applications need to validate data. Web applications are no

exception.

Ideally, validation takes place on the client side.

But is always a good idea to also perform server-side validation.

Hackers can remove or bypass client-side JavaScript code!

Writing validation

code is a lengthy

task, and it is

repetitive.

Use Validation

controls in

ASP.NET

83

Validation Control Description

<asp:RequiredFieldValidator> Checks that the control it has to validate is not empty

when the form is submitted.

<asp:RangeValidator> Checks that the value of the associated control is within

a specified range. The value and the range can be

numerical—a date or a string.

<asp:CompareValidator> Checks that the value of the associated control matches

a specified comparison (less than, greater than, and so

on) against another constant value or control.

<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 to perform your

own custom validation logic.

<asp:ValidationSummary> Shows a summary with the error messages for each

failed validator on the page (or in a pop-up message

box).

5.5 INPUT VALIDATION CONTROLS

Most web controls contain a property named CausesValidation.

By default, it is set to False, except button control.

It is assumed that when you click a button that you want to

perform validation.

If you set the CausesValidation and the AutoPostBack property

to true at the same time for any control, validation will be

performed.

If the validation fails, the page will not postback to the server.

84

5.5 INPUT VALIDATION CONTROLS

Validator Base Class Properties:

85

Member Description

ControlToValidate Indicates the input control to validate.

Display Indicates how the error message will be shown. If Static, the space required to show the message will be calculated

and added to the space layout in advance. If Dynamic, the page layout will dynamically change to show the error

string. Be aware that although the dynamic style could seem useful, if your layout is heavily based on table structures,

it could change quite a bit if multiple strings are dynamically added, and this could confuse the user.

EnableClientScript A Boolean property that specifies whether the client-side validation will take place. It is true by default.

Enabled A Boolean property that allows the user to enable or disable the validator. When the control is disabled, it does not

validate anything. You can set this property programmatically if you want to create a page that dynamically decides

what it should validate.

ErrorMessage Error string that will be shown in the errors summary by the Validation-Summary control, if present.

Text The error text that will be displayed in the validator control if the attached input control fails its validation.

IsValid This property is also usually read or set only from script code (or the code-behind class) to determine whether the

associated input control’s value is valid. This property can be checked on the server after a postback, but if the client-

side validation is active and supported by the client browser, the execution won’t get to the server if the value isn’t

valid. (In other words, you check this property just in case the client-side validation did not run.) Remember that you

can also read the Page.IsValid property to know in a single step if all the input controls are in a valid state. Page.IsValid

returns true only if all the contained controls are valid.

SetFocusOnError If true, when the user attempts to submit a page that has an invalid control, the browser switches focus to the input

control so the value can be easily corrected. (If false, the button or control that was clicked to post the page retains

focus.) This feature works for both client-side and server-side validation. If you have multiple validators with

SetFocusOnError set to true, and all the input controls are invalid, the first input control in the tab sequence gets focus.

ValidationGroup Allows you to group multiple validators into a logical group so that validation can be performed distinctly without

involving other groups. This is particularly useful if you have several distinct panels on a web page, each with its own

submit button.

Validate() This method revalidates the control and updates the IsValid property accordingly. The web page calls this method when

a page is posted back by a CausesValidation control. You can also call it programmatically (for example, if you

programmatically set the content of an input control and you want to check its validity).

5.5 INPUT VALIDATION CONTROLS

RequiredField Validator:

Required value in a control.

Value in control must be different from InitialValue .

RangeValidator:

Input value must fall within specified range.

Set MinimumValue, MaximumValue and Type (Currency, Date, Double,

Integer, and String)

CompareValidator:

Compare input value with a fixed value or a value in another control.

Example: Confirm password

ValueToCompare (fixed value), ControlToCompare (control value)

Operator: Equal, NotEqual, GreaterThan, GreaterThanEqual, LessThan,

LessThanEqual, DataTypeCheck

86

5.5 INPUT VALIDATION CONTROLS

RegularExpression Validator:

Validate text by matching against a pattern defined in a regular

expression.

Comes with predefined list of specific expressions.

Example: E-mail address

CustomValidator:

If none of the built-in validators meets your needs, then use

CustomValidator.

Create custom Client and Server side validation validation routines.

ValidationSummary:

No validation, instead displays summary of all validation errors in the

page.

Summary can be shown in JavaScript messagebox or on the page, or use

both display methods.

87

5.5 INPUT VALIDATION CONTROLS

88

5.5 INPUT VALIDATION CONTROLS

89

5.5 INPUT VALIDATION CONTROLS

90

5.5 RICH CONTROLS

Web controls that model complex user interface elements.

Rich controls can be programmed as a single object (defined

with a single control tag), but renders itself with a complex

sequence of HTML elements including JavaScript.

Calendar Control

91

5.5 RICH CONTROLS

92

5.5 RICH CONTROLS

93