Working with the BulletedList Control

Working with the `BulletedList` Control

The BulletedList control renders either an unordered (bulleted) or ordered (numbered) list. Each list item can be rendered as plain text, a LinkButton control, or a link to another web page.

For example, the page in Listing 10.14 uses the BulletedList control to render an unordered list of movies (see Figure 10.13).

Listing 10.14. `ShowBulletedList.aspx`

<%@ Page Language="VB" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head  runat="server">     <title>Show BulletedList</title> </head> <body>     <form  runat="server">     <div>     <asp:BulletedList                  DataSource         DataTextField="Title"         Runat="server" />     <asp:SqlDataSource                  SelectCommand="SELECT Title FROM Movies"         ConnectionString="<%$ ConnectionStrings:Movies %>"         Runat="server" />     </div>     </form> </body> </html>

Figure 10.13. Displaying a list items with the `BulletedList` control.

You can control the appearance of the bullets that appear for each list item with the BulletStyle property. This property accepts the following values:

Circle
CustomImage
Disc
LowerAlpha
LowerRoman
NotSet
Numbered
Square
UpperAlpha
UpperRoman

You can set BulletStyle to Numbered to display a numbered list. If you set this property to the value CustomImage and assign an image path to the BulletImageUrl property, then you can associate an image with each list item. For example, the page in Listing 10.15 displays an image named Bullet.gif with each list item (see Figure 10.14).

Figure 10.14. Displaying image bullets.

Listing 10.15. `ShowBulletedListImage.aspx`

<%@ Page Language="VB" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head  runat="server">     <title>Show BulletedList Image</title> </head> <body>     <form  runat="server">     <div>     <asp:BulletedList                  DataSource         DataTextField="Title"         BulletStyle="CustomImage"         BulletImageUrl="~/Images/Bullet.gif"         Runat="server" />     <asp:SqlDataSource                  SelectCommand="SELECT Title FROM Movies"         ConnectionString="<%$ ConnectionStrings:Movies %>"         Runat="server" />     </div>     </form> </body> </html>

You can modify the appearance of each list item by modifying the value of the DisplayMode property. This property accepts one of the following values from the BulletedListDisplayMode enumeration:

HyperLink Each list item is rendered as a link to another page.
LinkButton Each list item is rendered by a LinkButton control.
Text Each list item is rendered as plain text.

For example, the page in Listing 10.16 displays a list of links to other websites (see Figure 10.15).

Figure 10.15. Displaying list items as hyperlinks.

Listing 10.16. `ShowBulletedListHyperLinks.aspx`

<%@ Page Language="VB" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head  runat="server">     <title>Show BulletedList HyperLinks</title> </head> <body>     <form  runat="server">     <asp:BulletedList                  DisplayMode="HyperLink"         Target="_blank"         Runat="server">         <asp:ListItem             Text="Yahoo"             Value="http://www.Yahoo.com" />         <asp:ListItem             Text="Google"             Value="http://www.Google.com" />         <asp:ListItem             Text="Deja"             Value="http://www.Deja.com" />     </asp:BulletedList>     </form> </body> </html>

Each list item has both its Text and Value properties set. The Text property contains the text that is displayed for the list item, and the Value property contains the URL for the other website. Notice that the Target property is set to the value _blank. When you click one of the hyperlinks, the page is opened in a new window.

Warning

The BulletedList control is different from the other List controls because it does not support the SelectedIndex, SelectedItem, and SelectedValue properties.

Working with the BulletedList Control