Build Your Own ASP.NET 3.5 Website Using C# & VB (23 page)

World.”

Literal

This is perhaps the simplest control in ASP.NET. If you set Literal’s Text property,

it will simply insert that text into the output HTML code without altering it. Unlike

Label, which has similar functionality, Literal doesn’t wrap the text in

tags that would allow the setting of style information.

TextBox

The TextBox control is used to create a box in which the user can type or read

standard text. You can use the TextMode property to set this control to display text

in a single line, across multiple lines, or to hide the text being entered (for instance,

in HTML password fields). The following code shows how we might use it in a

simple login page:

Username:

Columns="30" runat="server" />

Licensed to [email protected]

Constructing ASP.NET Web Pages

109

Password:

TextMode="Password" Columns="30" runat="server" />

Comments:

TextMode="MultiLine" Columns="30" Rows="10"

runat="server" />

In each of the instances above, the TextMode attribute dictates the kind of text box

that’s to be rendered.

HiddenField

HiddenField is a simple control that renders an input element whose type attribute

is set to hidden. We can set its only important property, Value.

Button

By default, the Button control renders an input element whose type attribute is

set to submit. When a button is clicked, the form containing the button is submitted

to the server for processing, and both the Click and Command events are raised.

The following markup displays a Button control and a Label:

OnClick="WriteText" />

Notice the OnClick attribute on the control. When the button is clicked, the Click

event is raised, and the WriteText subroutine is called. The WriteText subroutine

will contain the code that performs the intended function for this button, such as

displaying a message to the user:

Visual Basic

Public Sub WriteText(s As Object, e As EventArgs)

messageLabel.Text = "Hello World"

End Sub

Licensed to [email protected]

110

Build Your Own ASP.NET 3.5 Web Site Using C# & VB

C#

public void WriteText(Object s, EventArgs e)

{

messageLabel.Text = "Hello World";

}

It’s important to realize that events are associated with most web server controls,

and the basic techniques involved in using them, are the same events and techniques

we used with the Click event of the Button control. All controls implement a

standard set of events because they all inherit from the WebControl base class.

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:

runat="server" OnClick="WriteText" />

The Click event of the ImageButton receives the coordinates of the point at which

the image was clicked:

Visual Basic

Public Sub WriteText(s As Object, e As ImageClickEventArgs)

messageLabel.Text = "Coordinate: " & e.X & "," & e.Y

End Sub

C#

public void WriteText(Object s, ImageClickEventArgs e)

{

messageLabel.Text = "Coordinate: " + e.X + "," + e.Y;

}

Licensed to [email protected]

Constructing ASP.NET Web Pages

111

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. Here’s LinkButton in action:

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:

ImageUrl="splogo.gif" runat="server">SitePoint 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:

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

to represent a set of options from which only one can be selected. Radio buttons

are grouped together using the GroupName property, like so:

Licensed to [email protected]

112

Build Your Own ASP.NET 3.5 Web Site Using C# & VB

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 tag in HTML. Here’s an example:

AlternateText="description" />

ImageMap

The ImageMap control generates HTML to display images that have certain clickable

regions called
hot spots
. Each hot spot reacts in a specific way when it’s clicked by

the user.

These areas can be defined using three controls, which generate hot spots of different

shapes: CircleHotSpot, RectangleHotSpot, and PolygonHotSpot. Here’s an example

that defines an image map with two circular hot spots:

Radius="20" X="50" Y="50" />

Radius="20" X="100" Y="50" />

Licensed to [email protected]

Constructing ASP.NET Web Pages

113

Table 4.2. Possible values of HotSpotMode

HotSpotMode value

Behavior when hot spot is clicked

Inactive

none

Navigate

The user is navigated to the specified URL.

NotSet

When this value is 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 it’s set for an ImageMap, this value is effectively equivalent to

Navigate.

PostBack

The hot spot raises the Click event that can be handled on the 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
Table 4.2
. 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 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. Here’s what it looks like:

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

Licensed to [email protected]

114

Build Your Own ASP.NET 3.5 Web Site Using C# & VB

Visual Basic

Public Sub Page_Load()

Dim myButton As HtmlButton = New HtmlButton()

myButton.InnerText = "My New Button"

myPlaceHolder.Controls.Add(myButton)

End Sub

C#

public void Page_Load()

{

HtmlButton myButton = new HtmlButton();

myButton.InnerText = "My New Button";

myPlaceHolder.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:

Username:

runat="server" />

Password:

TextMode="Password" Columns="30" 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:

Visual Basic

Public Sub HidePanel(s As Object, e As EventArgs)

myPanel.Visible = False

End Sub

Licensed to [email protected]

Constructing ASP.NET Web Pages

115

C#

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.

DropDownList

A DropDownList control is similar to the HTML select element. The DropDownList

control allows you to select one item from a list using a drop-down menu. Here’s

an example of the control’s code:

The most useful event that this control provides is SelectedIndexChanged. This

event is also exposed by other list controls, such as the CheckBoxList and

RadioButtonList controls, allowing for easy programmatic interaction with the

control you’re using. These controls can also be bound to a database and used to

extract dynamic content into a drop-down menu.

ListBox

A ListBox control equates to the HTML select element with either the multiple

or size attribute set (size would need to be set to a value of 2 or more). If you set

the SelectionMode attribute to Multiple, the user will be able to select more than

one item from the list, as in this example:

Licensed to [email protected]

116

Build Your Own ASP.NET 3.5 Web Site Using C# & VB

SelectionMode="Multiple">