Generate A Hyper Link With Bullet List

The link button also refers to a hyperlink. The bullet list is a server side control, used to create a bullet-marked list. Both display modes render as link only.

What is the difference between selecting DisplayMode as LinkButton or HyperLink?

After rendering on the page the LinkButton option moves / roots the user through the Server side but the HyperLink option moves / roots the user directly on the link not through Server side.

  1. <asp:BulletedList ID="blFriends" runat="server">  
  2.   
  3. </asp:BulletedList>  
I have shown the basic tag for the bullet list above.

You can display a bullet list of various types.

Bullets Type Remarks
NotSet No bullet will appear in the list.
Numbered To display simple digital number in numbering (1,2,3).
LowerAlpha To display all numbering characters in lowercase mode. (abcd)
UpperAlpha To display all numbering characters in uppercase mode. (ABCD)
LowerRoman To display all numbering in lower roman letters. (i,ii,iii, iv)
UpperRoman To display all numbering in upper roman letters. (I, II, III, IV)
Disc To display disc with background.
Circle To display circle without filling the background.
Square To display square image.
CustomImage To display your desired image in the list. You can select any image file.



Like other collection controls; i.e DropDownList, RadioButtonList etc., this control also has the properties given below.

Properties Type Remarks
DataTextField To display the text of assigning a field’s value.
DataValueField To return value, when the user selects a list item.
Items Set items manually in the design time.
BulletStyle Select from various predefined bullet styles.
BulletImageUrl Select custom images for the list.
DisplayMode TEXT: Render your list as a simple text.
HYPERLINK: Render your list as simple hyperlink.
LinkButton: Render your list as link button.
FirstBulletNumber Set your desire numeric value from which the list get start.

In this article, we going to implement bullet list as LinkButton. For the data, I am using LINQ TO SQL (DBML).

Logic of Implemenation

As you know in most list collections, some types of control have DataBound event.

What is DataBound Event ?

I am using this  for:  

Step by Step Implementation

Table Structure

  1. CREATE TABLE [dbo].[tblTechFriends](  
  2. [FriendID] [int] IDENTITY(1,1) NOT NULL,  
  3. [Name] [varchar](50) NULL,  
  4. [EmailAddress] [varchar](150) NULL,  
  5. [BlogURL] [varchar](200) NULL,  
  6. ON [PRIMARY]  
Sample Data Entered



Create an ASP.NET empty Web site project named “BulletedLIstHyperlink”



After successful creation of a project, your Solution Explorer looks as shown below.



Right click on the project title; i.e., “BulletListHyperlink” in bold letters.



Select WebForm, as shown below.



Now, click on ToolBox and select BulletList control



Drag and drop Bullet List control on Default.aspx page. Drag bullet list control on default.aspx. We are going to implement BulletList with DisplayMode as LinkButton.



Click on BulletList control switch to properties window: 



Right click on project title I.e. “BulletListHyperlink” in bold letters.



Select LINQ TO SQL Class named “BulletListDataClasses.dbml”



As you click ADD button above, you will see the dialog box.



Simply press YES.

Now, switch to Server Explorer and select Data Connections. Right click on Data Connections and select ADD CONNECTION option.



After a successful connection establishment with the database Server, your Server explorer will look, as shown below.



Double click your DBML file, which is located inside the APP_CODE folder.



Drag and drop tblTechFriends on DBML canvas and it will look, as shown below.



After establishing connection with the database Server, connection string is auto generated in WEB.CONFIG file.

Now, double click on Default.aspx page to set the properties of BulletList control.

 

Properties Properties Value
ID blTechFriendsLinkButton
BulletStyle Disc
DisplayMode LinkButton
Font - Bold True
Font - Size Large
ToolTip My Technological Friends List - Link Button

Now, double click on Default.aspx.cs file i.e code at the back-end file.

  1. protected void Page_Load(object sender, EventArgs e)   
  2. {  
  3.   
  4.     if (!IsPostBack) {  
  5.         BulletListDataClassesDataContext _db = new BulletListDataClassesDataContext();  
  6.         blTechFriendsLinkButton.DataSource = _db.tblTechFriends.ToList();  
  7.         blTechFriendsLinkButton.DataTextField = "Name";  
  8.         blTechFriendsLinkButton.DataValueField = "BlogURL";  
  9.         blTechFriendsLinkButton.DataBind();  
  10.     }  
  11.   
  12. }  
  13.   
  14. protected void blTechFriendsLinkButton_Click(object sender, BulletedListEventArgs e) {  
  15.     Response.Redirect(blTechFriendsLinkButton.Items[e.Index].Value);  
  16. }  
Output

You can see at the bottom of the browser that there is no directly-shown link where it gets redirected because it's redirected to you through the Server.



Now, we implement Bullet List with DisplayMode as HyperLink.



Double click on the newly added ASPX page. Drag and drop BulletList control from ToolBox.



Now, double click on Default.aspx page for setting the properties of BulletList control.


Properties Properties Value
ID blTechFriendsHyperLink
BulletStyle Square
DisplayMode HyperLink
Font - Bold True
Font - Size Large
ToolTip My Technological Friends List - HyperLink

Now double click on BulletedListHyperLink.aspx.cs file that is the code behind file.

  1. protected void Page_Load(object sender, EventArgs e) {  
  2.   
  3.   
  4.     BulletListDataClassesDataContext _db = new BulletListDataClassesDataContext();  
  5.   
  6.   
  7.     //list of friends manually insert into   
  8.     foreach(var item in _db.tblTechFriends.ToList()) {  
  9.         ListItem _item = new ListItem(item.Name, item.BlogURL);  
  10.         blTechFriendsHyperLink.Items.Add(_item);  
  11.     }  
  12.   
  13. }  
Output

You can see at the bottom of the browser, that it directly shows a link where it gets redirected because it is redirected to you directly.



To learn simple uses of bullet lists, you can visit my previous article on bullet lists. 


Similar Articles