| As mentioned earlier, ASP.NET provides two sets of controls you can choose from when developing Web Forms. We suggest you spend most of your time using the standard Web Forms controls. You might also need to support existing HTML or ASP pages and therefore might need to investigate the HTML controls. The following subsections describe both types of controls. HTML Controls HTML controls mimic the actual HTML elements you would use if you were using FrontPage or any other HTML editor to draw your UI. You can use standard HTML elements in Web Forms, too. For example, if you wanted to create a text box, you would write the following: <input type="text" id=txtFirstName size=25> If you are using Visual Studio .NET, you choose a Text Field control from the HTML tab on the Toolbox window and draw the control where you want it on the Web Form. Any HTML element can be marked to also run as an HTML control when the Web Form is processed on the server by adding the runat attribute to the tag and setting its value to be "server", as shown here: <input type="text" id=txtFirstName size=25 runat="server"> If you are using Visual Studio .NET, you can right-click the HTML element in Design View and select Run as Server Control from the context menu. By adding the runat="server" attribute, you allow ASP.NET to process server-side events for the control, thus adding an enormous level of power and flexibility to your page. HTML controls allow you to handle server events associated with the tag (a button click, for example) as well as manipulate the HTML tag programmatically in the Web Form's code. When the control is rendered to the browser, the tag is rendered just as it is saved in the Web Form, minus the runat="server" part. This gives you precise control over the HTML that is sent to the browser. Table 6.1 lists the HTML controls available in ASP.NET. Table 6.1. HTML Controls Available in ASP.NET | Control | Description | Web Form Code Example | | Button | Used to respond to click events. | <input type=button runat= server> | | Reset Button | Resets all other HTML form elements on a form to their default values.\ | <input type=reset runat=server> | | Submit Button | Automatically posts the form data to the specified page listed in the Action= attribute in the FORM tag. | <input type=submit runat=server> | | Text Field | Gives the user an input area on an HTML form. | <input type=text runat=server> | | Text Area | Used for multiline input on an HTML form. | <input type=textarea runat=server> | | File Field | Places a text field and a Browse button on a form and allows the user to select a file name from the local machine after clicking the Browse button. | <input type=file runat=server> | | Password Field | An input area on an HTML form. Any characters typed into this field are displayed as asterisks. | <input type=password runat=server> | | Check Box | Gives the user a check button that he can select or clear. | <input type=checkbox runat=server> | | Radio Button | Always used in groups of two or more. Allows the user to choose one of the options within the group. | <input type=radio runat=server> | | Table | Allows you to present information in a tabular format. | <table runat=server></table> | | Image | Displays an image on an HTML form. | <img src="/books/3/93/1/html/2/FileName" runat=server> | | List Box | Displays a list of items to the user. You must set the size attribute to a value greater than 1 in order to see the items in a list. (Setting the size attribute to 1 or omitting the attribute displays the items in a drop-down list.) You can set the size from two or more to specify how many items you wish to show. If there are more items than will fit within this limit, a scroll bar is automatically added to this control. | <select size=2 runat=server > </select> | | Dropdown | Displays a list of items to the user, but only one item at a time will appear. The user can click a down arrow from the side of this control and a list of items will be displayed. | <select><option></option></select> | | Horizontal Rule | Displays a horizontal line across the HTML page. | <hr> | All these controls emit standard HTML into the Web Form. You may optionally assign an ID attribute to each control, allowing you to write client-side JavaScript code for any of the events that are common for this particular type of control. Table 6.2 lists some of the more common client-side events. Table 6.2. Common Client-Side Events You Might Handle | Event Name | Description | | OnBlur: | The control loses focus. | | OnChange: | The contents of the control are changed. | | OnClick: | The control is clicked. | | OnFocus: | The control receives focus. | | OnMouseOver: | The mouse moves over the control. | Web Form Server Controls HTML controls allow for compatibility with existing Web pages, but they don't provide a useful object model and aren't simple to program against. Server controls provide a consistent, object-oriented programming model. They provide event handling on the server and render their output as HTML for the requesting browser. For example, if you set the page's pageLayout property to GridLayout (as opposed to FlowLayout), you can place controls at any location on the page. (Normal HTML layout requires a left-to-right, top-to-bottom "flow" layout.) At runtime, ASP.NET must decide how to render this particular page. For example, should it use absolute positioning (not all browsers support this feature) or should it try to render the page in a manner that down-level browsers can support? If ASP.NET determines that the browser can't render absolute positioning, it creates a table on-the-fly and positions the controls as near to their design-time positions as possible. The HTML sent to the browser is far larger, and far more complex, than what's sent if the browser supports absolute positioning, but the page still looks the same. By decoupling the control design and layout from the rendering at runtime, ASP.NET makes it possible to support just about any browser, in any environment. All Web Form controls inherit from a common base class, namely the System.Web.UI.WebControls class. This base class implements a set of common properties that all these controls will have. Here's a list of some of these common properties: BackColor Enabled Font ForeColor TabIndex Visible Width The Microsoft .NET Framework supplies a few different categories of server controls. Some controls have an almost one-to-one correspondence with their HTML counterparts. Some controls provide additional information when posted back to the server, and some controls allow you to display data in tabular or list-type format. Table 6.3 provides a list of Web Form server-side controls and the tags you will see within an ASPX page. Each control is represented by a similar tag within the design-time environment. In each case, the tag is prefixed with "asp:", as in <asp:Hyperlink>. Table 6.3. Server-Side Controls Used in ASP.NET and Web Forms | Control | Description | | Label | Displays text on the HTML page. | | TextBox | Gives the user an input area on an HTML form. | | Button | A normal button control used to respond to click events on the server. This control posts back to the server when clicked. | | LinkButton | This control is like a button in that it posts back to a server, but the button looks like a hyperlink. | | ImageButton | This control can display a graphical image, and, when clicked, it posts back to the server command information such as the mouse coordinates within the image. | | HyperLink | A normal hyperlink control that responds to a click event. | | DropDownList | A normal drop-down list control like the HTML control, but this control can be bound to a data source. | | ListBox | A normal list box control like the HTML control, but this control can be bound to a data source. | | DataGrid | A more powerful HTML table. You bind this control to a data source, and the control displays all the column information. You can also perform paging, sorting, and formatting. | | DataList | Allows you to create a template-based layout for data, using a table-like layout. You can bind the data to template items or snippets of HTML that repeat for each item. | | Repeater | Allows you to create a template-based layout for repeating data as a single column. You can bind the data to template items, which are like bits of HTML put together in a specific repeating format. | | CheckBox | Very similar to the normal HTML control that displays a check box for the user to check or uncheck. | | CheckBoxList | Displays check boxes that work together as a group. | | RadioButton | Similar to the normal HTML control that displays a round button for the user to check or uncheck. | | RadioButtonList | Displays a group of radio button controls that all work together. Only one of the group can be selected at a time. | | Image | Similar to the normal HTML control that displays an image within the page. | | Panel | Groups other controls so that you can refer to the group of controls as a single entity. | | PlaceHolder | Acts as a location where you can add new server-side controls dynamically at runtime. | | Calendar | Creates an HTML version of a calendar. You can set the default date, move forward and backward through the calendar, and so on. | | AdRotator | Allows you to specify a list of ads to display. Each time the user accesses the page, the display rotates through the series of ads. | | Table | Similar to the normal HTML table control. | | XML | Displays XML information within the rendered HTML. This control can also be used to perform an XSLT transform prior to displaying the XML. | | Literal | This control is like a label in that it displays literal HTML, but the output of this control isn't part of the Controls collection of the page. Basically, this control simply allows you to send data directly to the rendered page. | All these controls change their output based on the type of browser detected for the user. If the user's browser is Internet Explorer 4.0 or higher, ASP.NET can take advantage of Dynamic HTML (DHTML) and other more "modern" extensions to HTML. If ASP.NET detects a down-level browser (something other than IE 4.0 or higher), the normal HTML 3.2 standard is sent back to the user's browser. NOTE If a control listed in Table 6.3 does not appear in your Toolbox, you can right-click the Toolbox and select Customize Toolbox from the context menu. You can then select the .NET components you wish to add.
Field Validator Controls Often, you'll need to validate user input before the user submits the page back to the server. The rich set of validation controls, described in Table 6.4, perform client-side validation if possible (depending on the browser). ASP requires you either to write complex client-side validation code or to force a roundtrip in order to validate input. ASP.NET creates client-side code for you and can validate on the client side. Each of these controls renders client-side JavaScript code into the HTML page so that the values can be checked without a roundtrip. The JavaScript works on most browsers, but if your browser doesn't support scripting, all the validation can still occur on the server side. TIP Even if you can take advantage of client-side validations, ASP.NET always validates the values one last time when the page gets posted to the server.
Table 6.4. Field Validator Controls | Control | Description | | RequiredFieldValidator | Validates a control against an initial value. If the control contains the InitialValue property of the associated RequiredFieldValidator control, the control won't validate. By default, the InitialValue property contains an empty string, so unless you modify the behavior, using this control forces users to supply a value in the control. | | CompareValidator | Compares the contents of a control against a value or the contents of another control. If the values don't match, the control won't validate. | | RangeValidator | Allows you to check to see whether the value you entered in a control is within a specified range. If it isn't, the control won't validate. | | RegularExpressionValidator | Allows you to check to see whether a control's contents match the input mask (regular expression) you defined. If they don't, the control won't validate. | | CustomValidator | Allows you to specify a server-side and a client-side function to validate the contents of a particular control. Your functions return a Boolean value, indicating the validity of the control's data. | | ValidationSummary | Automatically gathers all the ErrorMessage properties from each of the other validator controls on this form and displays each one in a numbered list, a bulleted list, or a paragraph format. | |
