如何使用ASP.NET显示层次数据?

时间:2022-10-30 08:27:13

How do I display hierarical data in ASP.NET? I have a data source that looks like this:

如何在ASP.NET中显示Hierarical数据?我有一个如下所示的数据源:

class Tree
{
   IEnumerable<Node> Nodes { get; set; }
}

class Node
{
   string Description { get; set; }
   decimal Amount { get; set; }
   IEnumerable<Node> SubNodes { get; set; }
}

I would like to render is as a list of divs, like the one below. I need the div tags to make the animations smooth when expanding and collapsing the branches.

我想渲染是一个div列表,如下所示。我需要div标签,以便在展开和折叠分支时使动画变得平滑。

<ul class="foldable">
   <li>
      <div class="line">
         <div class="description">...</div>
         <div class="amount">...</div>
      </div>
      <div class="line">
         <div class="description">...</div>
         <div class="amount">...</div>
      </div>
      <ul>
         <li>
            <div class="line">
              <div class="description">...</div>
              <div class="amount">...</div>
            </div>
         </li>
      </ul>
   </li>
</ul>
  • I tried building this using ListView elements, but I could not figure out how to call it recursively.
  • 我尝试使用ListView元素构建它,但我无法弄清楚如何递归调用它。

  • I also looked at the TreeView class, but dropped it because it is rendered using tables.
  • 我还查看了TreeView类,但删除了它,因为它是使用表格呈现的。

  • I gave up on the CSS Friendly Control Adaptors since this seems to be an either or switch for all the controls on the web site.
  • 我放弃了CSS友好控制适配器,因为这似乎是网站上所有控件的一个或开关。

  • I tried with a BulledList, but could not figure out how to make it render the divs.
  • 我尝试使用BulledList,但无法弄清楚如何使其渲染div。

I ended up using four identical nested ListView elements since I know that my lists are never deeper than four levels. But this solution is just so ugly that I'm hoping to find a better one here. =)

我最终使用了四个相同的嵌套ListView元素,因为我知道我的列表永远不会超过四个级别。但是这个解决方案太难看了,我希望能在这里找到更好的解决方案。 =)

1 个解决方案

#1


You could use a repeater control and then cycle through your list and for each node that has children nest another repeater. It would take some effort because your would need to use it programmatically, but having a prebuilt Repeater control as a server control would make it quite a bit easier.

您可以使用转发器控件,然后循环浏览列表,并为每个有子节点的节点嵌套另一个转发器。这需要一些努力,因为你需要以编程方式使用它,但是使用预先构建的Repeater控件作为服务器控件会使它变得更加容易。

I like using repeaters because they're VERY flexible when you take some time and work with them. That, and they don't put in extraneous HTML. :)

我喜欢使用中继器,因为当你花些时间和它们一起工作时,它们非常灵活。那,他们没有放入无关的HTML。 :)

#1


You could use a repeater control and then cycle through your list and for each node that has children nest another repeater. It would take some effort because your would need to use it programmatically, but having a prebuilt Repeater control as a server control would make it quite a bit easier.

您可以使用转发器控件,然后循环浏览列表,并为每个有子节点的节点嵌套另一个转发器。这需要一些努力,因为你需要以编程方式使用它,但是使用预先构建的Repeater控件作为服务器控件会使它变得更加容易。

I like using repeaters because they're VERY flexible when you take some time and work with them. That, and they don't put in extraneous HTML. :)

我喜欢使用中继器,因为当你花些时间和它们一起工作时,它们非常灵活。那,他们没有放入无关的HTML。 :)