使用asp.net呈现无序列表

Question

使用asp.net呈现无序列表

9

我需要使用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["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>");
        }

使用上述代码后，我的无序列表看起来像这样。

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

感谢您的请求。

- kranthi

4个回答

3

请使用 Repeater 控件。

示例：

请参考 MSDN 文档。

编辑：没有注意到深度的部分，请改用 Treeview 控件，参考绑定数据库的部分。请看：Treeview 控件。

- BarrettJ

重复控件几乎被ListView控件取代。 - Chris Marisic

嗨，巴雷特，一旦我将无序列表以树形视图的形式呈现出来，我需要应用一些js来为其提供拖放功能。如果我使用树形视图控件，这是否可行？此外，我在数据库中有大约500条记录。如果我将它们呈现为树形视图，这不会对服务器造成负载并在postbacks期间创建延迟吗？ - kranthi

@kranthi：对于拖放和丰富的功能，您可以尝试使用第三方组件，如Telerik http://www.telerik.com/products/aspnet-ajax/treeview.aspx。 - John K

2

除非您正在使用 .NET 2.0，否则应该使用 ListView 控件。

使用 ASP.NET 3.5 的 ListView 和 DataPager 控件：使用 ListView 显示数据

- Chris Marisic

0

     void PopulateChild(int ParentId, StringBuilder output)
                {
                    var childs = GetChildren(ParentId); //get all the chilren with respect to that parent
                    if (childs.Count > 0)
                    {
//if children are there append another list to the parent node
                        output.Append("<ul>");
                        childs.ForEach(x =>
                        {
                            if (GetChildren(x.Id).Count > 0)
                            {
                                output.AppendFormat("<li><a href=\"#\">{0}</a>", x.Email);
                                output.Append("<ul>");
                                PopulateChild(x.Id, output);
                                output.Append("</li>");
                                output.Append("</ul>");

                            }
                            else
                                output.AppendFormat("<li><a href=\"#\">{0}</a></li>", x.Email);

                        });
                    }

                    output.Append("</ul>");
                }

    //call this method with the parentid 
    private void PopulateList(int CustomerId)
                {
                    StringBuilder output = new StringBuilder();
                    var row = GetCustomerDetailById(CustomerId);
                    output.Append("<ul>");
                    output.AppendFormat("<li><a href=\"#\">{0}</a>", row.Email);

                    PopulateChild(CustomerId, output);

                    output.Append("</li></ul>");

                    Literal1.Text = output.ToString();
                }

- Lokesh Kuldeer

你好，欢迎来到SO。你写了很多代码，但是没有注释，所以不太容易理解。如果你在答案中加上几句话，解释一下你的代码是如何工作的，以及它是如何解决OP的问题的，那对其他用户会非常有帮助。 - Simas Joneliunas

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- patmortech · Accepted Answer

您可以在代码中执行以下操作，然后将结果输出到页面上的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}", row["name"], currentDepth);

    lastDepth = currentDepth;
}

for (int i = 1;i <= numUL;i++)
{
    output.append("</li></ul>");
}



yourLiteralControl.Text = output.toString();

更新：根据评论中的要求，我已经使其在与深度相关的列表项上放置了一个CSS类。