How to bind asp.net menu control with database ?
Hi
While working on asp.net project, we will get situation to create a dynamic menu control which will be configurable by admin.
For doing this task we can do like this
Step1: I have created a table like this Img
Step2: Configure the asp.net menu control like this
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title><style type="text/css">
.menuItem
{
border:Solid 1px black;
width:100px;
padding:2px;
background-color:#eeeeee;
}
.menuItem a
{
color:blue;
}.IE8Fix
{
z-index: 1000;}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Menu
id="Menu1"
Orientation="horizontal"
StaticMenuItemStyle-CssClass="menuItem"
DynamicMenuItemStyle-CssClass="menuItem"
Runat="server">
<%– This CSS used for fixing the browser problem with IE8–%>
<DynamicMenuStyle CssClass="IE8Fix" /></asp:Menu>
</div>
</form>
</body>
</html>
Step3: Write the code for binding asp.net menu on basis of category like this
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data.SqlClient;
using System.Data;public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{if (!IsPostBack)
{populateMenuItem();
}
}private void populateMenuItem()
{DataTable menuData = GetMenuData();
AddTopMenuItems(menuData);}
private DataTable GetMenuData()
{
using (SqlConnection con = new SqlConnection("Data Source=.\\SQLEXPRESS;AttachDbFilename=|DataDirectory|\\Database.mdf;Integrated Security=True;User Instance=True"))
{
using (SqlCommand cmd = new SqlCommand("SELECT Id,ParentId,Name FROM tblProduct", con))
{
SqlDataAdapter da = new SqlDataAdapter(cmd);
DataTable dt = new DataTable();
da.Fill(dt);
return dt;
}}
}/// Filter the data to get only the rows that have a
/// null ParentID (This will come on the top-level menu items)private void AddTopMenuItems(DataTable menuData)
{
DataView view = new DataView(menuData);
view.RowFilter = "ParentID IS NULL";
foreach (DataRowView row in view)
{
MenuItem newMenuItem = new MenuItem(row["Name"].ToString(), row["Id"].ToString());
Menu1.Items.Add(newMenuItem);
AddChildMenuItems(menuData, newMenuItem);
}}
//This code is used to recursively add child menu items by filtering by ParentID
private void AddChildMenuItems(DataTable menuData, MenuItem parentMenuItem)
{
DataView view = new DataView(menuData);
view.RowFilter = "ParentID=" + parentMenuItem.Value;
foreach (DataRowView row in view)
{
MenuItem newMenuItem = new MenuItem(row["Name"].ToString(), row["Id"].ToString());
parentMenuItem.ChildItems.Add(newMenuItem);
AddChildMenuItems(menuData, newMenuItem);
}
}}
i have 2 similar post regarding hierarchical data display:
http://www.codeshode.com/2011/07/display-hierarchical-data-with-menu.html
http://www.codeshode.com/2010/05/display-hierarchical-data-with-treeview.html
http://www.codeshode.com/2010/06/display-directory-structure-using.html
Hi
I saw your post. It is really nice and useful. Thanks for sharing the nice URL.
Great And Nice… Thanks A LOT….!!!!
You are welcome.
Its really nice post, Could you please tel me code to navigate to another pages (I mean if we click on India (child node), redirects to India.aspx page)
Hi
I glad to know that you liked it. That is also possible. Please give me some time. I will post the code.
Regards
Chandradev
Thanks Alot
Post to how we navigate to another Page
Sorry for the late reply. You click on “MenuItemClick” event and write this code. Then it will go to particular page
protected void Menu1_MenuItemClick(object sender, MenuEventArgs e)
{
string name = Menu1.SelectedItem.Text;
string pageurl=name+”.aspx”;
Response.Redirect(pageurl);
}
I am not able to get click event of second menu item & its sub items..
MenuItemClick event is working fine for first menu & its sub menus but not working for the rest..
Please give me some time to check the code.
hi sir , i have completed all the navigation part also but only problem is firstly menuitem.click is not happened and another thing is when menu item is click the content of the lastmenu is displaying for this am sending all my code to plz solve my problem that to in dynamically
Thanks a lot.really very useful
My menu is over loaded by the page. How to get the menu on the top of the page?
Hi, could you explain your problem little bit more ? I didnot get you. You means your sub menu is so lenghly . do You want to see it on top ?
thks for the help
Ther eis no error in yor code but i am not getting child node , i can view Menus only
for example, Country Name and State name
iits coming But i amnot getting that india and Nepal ( used Your same Code)
and More thing i want to add image near menus…
There is no error in your code. but i am not getting child menus, i can view Menus only
for example, Country Name and State name is coming But i am not getting that india and Nepal ( used Your same Code)
and one More thing i want to add image near menus…