Rendern einer ungeordneten Liste mit asp.net

Question

Ich muss eine ungeordnete Liste mit den Daten aus der Datenbank mit asp.net/C# erhalten. Meine Daten sieht in etwa so aus.

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 

die obigen Beispieldaten Ich muß mit einer ungeordneten Liste machen, basierend auf der Tiefe, in folgendem 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 Daten ist nur ein Beispiel, ich habe einen großen Re-Cord, der hat in eine ungeordnete Liste umgewandelt werden. Könnte mir bitte jemand eine Idee geben, wie man das erreicht?

UPDATE: Ich habe meinen Code aktualisiert, der eine ungeordnete Liste zu dem folgenden generiert.

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

Mit dem obigen Code sieht meine ungeordnete Liste so aus.

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

Danke.

Answer 1

Sie so etwas wie dies in Code tun könnte, und dann das Ergebnis Ausgabe in eine Literal-Steuerelement auf Ihrer Seite:

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: ich es so gemacht, dass es ausdrückte in wird eine CSS-Klasse für die Listenelemente, die sich auf die Tiefe beziehen, wie in den Kommentaren gefordert.

Answer 2

Verwenden Sie die Repeater-Steuerung.

Proben:

• Sample 1
• Sample 2

MSDN Documentation

Edit: den Teil über Tiefe nicht bemerkt haben, die Treeview Control verwenden stattdessen etwa an dem Teil aussehen verbindlich zu einer Datenbank.

Answer 3

Wenn Sie .NET 2.0 nicht verwenden, sollten Sie das ListView Control verwenden.

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