BulletedList Control in ASP.NET
Introduction & Demonstration
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 given below uses the BulletedListcontrol to render an
unordered list of products.
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="1_Without_Image.aspx.vb" Inherits="_Default"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
</script>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:BulletedList
id="blProducts"
DataSourceID="SqlDataSource1"
DataTextField="Title"
Runat="server" />
<asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:DatabaseConnectionString1 %>"
ProviderName="<%$
ConnectionStrings:DatabaseConnectionString1.ProviderName %>"
SelectCommand="SELECT [ID],
[TITLE] FROM [PRO_LIST]"></asp:SqlDataSource>
</div>
</form>
</body>
</html>
We 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
We 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 we can associate an image with each list item. For example, the page given
below displays an image named Bullet_List.gif with
each list item.
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="1_Without_Image.aspx.vb" Inherits="_Default"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
</script>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:BulletedList
id="blProducts"
DataSourceID="SqlDataSource1"
DataTextField="Title"
BulletStyle="customimage"
BulletImageUrl="~/Bullet_List.gif"
Runat="server" />
<asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:DatabaseConnectionString1 %>"
ProviderName="<%$
ConnectionStrings:DatabaseConnectionString1.ProviderName %>"
SelectCommand="SELECT [ID], [TITLE] FROM [PRO_LIST]"></asp:SqlDataSource>
</div>
</form>
</body>
</html>
We 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 given below displays a list of links to
other websites.
<%@ Page Language="VB" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
</script>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Untitled Page</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:BulletedList
id="blHyperLinkWebsites"
DisplayMode="HyperLink"
Target="_blank"
Runat="server">
<asp:ListItem
Text="Itorian"
Value="http://www.itorian.com" />
<asp:ListItem
Text="C# Corner"
Value="http://www.c-sharpcorner.com" />
<asp:ListItem
Text="VB.Net Haven"
Value="http://www.vbdotnethaven.com" />
</asp:BulletedList>
</div>
</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
we click one of the hyperlinks, the page is opened in a new window. The BulletedList control is
different from the other List controls because it does not support the SelectedIndex, SelectedItem, and SelectedValue properties.
Note: Continue in Next Part.
Comments
Post a Comment