Scribd
Upload
18 views

Unit - 2 ASP.NET Controls

Uploaded by

minhawk2001
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
18 views

Unit - 2 ASP.NET Controls

Uploaded by

minhawk2001
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 27

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

You might also like