ASP.NET v2.0: Introducing BulletedList Control
 
Published: 30 Oct 2003
Unedited - Community Contributed
Abstract
ASP.NET v2.0: Introducing BulletedList Control
by Colt Kwong
Feedback
Average Rating: 
Views (Total / Last 10 Days): 34691/ 68

ASP.NET v2.0: Introducing BulletedList Control

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:

ASP.NET 1.* Workaround

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

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 l
ike 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 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

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.



User Comments

Title: Direct Post   
Name: Icer
Date: 2007-03-20 5:17:40 AM
Comment:
It is pretty easy to redirect to another page: (The display style has to be "Hyperlink")

ListItem item = new ListItem(Title, Url);
BulletedList.Items.Add(item);

That´s it.
Title: Controlling URL in Hyperlink mode   
Name: Patrick Farrell
Date: 2007-02-26 12:36:37 PM
Comment:
In response to Russ's comments. Although it's not necessarily intuitive, when you are using the BulletedList and you have the display mode set to URL, ListItem.Value renders the link url, ListItem.Text renders the display.

http://patf.net/blogs
Title: Images do not exist   
Name: Ozma
Date: 2006-03-22 2:18:56 PM
Comment:
The images in this article are no longer at the URLs used in the markup
Title: Still Can't Post Directly to Another Page   
Name: Russ Brooks
Date: 2006-03-19 3:08:08 PM
Comment:
The control is essentially useless because we still can not post driectly to another page. Like most .NET controls, why isn't there an "Url" attribute and a way to append a query string? True we can use the onclick, capture the event in the code-behind, then redirect with an appended query string, but why cause two requests on the server and skew logging and traffic metrics? Even 5 years after the advent of .NET, Microsoft still thinks a website can be built with a single page.

Product Spotlight
Product Spotlight 





Community Advice: ASP | SQL | XML | Regular Expressions | Windows


©Copyright 1998-2022 ASPAlliance.com  |  Page Processed at 2022-10-06 4:14:51 AM  AspAlliance Recent Articles RSS Feed
About ASPAlliance | Newsgroups | Advertise | Authors | Email Lists | Feedback | Link To Us | Privacy | Search