tags:

views:

39

answers:

6

I have a common problem in an ASP.NET web form. I'm just surprised that I haven't found a common solution :)

I have a list of results being returned from a SQL Server database. I want to show those results in my web page with number to the left of them. For instance, my result set may look like the following:

New York | NY
Chicago | IL
Los Angeles | CA

In my web page, I would like to show them as:

1. New York, NY
2. Chicago, IL
3. Los Angeles, CA

I was surprised that I can't find a way to make the numbers automatically appear. Am i doing something wrong? If not, what is the recommended approach?

Thanks

+1  A: 

Use a ordered list (<ol>) in HTML:

<ol>
<% foreach(var item in theList) { %>
    <li><%= item %></li>
<% } %>
</ol>
Dave
+2  A: 

HTML directly supports what you're trying to do, you don't need any fancy ASP.NET. The HTML tags <ol> and <li> create an ordered list.

If you want to use an ASP.NET control to wrap the ordered list, you can use the Repeater: http://msdn.microsoft.com/en-us/magazine/cc163780.aspx. An example of using it for this is here: http://www.jigar.net/howdoi/viewhtmlcontent194.aspx

Extracted from http://www.htmlcodetutorial.com/_OL.html:

<OL>
<LI>Take 495 north
<LI>Cross the 14th Street Bridge
<LI>Take the Maine Avenue exit
<LI>Turn left at the first light
</OL>
Scott Stafford
A: 

Use a ol, li:

<ol>
    <li>New York, NY</li>
    <li>Chicago, IL</li>
    <li>Los Angeles, CA</li>
</ol>
Darin Dimitrov
A: 

How are you looping through your result set?

I could be wrong but I would go about doing this with a for loop.

First declare the list on the front end

<ol runat="server" id="orderedList"></ol>

for(int i = 0; i < results.Length; i++)
{
    orderedList.InnerHtml += "<li>" + results[i].ToString() + "</li>";
}
jon3laze
A: 

Since you are using WebForms, consider using the BulletedList control. You can bind the BulletedList control to a data source control (like the SqlDataSource or LinqDataSource controls) or you can populate its value programmatically through the DataSource property.

To get the BulletedList to render numbers, set the BulletStyle property to Numbers.

Here's an example of using the BulletedList and a SqlDataSource control: http://aspalliance.com/247_ASPNET_v20_Introducing_BulletedList_Control.4

Scott Mitchell
A: 

This is a common task and needs to be well published. It is important to decouple your content from your presentation. This means that your data should be split up and separated so that it can be displayed by any control or tag so your data is not tightly coupled to your web interface.

To do this, you want to convert your data into separately accessible parts so that data binding can use them however it needs to without limitation. You can do powerful data conversions using projections in LINQ. The method depends on the type of the data that you already have. I'll show two ways.

If your current data is just a set of strings, like this:

        List<string> myData = new List<string>()
        {
            "New York | NY",
            "Chicago | IL",
            "Los Angeles | CA"
        };

... then you can just prefix each string with the number and display it as it is being displayed now.

myData = myData.Select((s, i) => i.ToString() + ". " + s).ToList();

Using strings, this method is easy but doesn't let you really control your presentation of the data, such as transforming "1." to "(1)" or "|" to ",".

If, instead, you have a collection of, say, City objects each with a CityName and CityAbbreviation properties...

    class City
    {
        public string CityName { get; set; }
        public string CityAbbreviation { get; set; }
    }

...you could still use a projection and would return an anonymous object with two properties. The first would be the line number, and the second would be your City class. This gives you the flexibility to data bind in any way you want with any control.

            // Create fake data.
            List<City> myData = new List<City>()
            {
                new City(){ CityName = "New York", CityAbbreviation="NY" },
                new City(){ CityName = "Chicago", CityAbbreviation="IL" },
                new City(){ CityName = "Los Angeles", CityAbbreviation="CA" }
            };

            // Project data...  We create a new container object
            // to hold each city in one property
            // and a NUMBER in a second property.
            var anonList = myData.Select((x, i) => new 
            {
                Number = (i + 1).ToString(),
                City = x
            }).ToList();

            // Databind (Winforms example)
            listBox1.Items.Clear();
            anonList.ForEach(
                c => 
                listBox1.Items.Add(
                    c.Number + ". " + c.City.CityName + " , " + c.City.CityAbbreviation
                )
            );

So to use this second method, you just need to have a data set that has already separated the elements of your data (City, CityName). If you are working with strings, you can use this code to convert them to the City class I used above.

            // Create fake data.
            List<string> myStringData = new List<string>()
            {
                "New York | NY",
                "Chicago | IL",
                "Los Angeles | CA"
            };

            // Convert strings to City objects            
            List<City> myData = myStringData.Select(
                s => {
                    List<string> parts = s.Split('|').Select(s2 => s2.Trim()).ToList();
                    return new City()
                        { CityName = parts[0], CityAbbreviation = parts[1] };
                }).ToList();
Phil Gilmore