BulletedList and Bullet Style property in ASP.NET using VB.NET

In this article you will learn that how to use BulletedList control and its Bullet Style property.
  • 4874
 

Introduction
 
A new server control BulletedList is used to dispaly organised data which make sense to reader. BulletedList control also help in displaying collection of items in BulletedList. The BulletedList server control is meant to display a BulletedList of items easily in an ordered and unordered fashion. To specify the individual list item in the List you put a ListItem control for each list entry between the opening and closing tags of the BulletedList control.
You can also determine the styles used for displaying the BulletedList. The BulletedList control can be constructed of any number of <asp:ListItem> controls or can be data bound to a data source of some kind and populated based upon the contents retrieved. Here we are taking an example in which we declare BulletedList control and one DropDownList control in an .aspx file. Then we create an event handler for the SelectedIndexChanged event which displays Bullet style in a BulletedList control.
 
Getting Started

  • Simply create a ASP.NET web application. 
  • Drag a BulletedList and DropDownList control on page the page will look like below.

    Bullet1.gif
     
  • You can also add the controls manually by the Below code.

    <%@ Page Title="Home Page" Language="vb" AutoEventWireup="false"
        CodeBehind="Default.aspx.vb" Inherits="bulletedlist._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 id="Head1" runat="server">
        <title>How to Use BulletedList and Bullet Style Property</title>
    </head>
    <
    body>
        <form id="form1" runat="server">
        <div style="width: 478px">
                <asp:BulletedList ID="BulletedList1" runat="server">
                <asp:ListItem>Lesson 1</asp:ListItem>
                <asp:ListItem>Lesson 2</asp:ListItem>
                <asp:ListItem>Lesson 3</asp:ListItem>
                <asp:ListItem>Lesson 4</asp:ListItem>
                <asp:ListItem>Lesson 5</asp:ListItem>
            </asp:BulletedList>
            <br />
            Bullet Style<asp:DropDownList ID="DropDownList1" runat="server" AutoPostBack="True">
                <asp:ListItem>Numbered</asp:ListItem>
                <asp:ListItem>Circle</asp:ListItem>
                <asp:ListItem>Square</asp:ListItem>
                <asp:ListItem>LowerRoman</asp:ListItem>
                <asp:ListItem>UpperAlpha</asp:ListItem>
                <asp:ListItem>UpperRoman</asp:ListItem>
            </asp:DropDownList>
            <br />
        </div>
        </form>
    </body>
    </
    html>
     
  • Then attach the below code in code behind file.

       Protected Sub DropDownList1_SelectedIndexChanged(ByVal sender As Object, ByVal e As System.EventArgs) Handles
           
    DropDownList1.SelectedIndexChanged
            If DropDownList1.Text = "Numbered" Then
                BulletedList1.BulletStyle = BulletStyle.Numbered
            ElseIf DropDownList1.Text = "Circle" Then
                BulletedList1.BulletStyle = BulletStyle.Circle
            ElseIf DropDownList1.Text = "Square" Then
                BulletedList1.BulletStyle = BulletStyle.Square
            ElseIf DropDownList1.Text = "LowerRoman" Then
                BulletedList1.BulletStyle = BulletStyle.LowerRoman
            ElseIf DropDownList1.Text = "UpperAlpha" Then
                BulletedList1.BulletStyle = BulletStyle.UpperAlpha
            ElseIf DropDownList1.Text = "UpperRoman" Then
                BulletedList1.BulletStyle = BulletStyle.UpperRoman
            End If
        End Sub

     
  • Now run your application.

Output:-

Bullet2.gif

Bullet3.gif

Bullet4.gif

Summary

In this article you learned that how can you use BulletedList and Bullet Style Property.

Categories

More Articles

© 2020 DotNetHeaven. All rights reserved.