Inline Recursion in ASP.NET Template to Print a Tree's Node List

Here’s a neat & clean way to perform a recursion in ASP.NET, inside the .aspx/.ascx file. Suitable for ASP.NET MVC as well as WebForms.

No <asp:Repeater> + OnItemDataBound event, TreeView or concatenating strings recursively in the code behind involved.

Data Structure and Recursive Data Sample

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

public class NodeList : List<Node> {
}

public class Node {
  public string Name { get; set; }
  public NodeList Children { get; set; }
}

public class Repository {
  public static NodeList GetNodes() {
      return new NodeList {
          new Node { Name = "1",
              Children = new NodeList {
                  new Node { Name = "1.1" },
                  new Node { Name = "1.2",
                      Children = new NodeList {
                          new Node { Name = "1.2.1" }
                      }
                  },
                  new Node { Name = "1.3" },
                  new Node { Name = "1.4" },
              }
          },
          new Node { Name = "2",
              Children = new NodeList {
                  new Node { Name = "2.1" }
              }
          },
          new Node { Name = "3" }
      };
  }
}

The Recursive Function

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

<%
Action<NodeList, int> printNodesRecursively = null;
printNodesRecursively = (NodeList nodeList, int depth) => {
  if (nodeList==null || nodeList.Count==0) return;
%>
  <ul class="node-list depth-<%=depth%>">
<%
  foreach (Node node in nodeList) {
  %>
  <li>
      <%=node.Name%>
      <%printNodesRecursively(node.Children, depth + 1);%>
  </li>
  <%
  }
%>
    </ul>
<%
};
NodeList nodes = Repository.GetNodes(); // Or ViewData use for ASP.NET MVC
printNodesRecursively(nodes, 0);
%>

Notice: The printNodesRecursively function is declared with the value of null at first. Otherwise, the compiler says that the inner printNodesRecursively call is made on an unassigned variable.

This will basically print a

    with an
  • for each node, and inside each
  • , another
      with its children, recursively.

      Notice the extra ”depth” which indicates the current depth level in the tree inside the printNodesRecursively function. In this example it adds a special class to each level.

      The Output

      1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

      <ul class="node-list depth-0">
  <li>1
      <ul class="node-list depth-1">
          <li>1.1</li>
          <li>1.2
              <ul class="node-list depth-2">
                  <li>1.2.1</li>
              </ul>
          </li>
          <li>1.3</li>
          <li>1.4</li>
      </ul>
  </li>
  <li>2
      <ul class="node-list depth-1">
          <li>2.1</li>
      </ul>
  </li>
  <li>3</li>
</ul>

      (Code re-indented manually :) )