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. }
  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. }
  20. .ParentMenu:hover {
  21. background-color: #ccc;
  22. }
  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. }
  34. .ChildMenu:hover {
  35. background-color: #ccc;
  36. }
  38. .selected, .selected:hover {
  39. background-color: #A6A6A6 !important;
  40. color: #fff;
  41. }
  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" %>
  3. <!DOCTYPE html>
  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. }
  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. }
  26. .ParentMenu:hover {
  27. background-color: #ccc;
  28. }
  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. }
  40. .ChildMenu:hover {
  41. background-color: #ccc;
  42. }
  44. .selected, .selected:hover {
  45. background-color: #A6A6A6 !important;
  46. color: #fff;
  47. }
  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;
  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;
  39. //create an object of datatable
  40. dt=new DataTable();
  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"));
  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
  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);
  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);
  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);
  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);
  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);
  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);
  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);
  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);
  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);
  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. }
  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. {
  173. parentMenuItem.ChildItems.Add(menuItem);
  174. DataTable dtChild = this.BindMenuData(int.Parse(menuItem.Value));
  175. DynamicMenuControlPopulation(dtChild, int.Parse(menuItem.Value), menuItem);
  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.