ASP.NET 2.0: A Getting Started Guide

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.

<asp:DropDownList id="ddlFavColor" runat="server">                
 <asp:ListItem Text="Red" value="red" />                
 <asp:ListItem Text="Blue" value="blue" />                
 <asp:ListItem Text="Green" value="green" />                
</asp:DropDownList>

The most useful event that this control provides is SelectedIndexChanged. This event is exposed by other list controls, such as the CheckBoxList and RadioButtonList controls, allowing for easy programmatic interaction with the control. These controls can also be bound to a database, allowing you 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:

<asp:ListBox id="listTechnologies" runat="server"                
   SelectionMode="Multiple">                
 <asp:ListItem Text="ASP.NET" Value="aspnet" />                
 <asp:ListItem Text="JSP" Value="jsp" />                
 <asp:ListItem Text="PHP" Value="php" />                
 <asp:ListItem Text="CGI" Value="cgi" />                
 <asp:ListItem Text="ColdFusion" Value="cf" />                
</asp:ListBox>

RadioButtonList

Like the RadioButton control, the RadioButtonList control represents radio buttons. However, the RadioButtonList control represents a list of radio buttons and uses more compact syntax. Here's an example:

<asp:RadioButtonList id="favoriteColor" runat="server">                
 <asp:ListItem Text="Red" Value="red" />                
 <asp:ListItem Text="Blue" Value="blue" />                
 <asp:ListItem Text="Green" Value="green" />                
</asp:RadioButtonList>

CheckBoxList

As you may have guessed, the CheckBoxList control represents a group of check boxes; it's equivalent to using several CheckBox controls in row:

<asp:CheckBoxList id="favoriteFood" runat="server">                
 <asp:ListItem Text="Pizza" Value="pizza" />                
 <asp:ListItem Text="Tacos" Value="tacos" />                
 <asp:ListItem Text="Pasta" Value="pasta" />                
</asp:CheckBoxList>

BulletedList

The BulletedList control displays bulleted or numbered lists, using <ul> (unordered list) or <ol> (ordered list) tags. Unlike the other list controls, the BulletedList doesn't allow the selection of items, so the SelectedIndexChanged event isn't supported.

The first property you'll want to set is DisplayMode, which can be Text (the default), or HyperLink, which will render the list items as links. When DisplayMode is set to HyperLink, you can use the Click event to react when the user clicks on one of the items.

The other important property is BulletStyle, which determines the style of the bullets. The accepted values are Numbered (1, 2, 3, ...), LowerAlpha (a, b, c, ...), UpperAlpha (A, B, C, ...), LowerRoman (i, ii, iii, ...), UpperRoman (I, II, III, ...), Circle, Disc, Square, and CustomImage. If the style is set to CustomImage, you'll also need to set the BulletStyleImageUrl to specify the image to be used for the bullets. If the style is one of the numbered lists, you can also set the FirstBulletNumber property to specify the first number or letter that's to be generated.

Advanced Controls

These controls are advanced in terms of their usage, the HTML code they generate, and the background work they do for you. Some of these controls aren't available to older versions of ASP.NET; we'll learn more about many of them (as well as others that aren't covered in this chapter) as we progress through this book.

Calendar

The Calendar is a great example of the reusable nature of ASP.NET controls. The Calendar control generate the markup to display an intuitive calendar in which the user can click to select or move between days, weeks, months, and so on.

The Calendar control requires very little customization, and can be created within a page like this:

Example 4.4. Calendar.aspx (excerpt)                
               
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"                  
   "http://www.w3.org/TR/html4/strict.dtd">                
<html>                
 <head>                
   <title>Calendar Test</title>                
 </head>                
 <body>                
   <form runat="server">                
     <asp:Calendar id="myCalendar" runat="server" />                
   </form>                
 </body>                
</html>

If you save this page in the Learning folder and load it, you'd get the output shown in Figure 4.4.

Figure 4.4. Displaying the default calendar

The Calendar control contains a wide range of properties, methods, and events, including those listed here:

• DayNameFormat - This property sets the format of the day names. Its possible values are FirstLetter, FirstTwoLetters, Full, and Short. The default is Short, which displays the three-letter abbreviation.
• FirstDayOfWeek - This property sets the day of the week that begins each week in the calendar. By default, the value of this property is determined by your server's region settings, but you can set this to Sunday or Monday if you want to control it.
• NextPrevFormat - Set to CustomText by default, this property can be set to ShortMonth or FullMonth to control the format of the next and previous month links.
• SelectedDate - This property contains a DateTime value that specifies the highlighted day. You'll use this property a lot to determine which day the user has selected.
• SelectionMode - This property determines whether days, weeks, or months can be selected; its possible values are Day, DayWeek, DayWeekMonth, and None, and the default is Day. When Day is selected, a user can only select a day; when DayWeek is selected, a user can select a day or an entire week; and so on.
• SelectMonthText - This property controls the text of the link that's displayed to allow users to select an entire month from the calendar.
• SelectWeekText - This property controls the text of the link that's displayed to allow users to select an entire week from the calendar.
• ShowDayHeader - If True, this property displays the names of the days of the week. The default is True.
• ShowGridLines - If True, this property renders the calendar with grid lines. The default is True.
• ShowNextPrevMonth - If True, this property displays next/previous month links. The default is True.
• ShowTitle - If True, this property displays the calendar's title. The default is False.
• TitleFormat - This property determines how the month name appears in the title bar. Possible values are Month and MonthYear. The default is MonthYear.
• TodaysDate - This DateTime value sets the calendar's current date. By default, this value is not highlighted within the Calendar control.
• VisibleDate - This DateTime value controls which month is displayed.

Let's take a look at an example that uses some of these properties, events, and methods to create a Calendar control that allows users to select days, weeks, and months. Modify the calendar in Calendar.aspx, and add a label to it, as follows:

Example 4.5. Calendar.aspx (excerpt)                
               
<asp:Calendar ID="myCalendar" runat="server" DayNameFormat="Short"                
   FirstDayOfWeek="Sunday" NextPrevFormat="FullMonth"                
   SelectionMode="DayWeekMonth" SelectWeekText="Select Week"                
   SelectMonthText="Select Month" TitleFormat="Month"                
   OnSelectionChanged="SelectionChanged" />                
<h2>You selected these dates:</h2>                
<asp:Label ID="myLabel" runat="server" />

Now add a <script runat="server"> tag to the head of the web form to include the SelectionChanged event handler referenced by your calendar:

Example 4.6. Calendar.aspx (excerpt)                
               
<script runat="server" language="VB">                
 Sub SelectionChanged(ByVal s As Object, ByVal e As EventArgs)                
   myLabel.Text = ""                
   For Each d As DateTime In myCalendar.SelectedDates                
     myLabel.Text &= d.ToString("D") & "<br />"                
   Next                
 End Sub                
</script>                
               
Example 4.7. Calendar.aspx (excerpt)                
               
<script runat="server" language="C#">                
 void SelectionChanged(Object s, EventArgs e)                
 {                
   myLabel.Text = "";                
   foreach (DateTime d in myCalendar.SelectedDates)                
   {                
     myLabel.Text += d.ToString("D") + "<br />";                
   }                
 }                
</script>

Save your work and test it in a browser. Try selecting a day, week, or month. The selection will be highlighted similar to this display shown in Figure 4.5.

Figure 4.5. Using the Calendar control

In SelectionChanged, we loop through each date that the user has selected, and append it to the BulletedList we added to the page.