How to Use a BulletedList Control in Visual Basic.NET
A bulleted list control adds a bulleted list to the web site. We are also able to choose what is put in the bulleted list. This item is best used when making headlines of steps, examples, etc. As you will see it is simple to create and use.
Setting Up
Before we start adding items from the toolbox, we must have a web site and web form set up to work with. If you have not done so already, set up an empty web site in visual studio. To do so, open visual studio and click File > New > Web Site. Using ‘Visual Basic’ as the template, select ASP.NET Empty Web Site, name the file BulletedList Control and click OK.
Now that we have an empty web site set up, we can set up a web form to work on. Right click the web site name and click Add New Item. Using ‘Visual Basic’ as the template, select Web Form, leave the file name as Default.aspx and click add. Now in the toolbox panel, grab and place a BulletedList item inside the div tags. Again from the toolbox, grab and place a Label item before the opening bulleted list tag. Change the label’s text to Ice Cream Flavors.
OK so we have a bulleted list control on our web page but no items, how do we add some? Well we simply create a list item template inside the bulleted list template and add whatever we choose. This is done by writing <asp:ListItem></asp:ListItem> between the opening and closing bulleted list tags. Whatever is put in between the list item opening and closing tags will be used as a bulleted point. I will be using ice cream flavors for this example because ice cream is awesome. Apply the information in the code block below into your Default.aspx page:
Output
Run the page by clicking the green arrow at the top next to the debug drop down list or by clicking F5. If it asks you to ‘Modify the Web.config file to enable debugging’ click OK. The page exhibits what we just saw in the design view, only difference is this is the actual web page. See how a bulleted list can be used? Very simple and effective at the appropriate moments.
You now know how to use one more tool in visual studio. Keep practicing and happy programming.
BulletedList Control.zip
Setting Up
Before we start adding items from the toolbox, we must have a web site and web form set up to work with. If you have not done so already, set up an empty web site in visual studio. To do so, open visual studio and click File > New > Web Site. Using ‘Visual Basic’ as the template, select ASP.NET Empty Web Site, name the file BulletedList Control and click OK.
If you’re ever in the market for some great Windows web hosting, try Server Intellect. We have been very pleased with their services and most importantly, technical support.
Step OneNow that we have an empty web site set up, we can set up a web form to work on. Right click the web site name and click Add New Item. Using ‘Visual Basic’ as the template, select Web Form, leave the file name as Default.aspx and click add. Now in the toolbox panel, grab and place a BulletedList item inside the div tags. Again from the toolbox, grab and place a Label item before the opening bulleted list tag. Change the label’s text to Ice Cream Flavors.
Code Block
Default.aspx
Add a bulleted list item from the tool box into default.aspx<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Label ID="Label1" runat="server" Text="Ice Cream Flavors"></asp:Label>
<asp:BulletedList ID="BulletedList1" runat="server">
</asp:BulletedList>
</div>
</form>
</body>
</html>
Server Intellect assists companies of all sizes with their hosting needs by offering fully configured server solutions coupled with proactive server management services. Server Intellect specializes in providing complete internet-ready server solutions backed by their expert 24/365 proactive support team.
Step TwoOK so we have a bulleted list control on our web page but no items, how do we add some? Well we simply create a list item template inside the bulleted list template and add whatever we choose. This is done by writing <asp:ListItem></asp:ListItem> between the opening and closing bulleted list tags. Whatever is put in between the list item opening and closing tags will be used as a bulleted point. I will be using ice cream flavors for this example because ice cream is awesome. Apply the information in the code block below into your Default.aspx page:
Code Block
Default.aspx
Adding items to a BulletedList is done with a ListItem template.<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Label ID="Label1" runat="server" Text="Ice Cream Flavors"></asp:Label>
<asp:BulletedList ID="BulletedList1" runat="server">
<asp:ListItem>Vanilla</asp:ListItem>
<asp:ListItem>Chocolate</asp:ListItem>
<asp:ListItem>Butter Pecan</asp:ListItem>
<asp:ListItem>Strawberry</asp:ListItem>
<asp:ListItem>Neapolitan</asp:ListItem>
</asp:BulletedList>
</div>
</form>
</body>
</html>
We migrated our web sites to Server Intellect over one weekend and the setup was so smooth that we were up and running right away. They assisted us with everything we needed to do for all of our applications. With Server Intellect’s help, we were able to avoid any headaches!
Switch to design view and take a look at how the layout of the bulleted list looks like.Output
Run the page by clicking the green arrow at the top next to the debug drop down list or by clicking F5. If it asks you to ‘Modify the Web.config file to enable debugging’ click OK. The page exhibits what we just saw in the design view, only difference is this is the actual web page. See how a bulleted list can be used? Very simple and effective at the appropriate moments.
You now know how to use one more tool in visual studio. Keep practicing and happy programming.
BulletedList Control.zip
