asp.net mvc rendering html recursively

Question

Hello everyone,

i have recently run into a strange problem. i have a table in db named Task. A Task may have a parent task and more than one child tasks (self join). i have written a stored procedure that returns me all the tasks in the project their children and sub children upto n level using CTE (common table expression). my required result is as follows

the result is successfully achieved. you can see the indentation in first column to show hierarchical relation. the problem is that i m doing it in a "bad way". below is my view code

<table cellspacing="0">
    <%foreach (var it in Model.list.Where(x=>x.ParentID == null))
      {
          int x = 1;%>

        <tr>
            <td width="150"><div class="wrapper" style="width:18px;">&nbsp;</div><%:it.TOC %></td>
            <td><%:it.label %></td>
            <td><%:it.StartDate%></td>
            <td><%:it.EndDate%></td>
            <td><%:it.smallDescription %></td>
        </tr>
            <%=Model.CallRecursion(it,Model.list,ref x) %>


    <%} %>

u can see that Call recursion method has been defined on model that is returning the html string recursively. below is the code of CallRecursion method.

public string CallRecursion(TempModel item, List<TempModel> all,ref int count) 
        {
            if(all.Where(x=>x.ParentID == item.ID).Count() == 0)
                return "";
            else
            {
                count++;
                string retval = "<tr>";
                foreach (var kids in all.Where(x => x.ParentID == item.ID)) 
                {
                    retval += "<td><div style='width:"+count*18+"px;' class='wrapper'>&nbsp;</div><span>" + kids.TOC + "</span></td><td>" + kids.label + "</td><td>" + kids.StartDate + "</td><td>" + kids.EndDate+"</td><td>"+kids.smallDescription+"</td></tr>"+
                        CallRecursion(kids, all,ref count);
                }
                count--;
                return retval;
            }


        }

my question is how i can achieve this target in a cleaner way. i have no idea if i can call partial views recursively to render the html and if so what would be the dynamics. comments and suggestions are appreciated.

Answer 1

Why not modify your CTE to give you results as follows specifies which level in the tree each row is. In this way SQL is already doing the recursive calls, so why redo this in your application code.

In this way, your method can then be simplified to just multiplying the TreeLevel by the amount of pixels to give the correct indentation. No need for recursion. Simply loop through the resultant model.

In any case, I think you will have more value of having each items TreeLevel because you could possibly do other things like 'give me an overview of all root nodes' resulting in rows where Number equals 1, 2 and 3

TreeLevel Number  Other_data
0         1       ...
1         1.1     ...
1         1.2     ...
2         1.2.1   ...
2         1.2.1   ...
0         2       ...
1         2.1     ...
1         2.2     ...
2         2.1.2   ... 
3         2.1.2.1 ...
0         3       ...

With regards to the CTE, have a look at this article from 4guysfromrolla which shows how to include the hierarchy (TreeLevel) value as part of the CTE result set.

Other notes concerning your original code - use the the TagBuilder classes when constructing HTML from code. IMO, that will be much cleaner and better. No magic strings building..