Rendering eine ungeordnete Liste mit asp.net

Brauche ich zum Rendern eine ungeordnete Liste mit den Daten aus der Datenbank verwenden asp.net/C#.My Daten wie folgt aussieht.

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

mithilfe der oben genannten Beispiel-Daten brauche ich zum Rendern eine ungeordnete Liste basiert auf der Tiefe, im folgenden 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>

Oben genannten Daten ist nur ein Beispiel,ich habe eine riesige recordset, die umgewandelt werden ungeordnete Liste.Könnte jemand bitte geben Sie mir eine Idee, wie dies zu erreichen?

UPDATE:
Ich habe aktualisiert mein code erzeugt ungeordnete Liste folgt .

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 auf meine ungeordnete Liste sieht wie folgt 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>

Dank.

InformationsquelleAutor kranthi | 2010-02-26
  1. 4

    Könnten Sie etwas tun, wie dies im code und dann das Ergebnis auf ein Literal-Steuerelement auf der 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 in eine css-Klasse auf die Elemente der Liste bezogen auf die Tiefe, wie gewünscht, in die Kommentare.

    • Ich wirklich wollen, um DV dazu, aber es ist eine technisch korrekte Aussage, aber ich würde es absolut nie zu empfehlen, dies zu tun. Gibt es Kontrollen dafür gedacht ist, würde ich lieber binden einer ForEach-Schleife, die in der aspx-Seite vor dieser.
    • Hi Chris,warum würdest du nicht empfehlen die oben genannte Methode?
    • Würde gerne hören, warum Sie denken, das ist so schlecht im Vergleich zu einer Reihe von verschachtelten ListViews (was ich bin mir nicht sicher, würde sogar arbeiten, in diesem Fall ohne eine Menge zusätzlichen code, wenn man bedenkt die flexible Menge von Tiefe zu den Listen). Und ob Sie in dieser foreach-Schleife in der code-behind oder in der ASPX-Seite selbst, gibt es wirklich keinen Unterschied, es sei denn, Sie sind nicht die Pufferung der Ausgabe auf der Seite.
    • Da der code wie dieser ist grundsätzlich wartbaren. Wenn er braucht, verschachtelte Listen, die Sie machen können ListViews innerhalb einer ListView. Wo, wie das ListView-abgesehen davon, dass Sie einfacher zu erweitern bietet auch die Möglichkeit, das mitgelieferte event-support und natürlich wahr databinding ist ein großes plus.
    • Ich habe implementiert genau dieses Szenario vorher mit einem ListView gerendert wird ein ListView und dann habe ich binden die Eltern listview eine Liste von Listen, und es ist getan.
    • Ich habe nichts gegen ListViews. Aber in diesem speziellen Fall, einen Blick auf die Struktur seiner Daten (keine Eltern - /Kind-Beziehung eine andere als die Reihenfolge im Datensatz), ich zeichne eine leere, wie können Sie einfach binden Sie das genaue dataset, um ein verschachteltes 4-Ebene Tiefe Reihe von ListViews und bekommen, was Sie wollen. Das ist, warum ich schrieb dies im code. Wenn Sie könnte den code, den Sie verwenden in Ihrer Antwort, es würde helfen, zu sehen, was mir fehlt (weil das Beispiel, das Sie verlinken ist nicht das gleiche wie in dieser situation).
    • der code, den Sie zur Verfügung gestellt haben ich bin Implementierung unorderedlist.Wären Sie in der Lage zu schlagen irgendwelche Verbesserungen an der code-Generierung der 'li' - Elemente mit verschiedenen cssclasses zugewiesen.Überprüfen Sie bitte die folgenden link, stackoverflow.com/questions/2361561/... ,wo ich gepostet habe eine andere Frage, die generiert unorderedlist.
    • seit deinem Beispielcode nicht alle Klassen auf die li-tags, es ist schwer zu sagen, genau das, was Sie tun müssen. Wie werden die Klassen bestimmt (das bedeutet, Sie sind alle die gleiche Klasse, oder anders, basierend auf der Tiefe oder so)?
    • ja,Sie sind anders und zugewiesen, basierend auf der Tiefe
    • Siehe mein update, um zu sehen, ob das, was Sie suchen.
    • Danke @patmortech,ich muss ordnen Sie die Klassen, basierend auf der Tiefe, aber nicht genau so wie das update.Kann sein, Sie Gaben ein Beispiel.Bitte siehe das update meiner ursprünglichen Frage.Mit dem code in update meiner ursprünglichen Frage, ich bin in der Lage, das gewünschte Ergebnis(siehe aktualisierte unorderedlist).Aber das update habe ich gemacht, sieht ziemlich schlecht aus.Kann u empfehlen, keine Verbesserungen auf, bitte?

    InformationsquelleAutor patmortech
  2. 3

    Verwenden Sie das Repeater-Steuerelement.

    Proben:

    MSDN-Dokumentation

    Edit: nicht bemerkt, das Teil über Tiefe, verwenden Sie die Treeview-Steuerelement betrachten Sie stattdessen, das Teil über die Bindung an eine Datenbank.

    • Das repeater-Steuerelement ist fast veraltet, die durch das ListView-Steuerelement.
    • Hallo Barrett,Sobald ich die ungeordnete Liste in der form ein treeview,ich brauche etwas js zu bieten drag-and-drop-Funktionalität, um es.Ist das möglich, wenn ich mit dem treeview-Steuerelement anstelle?Auch ich habe rund 500 Datensätze in der db.Wenn ich Sie als eine Strukturansicht ist, dass keine Last auf dem server, und erstellen Sie über Verzögerungen postbacks?
    • Für die drag-und-drop und reichhaltigen Funktionen, die Sie könnten versuchen, eine 3rd-party Komponente, wie Telerik telerik.com/products/aspnet-ajax/treeview.aspx
    InformationsquelleAutor BarrettJ
  3. 2

    Es sei denn, Sie verwenden .NET 2.0 verwenden Sie das ListView-Steuerelement.

    Mit ASP.NET 3.5 die ListView und DataPager-Controls: Anzeigen von Daten mit dem ListView

    InformationsquelleAutor Chris Marisic
Schreibe einen Kommentar