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:
- <style type="text/css">
- body
- {
- background-color:mediumaquamarine;
- font-family: Arial;
- font-size: 10pt;
- color: #444;
- }
-
- .ParentMenu, .ParentMenu:hover {
- width: 100px;
- background-color: #fff;
- color: #333;
- text-align: center;
- height: 30px;
- line-height: 30px;
- margin-right: 5px;
- }
-
- .ParentMenu:hover {
- background-color: #ccc;
- }
-
- .ChildMenu, .ChildMenu:hover {
- width: 110px;
- background-color: #fff;
- color: #333;
- text-align: center;
- height: 30px;
- line-height: 30px;
- margin-top: 5px;
- }
-
- .ChildMenu:hover {
- background-color: #ccc;
- }
-
- .selected, .selected:hover {
- background-color: #A6A6A6 !important;
- color: #fff;
- }
-
- .level2 {
- background-color: #fff;
- }
- </style>
Step 3.2
Choose menu control from the toolbox and use the following in your design page:
- <div>
- <asp:Menu ID="Menu1" runat="server" Orientation="Horizontal">
- <LevelMenuItemStyles>
- <asp:MenuItemStyle CssClass="ParentMenu" />
- <asp:MenuItemStyle CssClass="ChildMenu" />
- <asp:MenuItemStyle CssClass="ChildMenu" />
- </LevelMenuItemStyles>
- <StaticSelectedStyle CssClass="selected" />
- </asp:Menu>
- </div>
Now the page looks as in the following after designing your page.
DynamicMenu.aspx
- <%@ Page Language="C#" AutoEventWireup="true" CodeFile="DynamicMenu.aspx.cs" Inherits="DynamicMenu" %>
-
- <!DOCTYPE html>
-
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head runat="server">
- <title>Dynamic Menu Control Article for C# Corner by Upendra Pratap Shahi</title>
- <style type="text/css">
- body {
- background-color: mediumaquamarine;
- font-family: Arial;
- font-size: 10pt;
- color: #444;
- }
-
- .ParentMenu, .ParentMenu:hover {
- width: 100px;
- background-color: #fff;
- color: #333;
- text-align: center;
- height: 30px;
- line-height: 30px;
- margin-right: 5px;
- }
-
- .ParentMenu:hover {
- background-color: #ccc;
- }
-
- .ChildMenu, .ChildMenu:hover {
- width: 110px;
- background-color: #fff;
- color: #333;
- text-align: center;
- height: 30px;
- line-height: 30px;
- margin-top: 5px;
- }
-
- .ChildMenu:hover {
- background-color: #ccc;
- }
-
- .selected, .selected:hover {
- background-color: #A6A6A6 !important;
- color: #fff;
- }
-
- .level2 {
- background-color: #fff;
- }
- </style>
- </head>
- <body>
- <form id="form1" runat="server">
- <div>
- <asp:Menu ID="Menu1" runat="server" Orientation="Horizontal">
- <LevelMenuItemStyles>
- <asp:MenuItemStyle CssClass="ParentMenu" />
- <asp:MenuItemStyle CssClass="ChildMenu" />
- <asp:MenuItemStyle CssClass="ChildMenu" />
- </LevelMenuItemStyles>
- <StaticSelectedStyle CssClass="selected" />
- </asp:Menu>
- </div>
- </form>
- </body>
- </html>
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 4In 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.
- using System.IO;
- using System.Data;
- using System.Data.SqlClient;
- using System.Configuration;
Now your page looks as in the following.
DynamicMenu.aspx.cs
- using System;
- using System.Collections.Generic;
- using System.Linq;
- using System.Web;
- using System.Web.UI;
- using System.Web.UI.WebControls;
- using System.IO;
- using System.Data;
- using System.Data.SqlClient;
- using System.Configuration;
-
- public partial class DynamicMenu : System.Web.UI.Page
- {
- protected void Page_Load(object sender, EventArgs e)
- {
- if (!IsPostBack)
- {
- DataTable dt = this.BindMenuData(0);
- DynamicMenuControlPopulation(dt, 0, null);
- }
- }
-
-
-
-
-
- protected DataTable BindMenuData(int parentmenuId)
- {
-
- DataSet ds = new DataSet();
- DataTable dt;
- DataRow dr;
- DataColumn menu;
- DataColumn pMenu;
- DataColumn title;
- DataColumn description;
- DataColumn URL;
-
-
- dt=new DataTable();
-
-
- menu= new DataColumn("MenuId",Type.GetType("System.Int32"));
- pMenu=new DataColumn("ParentId", Type.GetType("System.Int32"));
- title=new DataColumn("Title",Type.GetType("System.String"));
- description=new DataColumn("Description",Type.GetType("System.String"));
- URL=new DataColumn("URL",Type.GetType("System.String"));
-
-
- dt.Columns.Add(menu);
- dt.Columns.Add(pMenu);
- dt.Columns.Add(title);
- dt.Columns.Add(description);
- dt.Columns.Add(URL);
-
-
-
- dr = dt.NewRow();
- dr["MenuId"] = 1;
- dr["ParentId"] = 0;
- dr["Title"] = "Home";
- dr["Description"] = "";
- dr["URL"] = "~/Home.aspx";
- dt.Rows.Add(dr);
-
-
- dr = dt.NewRow();
- dr["MenuId"] = 2;
- dr["ParentId"] = 0;
- dr["Title"] = "Customer Service";
- dr["Description"] = "Customer Service";
- dr["URL"] = "~/Customer.aspx";
- dt.Rows.Add(dr);
-
-
- dr = dt.NewRow();
- dr["MenuId"] = 3;
- dr["ParentId"] = 0;
- dr["Title"] = "About";
- dr["Description"] = "About us page";
- dr["URL"] = "~/AboutUs.aspx";
- dt.Rows.Add(dr);
-
-
- dr = dt.NewRow();
- dr["MenuId"] = 4;
- dr["ParentId"] = 0;
- dr["Title"] = "Contact Us";
- dr["Description"] = "Contact Us page";
- dr["URL"] = "~/Contact.aspx";
- dt.Rows.Add(dr);
-
-
- dr = dt.NewRow();
- dr["MenuId"] = 5;
- dr["ParentId"] = 0;
- dr["Title"] = "Testmonial";
- dr["Description"] = "Testimonial page";
- dr["URL"] = "~/Testimonial.aspx";
- dt.Rows.Add(dr);
-
-
- dr = dt.NewRow();
- dr["MenuId"] = 6;
- dr["ParentId"] = 2;
- dr["Title"] = "Consulting";
- dr["Description"] = "Consulting page";
- dr["URL"] = "~/Consult.aspx";
- dt.Rows.Add(dr);
-
-
- dr = dt.NewRow();
- dr["MenuId"] = 7;
- dr["ParentId"] = 2;
- dr["Title"] = "Outsourcing";
- dr["Description"] = "Outsourcing page";
- dr["URL"] = "~/Outsource.aspx";
- dt.Rows.Add(dr);
-
-
- dr = dt.NewRow();
- dr["MenuId"] = 8;
- dr["ParentId"] = 7;
- dr["Title"] = "Domestic";
- dr["Description"] = "Domestic outsourcing page";
- dr["URL"] = "~/Domestic.aspx";
- dt.Rows.Add(dr);
-
-
- dr = dt.NewRow();
- dr["MenuId"] = 9;
- dr["ParentId"] = 7;
- dr["Title"] = "International";
- dr["Description"] = "International outsourcing page";
- dr["URL"] = "~/International.aspx";
- dt.Rows.Add(dr);
-
- ds.Tables.Add(dt);
- var dv = ds.Tables[0].DefaultView;
- dv.RowFilter = "ParentId='" + parentmenuId + "'";
- DataSet ds1 = new DataSet();
- var newdt = dv.ToTable();
- return newdt;
- }
-
-
-
-
-
-
-
- protected void DynamicMenuControlPopulation(DataTable dt, int parentMenuId, MenuItem parentMenuItem)
- {
- string currentPage = Path.GetFileName(Request.Url.AbsolutePath);
- foreach (DataRow row in dt.Rows)
- {
- MenuItem menuItem = new MenuItem
- {
- Value = row["MenuId"].ToString(),
- Text = row["Title"].ToString(),
- NavigateUrl = row["URL"].ToString(),
- Selected = row["URL"].ToString().EndsWith(currentPage, StringComparison.CurrentCultureIgnoreCase)
- };
- if (parentMenuId == 0)
- {
- Menu1.Items.Add(menuItem);
- DataTable dtChild = this.BindMenuData(int.Parse(menuItem.Value));
- DynamicMenuControlPopulation(dtChild, int.Parse(menuItem.Value), menuItem);
- }
- else
- {
-
- parentMenuItem.ChildItems.Add(menuItem);
- DataTable dtChild = this.BindMenuData(int.Parse(menuItem.Value));
- DynamicMenuControlPopulation(dtChild, int.Parse(menuItem.Value), menuItem);
-
- }
- }
- }
- }
Output
Figure 2: 0-level menu
Figure 3: 1-level menu
Figure 4: 2-level menu
I hope you liked this. Have a good day. Thank you for reading.