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.

<asp:BulletedList ID="blFriends" runat="server">

</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

CREATE TABLE [dbo].[tblTechFriends](
[FriendID] [int] IDENTITY(1,1) NOT NULL,
[Name] [varchar](50) NULL,
[EmailAddress] [varchar](150) NULL,
[BlogURL] [varchar](200) NULL,
) 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.

protected void Page_Load(object sender, EventArgs e)
{

    if (!IsPostBack) {
        BulletListDataClassesDataContext _db = new BulletListDataClassesDataContext();
        blTechFriendsLinkButton.DataSource = _db.tblTechFriends.ToList();
        blTechFriendsLinkButton.DataTextField = "Name";
        blTechFriendsLinkButton.DataValueField = "BlogURL";
        blTechFriendsLinkButton.DataBind();
    }

}

protected void blTechFriendsLinkButton_Click(object sender, BulletedListEventArgs e) {
    Response.Redirect(blTechFriendsLinkButton.Items[e.Index].Value);
}

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.

protected void Page_Load(object sender, EventArgs e) {


    BulletListDataClassesDataContext _db = new BulletListDataClassesDataContext();


    //list of friends manually insert into
    foreach(var item in _db.tblTechFriends.ToList()) {
        ListItem _item = new ListItem(item.Name, item.BlogURL);
        blTechFriendsHyperLink.Items.Add(_item);
    }

}

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.