BulletList Example in ASP.NET using C#

BulletList Example in ASP.NET using C#


Posted in : ASP.Net Posted on : November 20, 2010 at 6:14 PM Comments : [ 0 ]

In this article we will introduce with the BulletList control in ASP.NET using C#.

BulletList Example in ASP.NET using C#

BulletList control is used to create list of item formatted with bullet. It works like a li in html.
 There are different types of BulletStyle are available which are following:

 1. Not set: Not style
 2. Numbered: Bullet shows in number
 3. LowerAlpha: like(a, b.. or aa, ab..etc).
 4. UpperAlpha: like(A,B..or AA,AB..etc).
 5. LowerRoman: like(i, ii..etc).
 6. UpparRoman: like(I,II..etc).
 7. Disc: Shows filled circle.
 8. Circle: Shows empty circle.
 9. Squre: Shows filled square.
 10. CustomImage: Shows custom image.

 In this example we use the Custom image for BulletStyle and provide the  BulletImageUrl="~/Images/bullet-red.png". Another important property is DisplayMode.
DisplayMode property has three value.

 1. Text: Displayed as text.
 2. HyperLink: Displayed as hyperlink.
 3. LinkButton: Displayed as link button.

 In this example we use the DisplayMode="Hyperlink". Simply drop a BulletedList from Toolbox to a page and click the Edit Items list, which launches ListItem Collection Editor.
 The following figure shows how we can add item in BulletList.


BulletList.aspx (Design page):

BulletList.aspx (source page):

<%@ Page Language="C#" AutoEventWireup="true" 
MasterPageFile="~/RoseindiaMaster.master" 
CodeFile="BulletList.aspx.cs" Inherits="BulletList" %>
<asp:Content ID="Content1" runat="server" 
contentplaceholderid="ContentPlaceHolder1">
<div>
<h2 style="color:Green">BulletList in ASP.NET 4 , C#</h2>
<asp:BulletedList ID="BulletedList1" runat="server" 
BulletImageUrl="~/Images/bullet-red.png" BulletStyle="CustomImage" 
DisplayMode="HyperLink" Font-Bold="True" Font-Size="Large" Width="128px">
<asp:ListItem Value="http://roseindia.net/">Roseindia</asp:ListItem>
<asp:ListItem Value="http://www.google.co.in/">Google</asp:ListItem>
<asp:ListItem Value="http://roseindia.net/techindex/Flex4.html">Flex4 tutorial</asp:ListItem>
<asp:ListItem Value="http://roseindia.net/java/">Java tutorial</asp:ListItem>
</asp:BulletedList>
</div>
</asp:Content>

The output of BulletList is as follows:

 

Download source code

Go to Topic «PreviousHomeNext»

Your Comment:


Your Name (*) :
Your Email :
Subject (*):
Your Comment (*):
  Reload Image
 
 

 
Tutorial Topics