Chapter 4: Constructing ASP.NET Web Pages
<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:
112
Advanced Controls
File: 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 in Table 4.3.
113
Chapter 4: Constructing ASP.NET Web Pages
Table 4.3. Some of the Calendar control’s properties
Property |
Description |
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 de- |
|
fault is False. |
114
Advanced Controls
Property |
Description |
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:
File: 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:
Visual Basic File: 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> |
|
C# |
File: 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 />";
115
Chapter 4: Constructing ASP.NET Web Pages
}
}
</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.
116