Dynamic Web Programming BUILDING WEB APPLICATIONS USING ASP.NET, AJAX AND JAVASCRIPT

Transcription

1 Dynamic Web Programming BUILDING WEB APPLICATIONS USING ASP.NET, AJAX AND JAVASCRIPT

2 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

3 Building Web Applications Using ASP.NET, AJAX And JavaScript 5. ASP.NET SERVER CONTROLS

4 5.1 PAGE CONTROL HIERARCHY 66 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.

5 5.1 PAGE CONTROL HIERARCHY 67

6 5.1 PAGE CONTROL HIERARCHY 68

7 5.1 PAGE CONTROL HIERARCHY 69

8 5.2 TYPES OF SERVER CONTROLS 70 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.

9 5.2 TYPES OF SERVER CONTROLS 71 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 clientside code. There are other controls that do not translate into visible controls such as DataSource, Panel, etc. controls.

10 5.3 WEB CONTROLS 72 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 Property Description ClientID more complex ASP.NET at the time the page is instantiated. Controls Returns the collection of child controls. You can use the Page.Controls output made up of collection to get the top-level collection of controls on the page. Each several HTML tags those controls can hold still more controls of their own, and so on. and JavaScript EnableVie Returns or sets a Boolean value indicating whether the control should wstate code. true by default. Properties of the general Control class ID Page Parent Visible Returns the identifier of the control, which is a unique name created by control in the Controls collection may contain its own child controls, and maintain its state across postbacks of its parent page. This property is 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. Returns a reference to the page object that contains the control. Returns a reference to the control s parent, which can be the page or another container control. 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.

11 5.3 WEB CONTROLS Common methods of the general Control Class. Web Control Class has additional powerful properties and methods. 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. 73 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.

12 5.3 WEB CONTROLS 74 Basic Web controls It also shows the basic generated HTML output. 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

13 5.3 WEB CONTROLS 75 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).

14 5.3 WEB CONTROLS 76 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

15 5.3 WEB CONTROLS 77

16 5.3 WEB CONTROLS 78

17 5.4 LIST CONTROLS 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 Control <asp:dropdownlist> <asp:listbox> <asp:checkboxlist> <asp:radiobuttonlist> <asp:bulletedlist> Description System.Web.UI.WebControls.ListControl class for special properties and methods (next slide). 79 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. 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. Its items are rendered as check boxes, aligned in a table with one or more columns. Like the <asp:checkboxlist>, but the items are rendered as radio buttons. 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.

18 5.4 LIST CONTROLS Most common event: SelectedIndexChanged 80 Member AutoPostBack Items SelectedIndex SelectedItem DataSource DataMember DataTextField DataValueField DataTextFormatString Description If true, the form is automatically posted back when the user changes the current selection. Returns a collection of ListItem items (the items can also be added declaratively by adding the <asp:listitem> tag). 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. 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. 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. 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. 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. 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). Sets the formatting string used to render the text of the list item (according to the DataTextField property).

19 5.4 LIST CONTROLS 81

20 5.4 LIST CONTROLS 82

21 5.5 INPUT VALIDATION CONTROLS 83 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 Validation Control <asp:requiredfieldvalidator> <asp:rangevalidator> <asp:comparevalidator> <asp:regularexpressionvalidator > <asp:customvalidator> <asp:validationsummary> Description Checks that the control it has to validate is not empty when the form is submitted. 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. 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. Checks if the value of the control it has to validate matches the specified regular expression. Allows you to specify any client-side JavaScript validation routine and its server-side counterpart to perform your own custom validation logic. Shows a summary with the error messages for each failed validator on the page (or in a pop-up message box).

22 5.5 INPUT VALIDATION CONTROLS 84 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.

23 5.5 INPUT VALIDATION CONTROLS 85 Validator Base Class Properties: Member ControlToValidate Display EnableClientScript Enabled ErrorMessage Text IsValid SetFocusOnError ValidationGroup Validate() Description Indicates the input control to validate. 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. A Boolean property that specifies whether the client-side validation will take place. It is true by default. 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. Error string that will be shown in the errors summary by the Validation-Summary control, if present. The error text that will be displayed in the validator control if the attached input control fails its validation. 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 clientside 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. 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. 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. 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).

24 5.5 INPUT VALIDATION CONTROLS 86 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

25 5.5 INPUT VALIDATION CONTROLS 87 RegularExpression Validator: Validate text by matching against a pattern defined in a regular expression. Comes with predefined list of specific expressions. Example: 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.

26 5.5 INPUT VALIDATION CONTROLS 88

27 5.5 INPUT VALIDATION CONTROLS 89

28 5.5 INPUT VALIDATION CONTROLS 90

29 5.5 RICH CONTROLS 91 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

30 5.5 RICH CONTROLS 92

31 5.5 RICH CONTROLS 93