使用asp.net渲染无序列表

我需要使用asp.net/ C#渲染一个无序列表,其中包含从数据库获得的数据.我的数据看起来像这样.

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

使用上面的示例数据,我需要根据深度呈现无序列表,格式如下

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

上面的数据只是一个示例,我有一个巨大的记录集,必须转换为无序列表.有人可以给我一个如何实现这一点的想法吗？

更新：
我更新了我的代码,生成无序列表到下面.

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["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["id"]);
                numUL--;
            }
            else if (lastDepth > -1)
            {
                output.Append("</li>");
                output.AppendFormat("<li><span class=\"text\"><a href=\"#\" title={1}>{0}</a></span>",row["id"]);
            }
 
 
            lastDepth = currentDepth;
        }
 
        for (int i = 1; i <= numUL+1; i++)
        {
            output.Append("</li></ul>");
        }

使用上面的代码,我的无序列表看起来像这样.

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

谢谢.

解决方法

您可以在代码中执行类似的操作,然后将结果输出到页面上的Literal控件：

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}",currentDepth);
 
    lastDepth = currentDepth;
}
 
for (int i = 1;i <= numUL;i++)
{
    output.append("</li></ul>");
}
 
 
 
yourLiteralControl.Text = output.toString();

更新：我这样做是为了在注释中请求的深度相关的列表项中放入一个css类.

使用asp.net渲染无序列表

解决方法

猜你在找的asp.Net相关文章