Creating a dynamic menu which gets the menu items and sub menu item during the execution time of the asp.net project requires to construct a table say Menu where we insert the information of the menu items to be rendered in the asp page.
First drag a menu control from the toolbox of the Visual Studio to the form where you want to see your dynamic menu. Then Create a table having a MenuId as primary key, MenuName where we insert the name of the menu to be displayed in the view page,UnderMenu where we insert sub menu which are to be shown on mouse hover. For example, on the mouse hover of Tutorials Main Menu we need to show different topics such as HTML,Ruby On Rails, C#, ASP.NET, JAVA, MSSQL etc. OR any thing else according to your choice.So now insert the data in the above table according to requirement.
similarly go on adding menus in parent child relationship.
Here you can see that the parent menu are given under menu id '0' and its child are given its parents menu id as under menu id. Here you can see that MenuId of Company is 2, and its under menu is 0 which indicates that menu Company is parent menu. Then the other two menu Board of Directors and Organization Structure are filled with UnderMenu of 2, Which says that these two menu are child of Company menu.
Now Its time to do some coding to create xml consisting dynamically of all the values in the table given above. The PostUrl field in the above table give the url to follow on click of the menu such the you dont need to hard code Response.Redirect manually to redirect a click to different url.
So now the C# code goes here, Its a bit complicated in viewing but try to understand it.
Here you will have to make some connections to your database table, open it and call it con.
string sql = "select * from Menu where MenuId order by MenuId";
Checks if it is the parent menu. If its parent menu goes to find own child menu in the table
if (underMenu == "0")
make another connection to your database and call it innercon
Dont forget to close inner connections
}
MainMenu.DataSource = xd;
Now the only thing left is the DataBinding portion of the program. But if you like to have some designs in your menu you can add which will not affect the entire process how the menu is shown.In aspx page add the databinding functionality.
<asp:Menu ID="MainMenu" Orientation="Horizontal" BackColor="#000000">
<DataBindings> <asp:MenuItemBinding DataMember="TopMenu" TextField="text" ValueField="text" SelectableField="isSelectable" ToolTipField="toolTipMsg" EnabledField="isEnabled" /> <asp:MenuItemBinding DataMember="Menu" TextField="text" ValueField="text" NavigateUrlField="url" SelectableField="isSelectable" ToolTipField="toolTipMsg"/> <asp:MenuItemBinding DataMember="SubMenu" TextField="text" ValueField="text" NavigateUrlField="url" SelectableField="isSelectable" /> </DataBindings> </MainMenu>
default color taken by the menu may have been white so try to add colors to the menu styles.Menu Style will be covered later on this blog.
 |
| Design Table for Dynamic Menu |
First drag a menu control from the toolbox of the Visual Studio to the form where you want to see your dynamic menu. Then Create a table having a MenuId as primary key, MenuName where we insert the name of the menu to be displayed in the view page,UnderMenu where we insert sub menu which are to be shown on mouse hover. For example, on the mouse hover of Tutorials Main Menu we need to show different topics such as HTML,Ruby On Rails, C#, ASP.NET, JAVA, MSSQL etc. OR any thing else according to your choice.So now insert the data in the above table according to requirement.
 |
| Insert Data Into Table |
similarly go on adding menus in parent child relationship.
Here you can see that the parent menu are given under menu id '0' and its child are given its parents menu id as under menu id. Here you can see that MenuId of Company is 2, and its under menu is 0 which indicates that menu Company is parent menu. Then the other two menu Board of Directors and Organization Structure are filled with UnderMenu of 2, Which says that these two menu are child of Company menu.
Now Its time to do some coding to create xml consisting dynamically of all the values in the table given above. The PostUrl field in the above table give the url to follow on click of the menu such the you dont need to hard code Response.Redirect manually to redirect a click to different url.
So now the C# code goes here, Its a bit complicated in viewing but try to understand it.
XmlDataSource xd = new XmlDataSource();
string xmlstr;
xmlstr = "";
xmlstr += "";
string xmlstr;
xmlstr = "";
xmlstr += "
Here you will have to make some connections to your database table, open it and call it con.
string sql = "select * from Menu where MenuId order by MenuId";
SqlCommand cmd = new SqlCommand(sql, con);
SqlDataReader reader = cmd.ExecuteReader();
while (reader.Read())
{
string menuName = reader["MenuName"].ToString();
string MenuId = reader["MenuId"].ToString();
string underMenu = reader["UnderMenu"].ToString();
Checks if it is the parent menu. If its parent menu goes to find own child menu in the table
if (underMenu == "0")
{
xmlstr += " ";
string innerSql = "select * from Menu; make another connection to your database and call it innercon
innerReader.Close();
innercon.Close();
Dont forget to close inner connections
}
}
xmlstr += "";
xd.CacheExpirationPolicy = DataSourceCacheExpiry.Absolute;
xd.CacheDuration = 1;
xd.EnableCaching = false;
xd.Data = xmlstr;
MainMenu is the ID of the menu dragged from toolbox to the form in aspx. You can get or change your ID easily from the view.
MainMenu.DataSource = xd;
MainMenu.DataBind();
}
}Now the only thing left is the DataBinding portion of the program. But if you like to have some designs in your menu you can add which will not affect the entire process how the menu is shown.In aspx page add the databinding functionality.
default color taken by the menu may have been white so try to add colors to the menu styles.Menu Style will be covered later on this blog.
