Introducing Web Form Controls

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:

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:

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.

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="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