渲染使用asp.net一个无序列表 [英] Rendering an unordered list using asp.net
问题描述
我需要渲染使用asp.net/C#.My数据看起来像这样从数据库中获取的数据的无序列表。
I need to render a unordered list with the data obtained from database using asp.net/C#.My data looks something like this.
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
使用
在上面的示例数据,我需要呈现基于深度的无序列表,在下面的格式
using the above sample data I need to render an unordered list based on the depth, in the following 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>
以上数据只是一个样本,我有有要转换成无序list.Could人一个巨大的记录,请给我如何实现这一点的想法?
Above data is just a sample,I have a huge recordset which has to be converted to unordered list.Could someone please give me an idea on how to achieve this?
更新:
我已经更新了我的code产生无序列表下面的内容。
UPDATE: I've updated my code which generates unordered list to the following .
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>");
}
通过上面的code我的无序列表看起来像这样。
With the above code my unordered list looks like this.
<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>
感谢。
推荐答案
您可以做这样的事情在code,然后将结果输出到文字控制在页面上:
You could do something like this in code and then output the result to a Literal control on your page:
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();
更新:我说得那么它将放在一个CSS类就有关作为意见要求的深度列表项
Update: I made it so that it will put in a css class on the list items related to the depth as requested in the comments.
这篇关于渲染使用asp.net一个无序列表的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!