ASP.NET

Creating Dynamic Menu in ASP.Net

We will learn here how to create a dynamic menu control with data without a database.

Initial Chamber

Step 1

Open your Visual Studio and create an empty website then provide a suitable name such as DynamicMenu.aspx.

Step 2

In Solution Explorer you will get your empty website, then add some web forms.

DynamicMenu (your empty website). Right-click and select Add New Item Web Form. Name it DynamicMenu.aspx.

Design Chamber

Step 3

Open the DynamicMenu.aspx file and write some code for the design of the application.

Step 3.1

Use the following stylesheet code in the head chamber of the page like:

  1. <style type="text/css">  
  2.     body   
  3.     {     
  4.         background-color:mediumaquamarine;  
  5.         font-family: Arial;  
  6.         font-size: 10pt;  
  7.         color: #444;  
  8.     }  
  9.   
  10.     .ParentMenu, .ParentMenu:hover {  
  11.         width: 100px;  
  12.         background-color: #fff;  
  13.         color: #333;  
  14.         text-align: center;  
  15.         height: 30px;  
  16.         line-height: 30px;  
  17.         margin-right: 5px;  
  18.     }  
  19.   
  20.         .ParentMenu:hover {  
  21.             background-color: #ccc;  
  22.         }  
  23.   
  24.     .ChildMenu, .ChildMenu:hover {  
  25.         width: 110px;  
  26.         background-color: #fff;  
  27.         color: #333;  
  28.         text-align: center;  
  29.         height: 30px;  
  30.         line-height: 30px;  
  31.         margin-top: 5px;  
  32.     }  
  33.   
  34.         .ChildMenu:hover {  
  35.             background-color: #ccc;  
  36.         }  
  37.   
  38.     .selected, .selected:hover {  
  39.         background-color: #A6A6A6 !important;  
  40.         color: #fff;  
  41.     }  
  42.   
  43.     .level2 {  
  44.         background-color: #fff;  
  45.     }  
  46. </style>  

Step 3.2

Choose menu control from the toolbox and use the following in your design page:

  1. <div>  
  2.     <asp:Menu ID="Menu1" runat="server" Orientation="Horizontal">  
  3.         <LevelMenuItemStyles>  
  4.             <asp:MenuItemStyle CssClass="ParentMenu" />  
  5.             <asp:MenuItemStyle CssClass="ChildMenu" />  
  6.             <asp:MenuItemStyle CssClass="ChildMenu" />  
  7.         </LevelMenuItemStyles>  
  8.         <StaticSelectedStyle CssClass="selected" />  
  9.     </asp:Menu>  
  10. </div>  
Now the page looks as in the following after designing your page.

DynamicMenu.aspx
  1. <%@ Page Language="C#" AutoEventWireup="true" CodeFile="DynamicMenu.aspx.cs" Inherits="DynamicMenu" %>  
  2.   
  3. <!DOCTYPE html>  
  4.   
  5. <html xmlns="http://www.w3.org/1999/xhtml">  
  6. <head runat="server">  
  7.     <title>Dynamic Menu Control Article for C# Corner by Upendra Pratap Shahi</title>  
  8.     <style type="text/css">  
  9.         body {  
  10.             background-color: mediumaquamarine;  
  11.             font-family: Arial;  
  12.             font-size: 10pt;  
  13.             color: #444;  
  14.         }  
  15.   
  16.         .ParentMenu, .ParentMenu:hover {  
  17.             width: 100px;  
  18.             background-color: #fff;  
  19.             color: #333;  
  20.             text-align: center;  
  21.             height: 30px;  
  22.             line-height: 30px;  
  23.             margin-right: 5px;  
  24.         }  
  25.   
  26.             .ParentMenu:hover {  
  27.                 background-color: #ccc;  
  28.             }  
  29.   
  30.         .ChildMenu, .ChildMenu:hover {  
  31.             width: 110px;  
  32.             background-color: #fff;  
  33.             color: #333;  
  34.             text-align: center;  
  35.             height: 30px;  
  36.             line-height: 30px;  
  37.             margin-top: 5px;  
  38.         }  
  39.   
  40.             .ChildMenu:hover {  
  41.                 background-color: #ccc;  
  42.             }  
  43.   
  44.         .selected, .selected:hover {  
  45.             background-color: #A6A6A6 !important;  
  46.             color: #fff;  
  47.         }  
  48.   
  49.         .level2 {  
  50.             background-color: #fff;  
  51.         }  
  52.     </style>  
  53. </head>  
  54. <body>  
  55.     <form id="form1" runat="server">  
  56.         <div>  
  57.             <asp:Menu ID="Menu1" runat="server" Orientation="Horizontal">  
  58.                 <LevelMenuItemStyles>  
  59.                     <asp:MenuItemStyle CssClass="ParentMenu" />  
  60.                     <asp:MenuItemStyle CssClass="ChildMenu" />  
  61.                     <asp:MenuItemStyle CssClass="ChildMenu" />  
  62.                 </LevelMenuItemStyles>  
  63.                 <StaticSelectedStyle CssClass="selected" />  
  64.             </asp:Menu>  
  65.         </div>  
  66.     </form>  
  67. </body>  
  68. </html>  
