Creating Dynamic Menu in ASP.Net

Upendra Pratap Shahi
9y
52.3k
0
1

Article

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 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.

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);
}
}
/// <summary>
/// This function retur a datatable according to parent menu id passed by user
/// </summary>
/// <param name="parentmenuId">parent menu ID</param>
/// <returns>data table</returns>
protected DataTable BindMenuData(int parentmenuId)
{
//declaration of variable used
DataSet ds = new DataSet();
DataTable dt;
DataRow dr;
DataColumn menu;
DataColumn pMenu;
DataColumn title;
DataColumn description;
DataColumn URL;
//create an object of datatable
dt=new DataTable();
//creating column of datatable with datatype
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"));
//bind data table columns in datatable
dt.Columns.Add(menu);//1st column
dt.Columns.Add(pMenu);//2nd column
dt.Columns.Add(title);//3rd column
dt.Columns.Add(description);//4th column
dt.Columns.Add(URL);//5th column
//creating data row and assiging the value to columns of datatable
//1st row of data table
dr = dt.NewRow();
dr["MenuId"] = 1;
dr["ParentId"] = 0;
dr["Title"] = "Home";
dr["Description"] = "";
dr["URL"] = "~/Home.aspx";
dt.Rows.Add(dr);
//2nd row of data table
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);
//3rd row of data table
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);
//4th row of data table
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);
//5th row of data table
dr = dt.NewRow();
dr["MenuId"] = 5;
dr["ParentId"] = 0;
dr["Title"] = "Testmonial";
dr["Description"] = "Testimonial page";
dr["URL"] = "~/Testimonial.aspx";
dt.Rows.Add(dr);
//6th row of data table
dr = dt.NewRow();
dr["MenuId"] = 6;
dr["ParentId"] = 2;
dr["Title"] = "Consulting";
dr["Description"] = "Consulting page";
dr["URL"] = "~/Consult.aspx";
dt.Rows.Add(dr);
//7th row of data table
dr = dt.NewRow();
dr["MenuId"] = 7;
dr["ParentId"] = 2;
dr["Title"] = "Outsourcing";
dr["Description"] = "Outsourcing page";
dr["URL"] = "~/Outsource.aspx";
dt.Rows.Add(dr);
//8th row of data table
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);
//9th row of data table
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;
}
/// <summary>
/// This is a recursive function to fetchout the data to create a menu from data table
/// </summary>
/// <param name="dt">datatable</param>
/// <param name="parentMenuId">parent menu Id of integer type</param>
/// <param name="parentMenuItem"> Menu Item control</param>
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);
}
}
}
}