Introducing Web Form Controls

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:

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