design
Figure 1: Design

Your design page looks as in above. But still your menu control is not yet designed. For this go further.

Code Chamber

Step 4

In the code chamber we will write some code so that our application works.

Adding the following namespaces in the namespace section of your code behind page.
  1. using System.IO;  
  2. using System.Data;  
  3. using System.Data.SqlClient;  
  4. using System.Configuration;  
Now your page looks as in the following.

DynamicMenu.aspx.cs
  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.Linq;  
  4. using System.Web;  
  5. using System.Web.UI;  
  6. using System.Web.UI.WebControls;  
  7. using System.IO;  
  8. using System.Data;  
  9. using System.Data.SqlClient;  
  10. using System.Configuration;  
  11.   
  12. public partial class DynamicMenu : System.Web.UI.Page  
  13. {  
  14.     protected void Page_Load(object sender, EventArgs e)  
  15.     {  
  16.         if (!IsPostBack)  
  17.         {  
  18.             DataTable dt = this.BindMenuData(0);  
  19.             DynamicMenuControlPopulation(dt, 0, null);  
  20.         }  
  21.     }  
  22.     /// <summary>  
  23.     /// This function retur a datatable according to parent menu id passed by user  
  24.     /// </summary>  
  25.     /// <param name="parentmenuId">parent menu ID</param>  
  26.     /// <returns>data table</returns>  
  27.     protected DataTable BindMenuData(int parentmenuId)  
  28.     {  
  29.         //declaration of variable used  
  30.         DataSet ds = new DataSet();  
  31.         DataTable dt;  
  32.         DataRow dr;  
  33.         DataColumn menu;  
  34.         DataColumn pMenu;  
  35.         DataColumn title;  
  36.         DataColumn description;  
  37.         DataColumn URL;  
  38.   
  39.         //create an object of datatable  
  40.         dt=new DataTable();  
  41.   
  42.         //creating column of datatable with datatype  
  43.         menu= new DataColumn("MenuId",Type.GetType("System.Int32"));  
  44.         pMenu=new DataColumn("ParentId", Type.GetType("System.Int32"));  
  45.         title=new DataColumn("Title",Type.GetType("System.String"));  
  46.         description=new DataColumn("Description",Type.GetType("System.String"));  
  47.         URL=new DataColumn("URL",Type.GetType("System.String"));  
  48.   
  49.         //bind data table columns in datatable  
  50.         dt.Columns.Add(menu);//1st column  
  51.         dt.Columns.Add(pMenu);//2nd column  
  52.         dt.Columns.Add(title);//3rd column  
  53.         dt.Columns.Add(description);//4th column  
  54.         dt.Columns.Add(URL);//5th column  
  55.          
  56.         //creating data row and assiging the value to columns of datatable  
  57.         //1st row of data table  
  58.         dr = dt.NewRow();  
  59.         dr["MenuId"] = 1;  
  60.         dr["ParentId"] = 0;  
  61.         dr["Title"] = "Home";  
  62.         dr["Description"] = "";  
  63.         dr["URL"] = "~/Home.aspx";  
  64.         dt.Rows.Add(dr);  
  65.   
  66.         //2nd row of data table  
  67.         dr = dt.NewRow();  
  68.         dr["MenuId"] = 2;  
  69.         dr["ParentId"] = 0;  
  70.         dr["Title"] = "Customer Service";  
  71.         dr["Description"] = "Customer Service";  
  72.         dr["URL"] = "~/Customer.aspx";  
  73.         dt.Rows.Add(dr);  
  74.   
  75.         //3rd row of data table  
  76.         dr = dt.NewRow();  
  77.         dr["MenuId"] = 3;  
  78.         dr["ParentId"] = 0;  
  79.         dr["Title"] = "About";  
  80.         dr["Description"] = "About us page";  
  81.         dr["URL"] = "~/AboutUs.aspx";  
  82.         dt.Rows.Add(dr);  
  83.   
  84.         //4th row of data table  
  85.         dr = dt.NewRow();  
  86.         dr["MenuId"] = 4;  
  87.         dr["ParentId"] = 0;  
  88.         dr["Title"] = "Contact Us";  
  89.         dr["Description"] = "Contact Us page";  
  90.         dr["URL"] = "~/Contact.aspx";  
  91.         dt.Rows.Add(dr);  
  92.   
  93.         //5th row of data table  
  94.         dr = dt.NewRow();  
  95.         dr["MenuId"] = 5;  
  96.         dr["ParentId"] = 0;  
  97.         dr["Title"] = "Testmonial";  
  98.         dr["Description"] = "Testimonial page";  
  99.         dr["URL"] = "~/Testimonial.aspx";  
  100.         dt.Rows.Add(dr);  
  101.   
  102.         //6th row of data table  
  103.         dr = dt.NewRow();  
  104.         dr["MenuId"] = 6;  
  105.         dr["ParentId"] = 2;  
  106.         dr["Title"] = "Consulting";  
  107.         dr["Description"] = "Consulting page";  
  108.         dr["URL"] = "~/Consult.aspx";  
  109.         dt.Rows.Add(dr);  
  110.   
  111.         //7th row of data table  
  112.         dr = dt.NewRow();  
  113.         dr["MenuId"] = 7;  
  114.         dr["ParentId"] = 2;  
  115.         dr["Title"] = "Outsourcing";  
  116.         dr["Description"] = "Outsourcing page";  
  117.         dr["URL"] = "~/Outsource.aspx";  
  118.         dt.Rows.Add(dr);  
  119.   
  120.         //8th row of data table  
  121.         dr = dt.NewRow();  
  122.         dr["MenuId"] = 8;  
  123.         dr["ParentId"] = 7;  
  124.         dr["Title"] = "Domestic";  
  125.         dr["Description"] = "Domestic outsourcing page";  
  126.         dr["URL"] = "~/Domestic.aspx";  
  127.         dt.Rows.Add(dr);  
  128.   
  129.         //9th row of data table  
  130.         dr = dt.NewRow();  
  131.         dr["MenuId"] = 9;  
  132.         dr["ParentId"] = 7;  
  133.         dr["Title"] = "International";  
  134.         dr["Description"] = "International outsourcing page";  
  135.         dr["URL"] = "~/International.aspx";  
  136.         dt.Rows.Add(dr);  
  137.   
  138.         ds.Tables.Add(dt);  
  139.         var dv = ds.Tables[0].DefaultView;  
  140.         dv.RowFilter = "ParentId='" + parentmenuId + "'";  
  141.         DataSet ds1 = new DataSet();  
  142.         var newdt = dv.ToTable();  
  143.         return newdt;  
  144.     }  
  145.   
  146.     /// <summary>  
  147.     /// This is a recursive function to fetchout the data to create a menu from data table  
  148.     /// </summary>  
  149.     /// <param name="dt">datatable</param>  
  150.     /// <param name="parentMenuId">parent menu Id of integer type</param>  
  151.     /// <param name="parentMenuItem"> Menu Item control</param>  
  152.     protected void DynamicMenuControlPopulation(DataTable dt, int parentMenuId, MenuItem parentMenuItem)  
  153.     {  
  154.         string currentPage = Path.GetFileName(Request.Url.AbsolutePath);  
  155.         foreach (DataRow row in dt.Rows)  
  156.         {  
  157.             MenuItem menuItem = new MenuItem  
  158.             {  
  159.                 Value = row["MenuId"].ToString(),  
  160.                 Text = row["Title"].ToString(),  
  161.                 NavigateUrl = row["URL"].ToString(),  
  162.                 Selected = row["URL"].ToString().EndsWith(currentPage, StringComparison.CurrentCultureIgnoreCase)  
  163.             };  
  164.             if (parentMenuId == 0)  
  165.             {  
  166.                 Menu1.Items.Add(menuItem);  
  167.                 DataTable dtChild = this.BindMenuData(int.Parse(menuItem.Value));  
  168.                 DynamicMenuControlPopulation(dtChild, int.Parse(menuItem.Value), menuItem);  
  169.             }  
  170.             else  
  171.             {  
  172.                   
  173.                     parentMenuItem.ChildItems.Add(menuItem);  
  174.                     DataTable dtChild = this.BindMenuData(int.Parse(menuItem.Value));  
  175.                     DynamicMenuControlPopulation(dtChild, int.Parse(menuItem.Value), menuItem);  
  176.                   
  177.             }  
  178.         }  
  179.     }  
  180. }  
Output

O level menu

Figure 2: 0-level menu

1 level menu

Figure 3: 1-level menu

2 level menu

Figure 4: 2-level menu

I hope you liked this. Have a good day. Thank you for reading.

Up Next
    Ebook Download
    View all
    Learn
    View all
    Get Started

    You need to be a premium member to use this feature. To access it, you'll have to upgrade your membership.

    Become a sharper developer and jumpstart your career.

    Basic

    $0

    $

    . 00

    monthly

    For Basic members:

    • Standard Profile
    • Access learning courses
    • Access free e-books
    • 1x point
    Premium

    $20

    $

    . 00

    monthly

    For Premium members:

    • Earn 2x reward points
    • Premium profile with Verified check
    • Premium Avatar with status update
    • Learning courses
    • Unlimited Certifications and badges on profile
    • Unlimited Book downloads
    • Access to Premium content
    • Online Training
    • Unlimited PDF conversions and downloads
    • Professional Resume Writing
    • Interview Preparations Guide
    • 25 messages per month
    • 1 "Kodzu" avatar, basic
    Elite

    $45

    $

    . 00

    monthly

    For Elite members:

    • Bundle E-books
    • Access to all Learn Series
    • Unlimited Apply Jobs