2010-02-26 2 views
7

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

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.

Antwort

3

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.

+0

Ich möchte wirklich DV dies aber es ist eine technisch korrekte Aussage, aber ich würde das absolut nicht empfehlen. Es gibt Steuerelemente dafür, ich würde lieber eine ForEach-Schleife vorher in der aspx-Seite binden. –

+0

Hallo Chris, warum würdest du die obige Methode nicht empfehlen? – kranthi

+0

Ich würde gerne hören, warum Sie das im Vergleich zu einer ganzen Reihe verschachtelter ListViews für so schlecht halten (was ich nicht sicher bin, würde in diesem Fall sogar ohne viel zusätzlichen Code arbeiten, wenn man die flexible Tiefe seiner Listen berücksichtigt). Und ob Sie diese foreach-Schleife in den Code hinter oder in der ASPX-Seite selbst einfügen, es gibt wirklich keinen Unterschied, es sei denn, Sie puffern nicht die Ausgabe Ihrer Seite. – patmortech

3

Verwenden Sie die Repeater-Steuerung.

Proben:

MSDN Documentation

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

+0

Das Repeater-Steuerelement wird vom ListView-Steuerelement fast nicht mehr unterstützt. –

+0

Hallo Barrett, sobald ich die ungeordnete Liste in Form einer Baumansicht präsentiere, muss ich einige js anwenden, um Drag-and-Drop-Funktionalität zu bieten.Ist das möglich, wenn ich stattdessen das Treeview-Steuerelement verwende? Auch ich habe rund 500 Datensätze in der db.Wenn ich sie als eine Baumansicht präsentiere, wird das keine Last auf dem Server sein und Verzögerungen über Postbacks verursachen? – kranthi

+0

@kranthi: Für drag-and-drop und reiche Funktionen können Sie versuchen, eine Drittanbieter-Komponente wie Telerik http://www.telerik.com/products/aspnet-ajax/treeview.aspx –