Hiển thị danh sách không theo thứ tự bằng cách sử dụng asp.net

Question

Tôi cần hiển thị danh sách không theo thứ tự với dữ liệu thu được từ cơ sở dữ liệu bằng cách sử dụng dữ liệu asp.net/C#.My trông giống như thế này.

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 

bằng cách sử dụng dữ liệu mẫu trên, chúng tôi cần phải làm cho một danh sách có thứ tự dựa trên chiều sâu, theo định dạng sau

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

Trên dữ liệu chỉ là một mẫu, tôi có một recordset khổng lồ trong đó có tới được chuyển đổi thành danh sách không có thứ tự. Có thể ai đó vui lòng cho tôi ý tưởng về cách đạt được điều này?

CẬP NHẬT: Tôi đã cập nhật mã của mình tạo danh sách không theo thứ tự sau đây.

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

Với mã trên, danh sách không có thứ tự của tôi trông như thế này.

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

Cảm ơn.

Answer 1

Bạn có thể làm một cái gì đó như thế này trong mã và sau đó đầu ra kết quả vào một Literal control trên trang của bạn:

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

Cập nhật: tôi đã làm cho nó để nó sẽ đưa vào một lớp css trên các mục danh sách liên quan đến độ sâu như được yêu cầu trong các chú thích.

Answer 2

Sử dụng điều khiển lặp lại.

Samples:

• Sample 1
• Sample 2

MSDN Documentation

Edit: Không chú ý đến phần về chiều sâu, sử dụng Treeview Control thay vào đó, nhìn vào phần về ràng buộc vào cơ sở dữ liệu.

Answer 3

Trừ khi bạn đang sử dụng .NET 2.0, bạn nên sử dụng điều khiển ListView.

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