ASP.NET v2.0: BulletedList control

Overview

Displaying items in a bullet format is a good and clean presentation of data. The order list like <ul> and <li> tags are frequently use especially when we want to display a list of items in list / point format.

For example:

• To-Do list of your project
  • E.g. (Source: ASP.NET Enterprise Manager)
    
    
• Navigation menu
  • E.g. (Source: ASP.NET Portal Starter Kit)
    
• Phone book
• Any kind of data presentation, no matter it’s ordered or not

ASP.NET 1.* Workaround

In order to complete this kind of task (especially involved the retrieval and binding of data from data source), a couple of approaches that ASP.NET developers normally use nowadays:

1. Simple Looping:
   Retrieve data from a data source and loop through each object in this data source by using something like a foreach operator, while developer can write out the data on screen / assign to a Label.Text in each iteration.
   
   
2. Dynamic Control:
   Like approach 1, but create the HyperLink / Literal Control (with NavigateUrl) and inject into a PlaceHolder control, or build up a Table control dynamically.
   
   
3. Repeater Control:
   Since Repeater is a basic templated data-bound list without any layout or styles, so developers can put a pair of <ul> and </ul> as the HeaderTemplate and FooterTemplate respectively and put a pair of <li> and </li> surrounding the returned value.
   
   E.g. (Source: ScottW's .Text)
   

   <asp:repeater id="Bloggers" runat="server">

         <HeaderTemplate>

               <ul>

         </HeaderTemplate>

         <ItemTemplate>

               <li>

                     <b><%# Content Here %></b>

               </li>

         </ItemTemplate>

         <FooterTemplate>

               </ul>

         </FooterTemplate>

   </asp:repeater>
   
   
4. Custom Control (WebControl):
   Create a custom control and use a StringBuilder object with starting tag of <ul>, loop through the DataSource and append the data to that StringBuilder object, and finally append a closing tag of “</ul>”
   
   E.g. (Source: ASP.NET Developer's Cookbook)
   
   
         if (dataSource != null) {

               _html.Append("<ul>");

               foreach (object dataObject in dataSource) {

                     _html.Append("<li>");

                     _html.Append(dataObject.ToString());

                     _html.Append("</li>");

               }

               _html.Append("</ul>");

         }
   
   

5. Custom Control (Repeater Control):
   Create a custom control inherited from Repeater control rather than inherited from Control/WebControl class as approach 4, and then modify the retrieved data as surrounded by a pair of <li> and </li> in the ItemDataBound event.
   
   E.g. (Source: Juliet's blog)
   
   

   public void InstantiateIn(Control container) {

        LiteralControl l;

        switch(templateType) {

            case ListItemType.Header:

                l = new LiteralControl();

                l.Text = "<ul";

                if(CssClass != null && CssClass.Length > 0)

                    l.Text += " class=\"" + CssClass + "\"";

                l.Text += ">";

                container.Controls.Add(l);

                break;

            case ListItemType.Item:

            case ListItemType.AlternatingItem:

                l = new LiteralControl();

                l.DataBinding += new EventHandler(Item_DataBinding);

                container.Controls.Add(l);

                break;

            case ListItemType.Footer:

                l = new LiteralControl();

                l.Text = "</ul>";

                container.Controls.Add(l);

                break;

        }

   }

    

   public void Item_DataBinding(object sender, EventArgs e) {

       LiteralControl l = (LiteralControl) sender;

       RepeaterItem container = (RepeaterItem) l.NamingContainer;

       l.Text = "<li>" + (string)(container.DataItem) + "</li>";

   }

Introducing BulletedList control

This brand new BulletedList control is inherited from the class of “System.Web.UI.WebControls.ListControl”, where a list of items will be generated in a bulleted format. It's just like its brother control:

• CheckBoxList
• DropDownList
• RadioButtonList
• ListBox

 

Placing ListItem object in the BulletedList control manually or binded from a data source, developers can customize the "Bullet" of this control with BulletStyle property and the following are the most commonly use:

Circle	Disc	LowerAlpha
LowerRoman	Numbered	Square
UpperAlpha	UpperRoman	CustomImage

DataBinding to BulletedList Control

 

DataBinding to a BulletedList Control is extremely simple in ASP.NET v2.0, you can drag such control and drop it onto the desiger pane, and then a "Wizard" will guide you throughout the process.

 

After clicking on the "Connect To DataSource..." button, you can select an existing DataSource or create a a new data source control as:

• SqlDataSource,
• AccessDataSource,
• DataSetDataSource,
• ObjectDataSource,
• SiteMapDataSource
• XmlDataSource

You are now able to create a XXXDataSource control easily

(You can of course customize the edit command and parameter, with the help of Query Editor when creating the XXXDataSource control.

 

If you want to know more about the SqlDataSource Control, you can take a look at my previous article:
Data Access Control - SqlDataSourceControl on ASPAlliance)

Imagine that there's a table named "Category", which have two Columns of "CategoryID" and "Category" in a SQL Server, and finally the code generated by Visual Studio "Whidbey" will look like:

 

<asp:bulletedlist bulletstyle="Disc" displaymode="Text" id="Bulletedlist1" runat="server" datatextfield="Category" datasourceid="SqlDataSource1" datavaluefield="CategoryID" />

 

<asp:sqldatasource id="SqlDataSource1" runat="server" selectcommand="SELECT Category.* FROM Category"     providername="System.Data.OleDb" connectionstring="UpdateConnectionStringHereToUseSecureStorage"

/>

No databinding, No data access code, No dynamic control, No Repeater control, No custom control.... what I write (actually I drag & drop with a couple of click) is just the 2 declaration above and then the result become:

 

 

 

 

* The ProviderName of the SqlDataSourceControl above show "System.Data.OleDb" because I'm using the Alpha bit when writing this article, and SQL provider will be implemented by Beta

Different Usage of BulletedList Control

In addition to display item / text value in a bullet format width different styles, you can also create a list of HyperLink and LinkButton from it by changing its DisplayMode properties:

• Text
• HyperLink
• LinkButton

The name of the DisplayMode property explain its nature and use obviously, and the following two examples can show its features:

• HyperLink

  HTML:
  
  <form runat="server">
     
         <asp:bulletedlist id="BulletedList1" runat="server"
          displaymode="HyperLink"
          datasourceid="Datasetdatasource1"
          datatextfield="Name"
          datavaluefield="Url" />
      <br />
     
      <asp:datasetdatasource id="Datasetdatasource1" runat="server"
          datafile="NavigationMenu.xml" />
             
  </form>
  
  NavigationMenu.xml
  
  <?xml version="1.0" encoding="utf-8" ?>
  <QuickLinks>
      <QuickLink>
          <Name>Whidbey @ ASP.NET</Name>
          <Url>http://www.asp.net/Whidbey</Url>
      </QuickLink>
      <QuickLink>
          <Name>ASP.NET Dev Center</Name>
          <Url>http://msdn.microsoft.com/asp.net/</Url>
      </QuickLink>
      <QuickLink>
          <Name>.NET WebLogs @ ASP.NET</Name>
          <Url>http://weblogs.asp.net</Url>
      </QuickLink>
      <QuickLink>
          <Name>ASP.NET Web Matrix</Name>
          <Url>http://asp.net/WebMatrix</Url>
      </QuickLink>
  </QuickLinks>
  
  
  
  Screen Shot:
  

• LinkButton
  
  
  HTML:

<form runat="server">

    <h2>Download Presentation/Demo</h2>

   

<asp:bulletedlist id="demoBulletedList" runat="server"

displaymode="LinkButton"

bulletstyle="Numbered"

tooltip="Download Demo"

onclick="Bulletedlist1_Click">

 

<asp:ListItem>ASP.NET Tips & Tricks</asp:ListItem>
<asp:ListItem>Operating & Deploying ASP.NET Applications </asp:ListItem><asp:ListItem>ASP.NET Http Runtime </asp:ListItem>

<asp:ListItem>Building Custom ASP.NET Server Controls </asp:ListItem>

 

    </asp:bulletedlist>

   

    <br />

   

    <asp:label id="messageLabel" runat="Server" />

</form>


Server Code:

 

void Bulletedlist1_Click(object sender, System.Web.UI.WebControls.BulletedListEventArgs e) {

    // WriteFile here

    messageLabel.Text = "You've downloaded the Presenation # " + (e.Index + 1).ToString() ;                             

}



Screen Shot:

 

Conclusion

One of the features of ASP.NET v2.0 is developer productivity, while the creation of BulletedList control is obviously save a lots of codes to be written and a common feedback of existing ASP.NET 1.* developers.

With the use of datasourceid property of the BulletedList control, developer can retrieve data from anyDataSourceControl and display them in a bullet format easily in ASP.NET v2.0

The addition of (SmartTag) wizard for server control provide a user friendly configuration tool for developers. This BulletedList control can save the development time and avoid the overkill of repeater control as in ASP.NET 1.*

 

Version Note

This article was based on an early Alpha release of ASP.NET v2.0 and VS.NET Whidbey. It is possible that some implementation or v1.* compatibility details will change.