How to make tree menu using Asp.Net c#

Created: 13/06/2013

How to make tree menu using Asp.Net c#

This is just a simple tutorial of how to make tree menu by using recursion in Asp.Net
It is not the most optimized way, modify it to adapt to your needs.
This is fast overview.

Used:
Visual Studio 2010
Framework 3.5

1) Just create a simple WebSite in Visual Studio

Then add label to Aspx file like this:

--------------------------------------------------------------------------------------------------


<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="RecursiveMenu._Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:Label ID="lblMenu" runat="server" Text=""></asp:Label>
    </div>
    </form>
</body>
</html>

--------------------------------------------------------------------------------------------------

2) Now go to the code behind file, Default.aspx.cs, and you will see somthing like this:

using System;

using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;

namespace RecursiveMenu
{
    public partial class _Default : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            
        }
    }
}

3) Now we will create just database table simulation by making our own DataTable that contains the menu items.

        private DataTable GetDataBaseMenuTable()
        {
            /* Simulating DataBase table
             ---------------------------
             * 0 = root

             ID | Parent | Title
             1 |   0    | Item 1
             2 |   0    | Item 2
             3 |   1    | Item 1 - B
             4 |   2    | Item 2 - B
             5 |   2    | Item 2 - C
             6 |   5    | Item 2 - C - B

             */

            DataTable dt = new DataTable();
            dt.Columns.Add("ID");
            dt.Columns.Add("Parent");
            dt.Columns.Add("Title");

            dt.Rows.Add("1", "0", "Item 1");
            dt.Rows.Add("2", "0", "Item 2");
            dt.Rows.Add("3", "1", "Item 1 - B");
            dt.Rows.Add("4", "2", "Item 2 - B");
            dt.Rows.Add("5", "2", "Item 2 - C");
            dt.Rows.Add("6", "5", "Item 2 - C - B");

            return dt;
        }

4) Now add the main method that will recursively print the items:

        private void PrintChildItems(string parentId, DataTable DbMenuTable)
        {
            if (this.GetRowsByParent(parentId, DbMenuTable).Count > 0) // If this item have childs then i print them
            {
                lblMenu.Text += "<ul>";
                foreach (DataRow row in this.GetRowsByParent(parentId, DbMenuTable))
                {
                    lblMenu.Text += "<li>" + row[2].ToString() + "</li>"; // Print child title
                    this.PrintChildItems(row[0].ToString(), DbMenuTable); // Search for childs that belong to this item
                }
                lblMenu.Text += "</ul>";
            }
        }

5) Add another mathod that will retrieve items from the menu datatable

        private List<DataRow> GetRowsByParent(string parentId, DataTable DbMenuTable)
        {
            List<DataRow> childs = new List<DataRow>();
            foreach (DataRow row in DbMenuTable.Rows)
            {
                if (row[1].ToString() == parentId)
                    childs.Add(row);
            }

            return childs;
        }

6) And finally use the PrintChildItems method in PageLoad to print the menu:

        protected void Page_Load(object sender, EventArgs e)
        {
            this.PrintChildItems("0", this.GetDataBaseMenuTable()); // Print all items, 0 = root
        }

Result:

You can download all the source of this project here: Download Source
There are many different ways to achieve this behavior, so its just one of them.