Stepping Up to Web Controls

• Benefits of Web Controls

• Basic Web Controls

• Web Control Class Properties

• Common Web Control Concepts

• List Controls

• Table Controls

• Web Control Events

• PostBack AutoPostBack

• How Postback Events Work

• The Page Life Cycle

Benefits of Web Controls over HTML controls

• Provide a rich user interface

• Provide a consistent object model

• Tailor their output automatically

• Provide high-level features

Basic Web Controls

Basic Web Control Classes

The Web Control Tags

ASP.NET tags have a special format. They always begin with the prefix asp: followed by the class name. If there is no closing tag, the tag must end with />.<asp:TextBox ID="txt" BackColor="Yellow" Text="Hello World"ReadOnly="True" TextMode="MultiLine" Rows="5" runat="server" />

Web Control Classes

The WebControl Base ClassMost web controls begin by inheriting from the WebControl

base class. This class defines the essential functionality for tasks such as data binding and includes some basic properties that you can use with almost any web control

Property Description

AccessKey Specifies the keyboard shortcut as one letter. For example, if you set this to Y, the Alt+Y keyboard combination will automatically change focus to this web control.

BackColor, ForeColor,and BorderColor

Sets the colors used for the background, foreground, and border of thecontrol. In most controls, the foreground color sets the text color.

BorderWidth Specifies the size of the control border.

BorderStyle One of the values from the BorderStyle enumeration, including Dashed, Dotted, Double, Groove, Ridge, Inset, Outset, Solid, and None.

Controls Provides a collection of all the controls contained inside the current control

Property Description

Enabled When set to false, the control will be visible, but it will not be able to receive user input or focus.

EnableViewState Set this to false to disable the automatic state management for this control

Font Specifies the font used to render any text in the control as a System.Web.UI.WebControls.FontInfo object.

Height and Width Specifies the width and height of the control. For some controls, these properties will be ignored when used with older browsers.

ID Specifies the name that you use to interact with the control in your code

Page Provides a reference to the web page that contains this control as a system.Web.UI.Page object.

Parent Provides a reference to the control that contains this control.

TabIndex A number that allows you to control the tab order.

ToolTip Displays a text message above the control

Visible When set to false, the control will be hidden.

The WebControl Base Class

Units

All the properties require the Unit structure, which combines a numeric value with a type of measurement (pixels, percentage, and so on.

<asp:Panel Height="300px" Width="50%" ID="pnl" runat="server" />pnl.Height = Unit.Pixel(300);

pnl.Width = Unit.Percentage(50);

// Create a Unit object.Unit myUnit = new Unit(300, UnitType.Pixel);

// Assign the Unit object to several controls or properties.pnl.Height = myUnit;pnl.Width = myUnit;

Enumerations

Enumerations are used heavily in the .NET class library to group a set of related constants. For example, when you set a control’s BorderStyle property, you can choose one of several predefined values from the BorderStyle enumeration.

ctrl.BorderStyle = BorderStyle.Dashed;

<asp:Label BorderStyle="Dashed" Text="Border Test" ID="lbl"runat="server" />

Colors

The Color property refers to a Color object from the System.Drawing namespace. You can create color objects in several ways:

Using an ARGB (alpha, red, green, blue) color value: int alpha = 255, red = 0, green = 255, blue = 0;ctrl.ForeColor = Color.FromArgb(alpha, red, green, blue);

Using a predefined .NET color name: ctrl.ForeColor = Color.Crimson;

Using an HTML color name:ctrl.ForeColor = ColorTranslator.FromHtml("Blue");

Fonts

ctrl.Font.Name = "Verdana";ctrl.Font.Bold = true;

You can also set the size using the FontUnit type:// Specifies a relative size.

ctrl.Font.Size = FontUnit.Small;

// Specifies an absolute size of 14 pixels.ctrl.Font.Size = FontUnit.Point(14);

FocusUnlike HTML server controls, every web control provides a Focus() method. The Focus() method affects only input controls

<form DefaultFocus="TextBox2" runat="server">Another way to manage focus is using access keys. For example, if you set the AccessKey property of a TextBox to A, pressing Alt+A focus will switch to the TextBox. The following label gives focus to TextBox2 when the keyboard combination Alt+2 is pressed:

<asp:Label AccessKey="2“ AssociatedControlID="TextBox2" runat="server“ Text="TextBox2:" />

The Default Button.

The default button is the button that is “clicked” when the user presses the Enter key.

To designate a default button, you must set the DefaultButton property with the ID of the respective control, as shown here:

<form DefaultButton="cmdSubmit" runat="server">

List ControlsThe list controls include the ListBox, DropDownList, CheckBoxList, RadioButtonList, and BulletedList.

Multiple-Select List Controls

Some list controls can allow multiple selections.

It is supported for a ListBox, provided you have set the SelectionMode property to the enumerated value ListSelectionMode.Multiple.

The user can then select multiple items by holding down the Ctrl key while clicking the items in the list.

With the CheckBoxList, multiple selections are always possible.

Table ControlsThe Table control is built out of a hierarchy of objects. Each Table object contains one or more TableRow objects. In turn, each TableRow object contains one or more TableCell objects.

Post Back and AutoPostBack

Some events, such as the Click event of a button, do occur immediately. That’s because when clicked, the button posts back the page. However, other actions do cause events but don’t trigger a postback.

An example is when the user changes the text in a text box (which triggers the TextChanged event) or chooses a new item in a list (the SelectedIndexChanged event).

You might want to respond to these events, but without a postback your code has no way to run.

If you want to capture a change event (such as TextChanged, CheckedChanged, or SelectedIndexChanged) immediately, you need to set the control’s AutoPostBack property to true.

The Page Life Cycle

How Post Back Events Work

ASP.NET also adds two additional hidden input fields that are used to pass information back to the server. This information consists of the ID of the control that raised the event and any additional information that might be relevant. These fields are initially empty, as shown here:

<input type="hidden" name="__EVENTTARGET" id="__EVENTTARGET" value="" /><input type="hidden" name="__EVENTARGUMENT" id="__EVENTARGUMENT" value="" />

Also ASP.NET generates the __doPostBack() function automatically, provided at least one control on the page uses automatic postbacks.

How Post Back Events WorkThe __doPostBack() function has the responsibility for

setting these values with the appropriate information about the event and then submitting the form. The __doPostBack() function is shown here:<script language="text/javascript">function __doPostBack(eventTarget, eventArgument) {if (!theForm.onsubmit || (theForm.onsubmit() != false)) {theForm.__EVENTTARGET.value = eventTarget;theForm.__EVENTARGUMENT.value = eventArgument;theForm.submit();}...}</script>