ASP.NET 2.0: A Getting Started Guide

ImageButton

An ImageButton control is similar to a Button control, but it uses an image that we supply in place of the typical system button graphic. Take a look at this example:

<asp:ImageButton id="myImgButton" ImageUrl="myButton.gif"                
   runat="server" OnClick="WriteText" />                
<asp:Label id="messageLabel" runat="server" />

The Click event of the ImageButton receives the coordinates of the point at which the image was clicked:

Public Sub WriteText(s As Object, e As ImageClickEventArgs)                
 messageLabel.Text = "Coordinate: " & e.X & "," & e.Y                
End Sub                
               
public void WriteText(Object s, ImageClickEventArgs e)                
{                
 messageLabel.Text = "Coordinate: " + e.X + "," + e.Y;                
}

LinkButton

A LinkButton control renders a hyperlink that fires the Click event when it's clicked. From the point of view of ASP.NET code, LinkButtons can be treated in much the same way as buttons, hence the name.

<asp:LinkButton id="myLinkButon" Text="Click Here"                
   runat="server" />

HyperLink

The HyperLink control creates on your page a hyperlink that links to the URL in the NavigateUrl property. Unlike the LinkButton control, which offers features such as Click events and validation, HyperLinks are meant to be used to navigate from one page to the next.

<asp:HyperLink id="myLink" NavigateUrl="http://www.sitepoint.com/"                
   ImageUrl="splogo.gif" runat="server">SitePoint</asp:HyperLink>

If it's specified, the ImageUrl attribute causes the control to display the specified image, in which case the text is demoted to acting as the image's alternate text.

CheckBox

You can use a CheckBox control to represent a choice that can have only two possible states?checked or unchecked.

<asp:CheckBox id="questionCheck" Text="I agree, I like .NET!"                
   Checked="True" runat="server" />

The main event associated with a CheckBox is the CheckChanged event, which can be handled with the OnCheckChanged attribute. The Checked property is True if the checkbox is checked, and False otherwise.

RadioButton

A RadioButton is a lot like a CheckBox, except that RadioButtons can be grouped together to represent a set of options from which only one can be selected. Radio buttons are grouped together using the GroupName property.

<asp:RadioButton id="sanDiego" GroupName="City" Text="San Diego"                
   runat="server" /><br />                
<asp:RadioButton id="boston" GroupName="City" Text="Boston"                
   runat="server" /><br />                
<asp:RadioButton id="phoenix" GroupName="City" Text="Phoenix"                
   runat="server" /><br />                
<asp:RadioButton id="seattle" GroupName="City" Text="Seattle"                
   runat="server" />

Like the CheckBox control, the main event associated with RadioButtons is the CheckChanged event, which can be handled with the OnCheckChanged attribute. The other control we can use to display radio buttons is RadioButtonList, which we'll also meet in this chapter.

Image

An Image control creates an image that can be accessed dynamically from code; it equates to the <img> tag in HTML.

Here's an example:

<asp:Image id="myImage" ImageUrl="mygif.gif" runat="server"                
   AlternateText="description" />

ImageMap

The ImageMap control generates HTML to display images that have certain clickable regions called hot spots. Each hot spot reacts differently when clicked by the user.

These areas are defined using three controls that generate hot spots of different shapes: CircleHotSpot, RectangleHotSpot, and PolygonHotSpot. Here's an example that defines an image map with two circular hot spots:

<asp:ImageMap ID="myImageMap" runat="server" ImageUrl="image.jpg">                
 <asp:CircleHotSpot AlternateText="Button1"                
     Radius="20" X="50" Y="50" />                
 <asp:CircleHotSpot AlternateText="Button2"                
     Radius="20" X="100" Y="50" />                
</asp:ImageMap>

Possible values of HotSpotMode, and the bahavior of each, include:

• Inactive - Exhibits no behavior when hotspot is clicked.
• Navigate - The user is navigated to the specified URL.
• NotSet - When set for a HotSpot, the behavior is inherited from the parent ImageMap; if the parent ImageMap doesn't specify a default value, Navigate is set. When set for an ImageMap, this value is effectively equivalent to Navigate.
• PostBack - The hot spot raises the Click event that can be handled server-side to respond to the user action.

To configure the action that results when a hot spot is clicked by the user, we set the HotSpotMode property of the ImageMap control, or the HotSpotMode property of the individual hot spot objects, or both, using the values shown in the list above. If the HotSpotMode property is set for the ImageMap control as well as for an individual hot spot, the latter property will override that set for the more general ImageMap control.

The Microsoft .NET Framework 2.0 SDK Documentation for the ImageMap class and HotSpotMode enumeration contains detailed examples of the usage of these values.

PlaceHolder

The PlaceHolder control lets us add elements at a particular place on a page at any time, dynamically, through our code.

<asp:PlaceHolder id="placeHolder" runat="server" />

The following code dynamically adds a new HtmlButton control within the placeholder:

Public Sub Page_Load()                
 Dim button myButton As HtmlButton = New HtmlButton()                
 myButton.InnerText = "My New Button"                
 placeHolder.Controls.Add(myButton)                
End Sub                
               
public void Page_Load()                
{                
 HtmlButton button myButton = new HtmlButton();                
 myButton.InnerText = "My New Button";                
 placeHolder.Controls.Add(myButton);                
}

Panel

The Panel control functions similarly to the div element in HTML, in that it allows the set of items that resides within the tag to be manipulated as a group. For instance, the Panel could be made visible or hidden by a Button's Click event:

<asp:Panel id="myPanel" runat="server">                
 <p>Username: <asp:TextBox id="usernameTextBox" Columns="30"                
     runat="server" /></p>                
 <p>Password: <asp:TextBox id="passwordTextBox"                
     TextMode="Password" Columns="30" runat="server" />                
 </p>                
</asp:Panel>                
<asp:Button id="hideButton" Text="Hide Panel" OnClick="HidePanel"                
   runat="server" />

The code above places two TextBox controls within a Panel control. The Button control is outside of the panel. The HidePanel subroutine would then control the Panel's visibility by setting its Visible property to False:

Public Sub HidePanel(s As Object, e As EventArgs)                
 myPanel.Visible = False                
End Sub                
               
public void HidePanel(Object s, EventArgs e)                
{                
 myPanel.Visible = false;                
}

In this case, when the user clicks the button, the Click event is raised and the HidePanel subroutine is called, which sets the Visible property of the Panel control to False.

List Controls

Here, we'll meet the ASP.NET controls that display simple lists of elements: ListBox, DropDownList, CheckBoxList, RadioButtonList, and BulletedList.