Post
Ask Question

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 BulletedList control to render an unordered list of products.

BulletListContol1.gif

 <%@ 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.

BulletListContol2.gif

 <%@ 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.

BulletListContol3.gif

 <%@ 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.

HAVE A GREAT CODING!


Similar Articles