UNIT – 2 ASP.
NET CONTROLS
WEB APPLICATION DEVELOPMENT
1
ASP.NET CONTROLS
ASP includes normal HTML elements
Server-side controls are objects that provide
corresponding HTML output.
You can set their properties, call methods and program
events on them
2
SERVER CONTROLS
Four types of server controls:
HTML server controls: server-based equivalent for
standard HTML elements
Web controls: more object properties and events + new
types of controls not in HTML
Validation controls: check user inputs
User controls: developer designed controls
3
HTML SERVER CONTROLS
An object interface for standard HTML elements
Generate equivalent interface
Retain their state
Fire events
Add the attribute “runat=serevr” and an id to the
HTML element start tag
4
HTML SERVER CONTROLS
Traditional HTML form
<html> <body>
<form method="post">
Enter Number of hours: <input type=text >
<input type=submit value="convert to seconds">
</form></body></html>
ASP.NET HTML server controls
<HTML><BODY>
<form method="post" runat="server“ >
Enter Number of hours: <input type=text runat="server" id="hours">
<input type=submit value="convert to seconds" runat="server" id="convert">
</form></body></HTML>
5
HTML SERVER CONTROLS
Automatically maintain state of controls in the page using
the hidden field which is compressed and encrypted code.
Exists in System.Web.UI.HTMLControls
Note: An .aspx page can only contain ONE <form
runat="server"> control!
Two types of events: ServerClick, ServerChange
6
HTML Server Control Description
HtmlAnchor Controls an <a> HTML element
HtmlButton Controls a <button> HTML element
HtmlForm Controls a <form> HTML element
HtmlGeneric Controls other HTML element not specified by a specific HTML
server control, like <body>, <div>, <span>, etc.
HtmlImage Controls an <image> HTML element
HtmlInputButton Controls <input type="button">, <input type="submit">, and <input
type="reset"> HTML elements
HtmlInputCheckBox Controls an <input type="checkbox"> HTML element
HtmlInputFile Controls an <input type="file"> HTML element
HtmlInputHidden Controls an <input type="hidden"> HTML element
HtmlInputImage Controls an <input type="image"> HTML element
HtmlInputRadioButton Controls an <input type="radio"> HTML element
HtmlInputText Controls <input type="text"> and <input type="password"> HTML
elements
HtmlSelect Controls a <select> HTML element
HtmlTable Controls a <table> HTML element
HtmlTableCell Controls <td>and <th> HTML elements
HtmlTableRow Controls a <tr> HTML element 7
HtmlTextArea Controls a <textarea> HTML element
HTMLSERVER CONTROL PROPERTIES
Similar properties as HTML attributes:
Input controls: value , type
Img: src, width, height, ..
HTML Container Controls: InnerText, InnerHtml
All HTML controls have:
Disabled, visible, TagName, Style, Page
8
WEB CONTROLS
Provide rich user interface (mapped to more than
one HTML element)
Provide more properties, events and methods than
HTML tags
Detect browser type and adjust output automatically
Server controls automatically maintain any client-
entered values between round trips to the server.
This control state is not stored on the server (it is
instead stored within an <input type="hidden">
form field that is round-tripped between requests).
9
Web Server Control Description
Button Displays a push button
CheckBox Displays a check box
CheckBoxList Creates a multi-selection check box group
DropDownList Creates a drop-down list
HyperLink Creates a hyperlink
Image Displays an image
ImageButton Displays a clickable image
Label Displays static content which is programmable (span)
LinkButton Creates a hyperlink button
ListBox Creates a single- or multi-selection drop-down list
Panel Provides a container for other controls
RadioButton Creates a radio button
RadioButtonList Creates a group of radio buttons
Table Creates a table
TableCell Creates a table cell
TableRow Creates a table row 10
TextBox Creates a text box
WEB CONTROLS
Tags start with prefix “asp:” then class name
Attribute runat=server
ASP.NET add “name” attribute to controls to track
them.
Object properties are mapped to attributes
<asp:TextBox id=“T1” runat=“server”> </asp:TextBox>
<input type=text name=“T1” id=“T1” />
Defined in System.Web.UI.WebControls
11
WEB CONTROLS
All web controls have:
BackColor, BorderColor and ForeColor
BorderWidth, BorderStyle
Font
Height, Width
TabIndex, AccessKey
Enabled, visible, EnableViewState
TextBox control properties:
TextMode: SingleeLine, MultipleLine, Password
MaxLength: maximum number of characters accepted
Columns: width of the control
Rows: display height of the control
12
WEB CONTROLS
Button / label:
text
CheckBox / RadioButton :
Text: (label next to the control)
TextAlign: text alignment relative to control
Checked
Panel: Group a number of controls
BackImageUrl
13
WEB CONTROLS
Table:
Properties: BackImageUrl, CellPadding,Cellspacing,
GridLines
Rows a collection of TableRow objects
TableRow
Cells: a collection of TableCell objects
TableCell
ColumnSpan/RowSpan
HorizontalAlign / VerticalAlign
text
14
LIST CONTROLS
ListBox, DropDownList, CheckBoxList, RadioButtonList
Items: Collection of “ListItem” objects, which has:
text : Displayed word
value : hidden value in HTML code
Selected: boolean
Properties: SelectedIndex, SelectedItem
Multiple selection for ListBox, set “SelectionMode” property
RadioButtonList/ CheckBoxList properties:
RepeatColumns, RepeatDirection, RepeateLayout,
TextAlign
15
WEB CONTROL EVENTS
Events types: Click, TextChange, CheckChanged,
SelectedIndexChanged
Change events have their autoPostBack property false
by default.
ASP.NET adds a Java Script code that handles the
postback to the server when a server side control
event has occurred
Two hidden fields (id of triggered control, and
additional information)
16
PAGE LIFECYCLE
When the user changes a control that has auto postback
set to true:
1. Java script is invoked and the page is resubmitted
2. ASP.NET recreates page object from .aspx file
3. ASP.NET retrieves state information from hidden
fields and updates controls
4. Execute Page_load event handler
5. Execute appropriate event handlers
6. Execute page_unload event handler and render
page
17
7. Send page to client
PAGE PROCESSING STEPS
Web page request ASP.NET creates page objects
from aspx code
ASP.NET runs Page.load
event handler
HTML output returned
Final page is rendered
Page postback
ASP.NET creates page objects
Client from aspx code
ASP.NET runs Page.load
event handler
ASP.Net runs any other
Triggered event handler
HTML output returned 18
Final page is rendered
VALIDATION CONTROLS
This set of controls provides Rapid Application
Development (RAD) features for automatically checking the
specified validity of user inputs.
Available in the System.Web.UI.WebControls namespace.
Types of user errors
Forget to fill an important field
Submitting the wrong type of data
Submitting the data in a wrong format
19
VALIDATION CONTROLS
HTML does not facilitate validation of user input
ASP.NET provide validation controls that checks the
user input before submitting the form
Utilizes client-side DHTML to provide fast response
20
VALIDATION CONTROLS
RequiredFieldValidator
RangeValidator
CompareValidator
RegularExpressionvalidator
CustomValidator
ValidationSummary
21
VALIDATION CONTROLS
To activate the validation controls before the form is
submitted, set button property “Causes Validation” to
true
Each validation control is bound to one input control.
An input control may have multiple validation
controls
22
VALIDATION CONTROLS
Common properties
ControlToValidate
ErrorMessage: text to display if validation fails
ForeColor
Display: add message dynamic or static
IsValid: true or false depending on the validation result
Enabled
EnableClientSideScript
23
VALIDATION CONTROLS
RequiredFieldValidator
initialValue
RangeValidator
MaximumValue, MinimumValue, Type
CompareValidator
ControlToCompare, Operator,Type, ValueToCompare
RegularExpressionvalidator
ValidationExpression
24
REGULAR EXPRESSION
CHARACTERS
* 0 or more occurrence of previous character or expression
+ 1 or more occurrence of previous character or expression
() Groups a sub-expression
[] Matches on character in a range
| Either of two options
[^] Matches a character that is not in the given range
\s Whitespace character (tab or space)
\S Any non whitespace chacters
\d Any digit character
\D Any character that is not a digit
\w Any “word” character (letter, number, underscore)
25
VALIDATION SUMMARY
Displays all the errors that happened in the page in
one area
Message in the errorMessage properties will be
displayed in the summary
Display mode: list or bullet list or paragraph
Other properties
HeaderText
ShowMessageBox / ShowSummary
26
27
