Rendering an unordered list using asp.net

Question

Hi everyone, I need to render a unordered list with the data obtained from database using asp.net/C#.My data looks something like this.

id     Name               Depth

1    ELECTRONICS             0

2    TELEVISIONS             1

3    Tube                   2

4    LCD                    2

5    Plasma                 2

6   Portable electronics    1

7   MP3 Player              2

8    Flash                  3

9    CD Players             2

10    2 Way Radio           2

using the above sample data I need to render an unordered list based on the depth, in the following format

<ul>
  <li>ELECTRONICS

<ul>

   <li>TELEVISIONS

  <ul>

    <li>TUBE</li>

    <li>LCD</li>

    <li>PLASMA</li>

  </ul>

   </li>

   <li>PORTABLE ELECTRONICS
  <ul>

    <li>MP3 PLAYERS

   <ul>

<li>FLASH</li>

   </ul>

    </li>

    <li>CD PLAYERS</li>

    <li>2 WAY RADIOS</li>

  </ul>

   </li>

</ul>

</li>

</ul>

Above data is just a sample,I have a huge recordset which has to be converted to unordered list.Could someone please give me an idea on how to achieve this?

UPDATE: I've updated my code which generates unordered list to the following .

int lastDepth = -1;
        int numUL = 0;

        StringBuilder output = new StringBuilder();


        foreach (DataRow row in ds.Tables[0].Rows)
        {

            int currentDepth = Convert.ToInt32(row["Depth"]);

            if (lastDepth < currentDepth)
            {
                if (currentDepth == 0)
                {
                    output.Append("<ul class=\"simpleTree\">");
                    output.AppendFormat("<li class=\"root\"><span><a href=\"#\" title=\"root\">root</a></span><ul><li class=\"open\" ><span><a href=\"#\" title={1}>{0}</a></span>", row["name"],row["id"]);
                }
                else
                {
                    output.Append("<ul>");
                    if(currentDepth==1)
                    output.AppendFormat("<li><span>{0}</span>", row["name"]);
                    else
                        output.AppendFormat("<li><span class=\"text\"><a href=\"#\" title={1}>{0}</a></span>", row["name"], row["id"]);
                }
                numUL++;
            }
            else if (lastDepth > currentDepth)
            {
                output.Append("</li></ul></li>");
                if(currentDepth==1)
                output.AppendFormat("<li><span>{0}</span>", row["name"]);
                else
                    output.AppendFormat("<li><span class=\"text\"><a href=\"#\" title={1}>{0}</a></span>", row["name"], row["id"]);
                numUL--;
            }
            else if (lastDepth > -1)
            {
                output.Append("</li>");
                output.AppendFormat("<li><span class=\"text\"><a href=\"#\" title={1}>{0}</a></span>", row["name"],row["id"]);
            }


            lastDepth = currentDepth;
        }

        for (int i = 1; i <= numUL+1; i++)
        {
            output.Append("</li></ul>");
        }

With the above code my unordered list looks like this.

<ul class="simpleTree">
<li class="root">
<span><a href="#" title="root">root</a></span>
<ul>
<li class="open" >
<span><a href="#" title=1>ELECTRONICS</a></span>
<ul>
<li>
<span>TELEVISIONS</span>
<ul>
<li>
<span class="text"><a href="#" title=3>TUBE</a></span>
</li>
<li>
<span class="text"><a href="#" title=4>LCD</a></span>
</li>
<li><span class="text"><a href="#" title=5>PLASMA</a></span>
</li>
</ul>
</li>
<li>
<span>PORTABLE ELECTRONICS</span>
<ul>
<li>
<span class="text"><a href="#" title=7>MP3 PLAYERS</a></span>
<ul>
<li>
<span class="text"><a href="#" title=8>FLASH</a></span>
</li>
</ul>
</li>
<li>
<span class="text"><a href="#" title=9>CD PLAYERS</a></span>
</li>
<li>
<span class="text"><a href="#" title=10>2 WAY RADIOS</a></span>
</li>
</ul>
</li></ul>
</li></ul>
</li></ul>

Thanks.

Answer 1

Use the Repeater Control.

Samples:

• Sample 1
• Sample 2

MSDN Documentation

Edit: Didn't notice the part about depth, use the Treeview Control instead, look at the part about binding to a database.

Answer 2

Unless you're using .NET 2.0 you should use the ListView Control.

Using ASP.NET 3.5's ListView and DataPager Controls: Displaying Data with the ListView

Answer 3

You could do something like this in code and then output the result to a Literal control on your page:

int lastDepth = -1;
int numUL = 0;

StringBuilder output = new StringBuilder();


foreach (DataRow row in yourDataTable.Rows) {

    int currentDepth = row["Depth"];

    if (lastDepth < currentDepth) {
        output.append("<ul>");
        numUL++
    }
    else if (lastDepth > currentDepth) {
        output.append("</li></ul></li>");
        numUL--
    }
    else if (lastDepth > -1) {
        output.append("</li>");
    }

    output.appendformat("<li class=\"depth-{1}\">{0}", row["name"], currentDepth);

    lastDepth = currentDepth;
}

for (int i = 1;i <= numUL;i++)
{
    output.append("</li></ul>");
}



yourLiteralControl.Text = output.toString();

Update: I made it so that it will put in a css class on the list items related to the depth as requested in the comments.

Answer 4

You could also have used asp:Repeater which is useful for stuff like this (tables, lists, etc.).

Or you could get with the future and stop wasting server resources to render HTML...

Instead, push the list data to the client as XML or JSON and then use jQuery or JS/XSLT to render the HTML from the data, thus leveraging client resources for the presentation, and taking some load off of the server (and the network, because once the server renders all that stuff it has to send the fully-rendered HTML in the response, plus any ViewState (if you're using it)).