ASP NET Controls ASP includes normal HTML elements

Server Controls • Four types of server controls: – HTML server controls: server-based equivalent

HTML Server Controls • An object interface for standard HTML elements – Generate equivalent

HTML Server Controls • Traditional HTML form <html> <body> <form method="post"> Enter Number of

HTML Server Controls • Automatically maintain state of controls in the page using the

HTML Server Control Description Html. Anchor Controls an <a> HTML element Html. Button Controls

HTMLServer Control Properties • Similar properties as HTML attributes: – Input controls: value ,

Web Controls • Provide rich user interface (mapped to more than one HTML element)

Web Server Control Description Button Displays a push button Check. Box Displays a check

Web Controls • Tags start with prefix “asp: ” then class name • Attribute

Web Controls • All web controls have: – – – Back. Color, Border. Color

Web Controls • Button / label: – text • Check. Box / Radio. Button

Web Controls • Table: – Properties: Back. Image. Url, Cell. Padding, Cellspacing, Grid. Lines

List Controls • List. Box, Drop. Down. List, Check. Box. List, Radio. Button. List

Web Control Events • Events types: Click, Text. Change, Check. Changed, Selected. Index. Changed

Page Lifecycle • When the user changes a control that has autopostback set to

Page Processing Steps Web page request ASP. NET creates page objects from aspx code

Validation Controls • This set of controls provides Rapid Application Development (RAD) features for

Validation Controls • HTML does not facilitate validation of user input • ASP. NET

Validation Controls • • • Required. Field. Validator Range. Validator Compare. Validator Regular. Expressionvalidator

Validation Controls • To activate the validation controls before the form is submitted, set

Validation Controls • Common properties – Control. To. Validate – Error. Message: text to

Validation Controls • Required. Field. Validator – initial. Value • Range. Validator – Maximum.

Regular Expression Characters * 0 or more occurrence of previous character or expression +

Validation Summary • Displays all the errors that happened in the page in one

Slides: 25

Download presentation

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 1

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 • More controls in ASP. NET 2. 0 2

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 3

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> • Run server-control file and see the generated code 4

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: Server. Click, Server. Change 5

HTML Server Control Description Html. Anchor Controls an <a> HTML element Html. Button Controls a <button> HTML element Html. Form Controls a <form> HTML element Html. Generic Controls other HTML element not specified by a specific HTML server control, like <body>, <div>, <span>, etc. Html. Image Controls an <image> HTML element Html. Input. Button Controls <input type="button">, <input type="submit">, and <input type="reset"> HTML elements Html. Input. Check. Box Controls an <input type="checkbox"> HTML element Html. Input. File Controls an <input type="file"> HTML element Html. Input. Hidden Controls an <input type="hidden"> HTML element Html. Input. Image Controls an <input type="image"> HTML element Html. Input. Radio. Button Controls an <input type="radio"> HTML element Html. Input. Text Controls <input type="text"> and <input type="password"> HTML elements Html. Select Controls a <select> HTML element Html. Table Controls a <table> HTML element Html. Table. Cell Controls <td>and <th> HTML elements Html. Table. Row Controls a <tr> HTML element Html. Text. Area Controls a <textarea> HTML element 6

HTMLServer Control Properties • Similar properties as HTML attributes: – Input controls: value , type – Img: src, width, height, . . • HTML Container Controls: Inner. Text, Inner. Html • All HTML controls have: – Disabled, visible, Tag. Name, Style, Page 7

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 cliententered 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). 8

Web Server Control Description Button Displays a push button Check. Box Displays a check box Check. Box. List Creates a multi-selection check box group Drop. Down. List Creates a drop-down list Hyper. Link Creates a hyperlink Image Displays an image Image. Button Displays a clickable image Label Displays static content which is programmable (span) Link. Button Creates a hyperlink button List. Box Creates a single- or multi-selection drop-down list Panel Provides a container for other controls Radio. Button Creates a radio button Radio. Button. List Creates a group of radio buttons Table Creates a table Table. Cell Creates a table cell Table. Row Creates a table row Text. Box Creates a text box 9

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: Text. Box id=“T 1” runat=“server”> </asp: Text. Box> <input type=text name=“T 1” id=“T 1” /> • Defined in System. Web. UI. Web. Controls 10

Web Controls • All web controls have: – – – Back. Color, Border. Color and Fore. Color Border. Width, Border. Style Font Height, Width Tab. Index, Access. Key Enabled, visible, Enable. View. State • Text. Box control properties: – – Text. Mode: Singlee. Line, Multiple. Line, Password Max. Length: maximum number of characters accepted Columns: width of the control Rows: display height of the control 11

Web Controls • Button / label: – text • Check. Box / Radio. Button : – Text: (label next to the control) – Text. Align: text alignment relative to control – Checked • Panel: Group a number of controls – Back. Image. Url 12

Web Controls • Table: – Properties: Back. Image. Url, Cell. Padding, Cellspacing, Grid. Lines – Rows a collection of Table. Row objects • Table. Row – Cells: a collection of Table. Cell objects • Table. Cell – Column. Span/Row. Span – Horizontal. Align / Vertical. Align – text 13

List Controls • List. Box, Drop. Down. List, Check. Box. List, Radio. Button. List • Items: Collection of “List. Item” objects, which has: – text : Displayed word – value : hidden value in HTML code – Selected: boolean • Properties: Selected. Index, Selected. Item • Multiple selection for List. Box, set “Selection. Mode” property • Radio. Button. List/ Check. Box. List properties: – Repeat. Columns, Repeat. Direction, Repeate. Layout, Text. Align 14

Web Control Events • Events types: Click, Text. Change, Check. Changed, Selected. Index. Changed • Change events have their auto. Post. Back 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) 15

Page Lifecycle • When the user changes a control that has autopostback set to true: 1. 2. 3. Java script is invoked and the page is resubmitted ASP. NET recreates page object from. aspx file ASP. NET retrieves state information from hidden fields and updates controls Execute Page_load event handler Execute appropriate event handlers Execute page_unload event handler and render page Send page to client 4. 5. 6. 7. 16

Page Processing Steps Web page request ASP. NET creates page objects from aspx code ASP. NET runs Page. load event handler HTML output returned Page postback Client Final page is rendered ASP. NET creates page objects from aspx code ASP. NET runs Page. load event handler ASP. Net runs any other Triggered event handler HTML output returned Final page is rendered 17

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. Web. Controls namespace. • Types of user errors – Forget to fill an important field – Submitting the wrong type of data – Submitting the data in a wrong format 18

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 19

Validation Controls • • • Required. Field. Validator Range. Validator Compare. Validator Regular. Expressionvalidator Custom. Validator • Validation. Summary 20

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 21

Validation Controls • Common properties – Control. To. Validate – Error. Message: text to display if validation fails – Fore. Color – Display: add message dynamic or static – Is. Valid: true or false depending on the validation result – Enabled – Enable. Client. Side. Script 22

Validation Controls • Required. Field. Validator – initial. Value • Range. Validator – Maximum. Value, Minimum. Value, Type • Compare. Validator – Control. To. Compare, Operator, Type, Value. To. Compare • Regular. Expressionvalidator – Validation. Expression 23

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) 24

Validation Summary • Displays all the errors that happened in the page in one area • Message in the error. Message properties will be displayed in the summary • Display mode: list or bullet list or paragraph • Other properties – Header. Text – Show. Message. Box / Show. Summary 25