Presentar una lista desordenada usando asp.net

Question

Necesito hacer una lista desordenada con los datos obtenidos de la base de datos usando asp.net/C#. Mis datos se parecen a esto.

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 

utilizando los datos de muestra por encima de lo que necesito para hacer una lista sin orden basado en la profundidad, en el siguiente formato

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

Por encima de los datos es sólo una muestra, tengo un enorme conjunto de registros que tiene que convertirse en una lista desordenada. ¿Podría alguien darme una idea de cómo lograr esto?

ACTUALIZACIÓN: He actualizado mi código que genera la lista desordenada a lo siguiente.

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>"); 
     } 

Con el código anterior mi lista desordenada se parece a esto.

<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

Se podría hacer algo como esto en el código y luego enviar el resultado a un control literal en su página:

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(); 

Actualización: Lo hice para que se ponga en una clase css en la lista de elementos relacionados con la profundidad según lo solicitado en los comentarios.

Answer 2

Utilice el control de repetidor.

Muestras:

• Sample 1
• Sample 2

MSDN Documentation

Editar: No vi la parte de la profundidad, utilice el Treeview Control lugar, mirar a la parte de unión a una base de datos.

Answer 3

A menos que use .NET 2.0, debe usar el control ListView.

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