Post
Ask Question

Database Driven Menu Item in ASP.Net

The following is my menu item data table in design mode:

sql database

The following is the script of my table:

  1. CREATE TABLE [dbo].[tbl_Menu](  
  2.     [Menu_ID] [int] IDENTITY(1,1) NOT NULL,  
  3.     [Menu_ParentID] [int] NULL,  
  4.     [Menu_Name] [varchar](50) NULL,  
  5.     [Menu_Page_URL] [varchar](500) NULL,  
  6.  CONSTRAINT [PK_tbl_Menu] PRIMARY KEY CLUSTERED   
  7. (  
  8.     [Menu_ID] ASC  
  9. )WITH (PAD_INDEX  = OFF, STATISTICS_NORECOMPUTE  = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS  = ON, ALLOW_PAGE_LOCKS  = ON) ON [PRIMARY]  
  10. ) ON [PRIMARY]  
  11.   
  12. GO  

Now the data in my tbl_Menu table:

tbl_menu table

Here in this application I am using a Master Pager to provide a consistent look in the entire application. So I wrote code to generate a menu item from the database in MasterPage.master.cs.

The following is my MasterPage.Master:

  1. <%@ Master Language="C#" AutoEventWireup="true" CodeBehind="MasterPage.master.cs" Inherits="MenuFromDB.MasterPage" %>  
  2.   
  3. <!DOCTYPE html>  
  4.   
  5. <html xmlns="http://www.w3.org/1999/xhtml">  
  6. <head runat="server">  
  7.     <title></title>  
  8.     <link href="StyleSheetMenu.css" rel="stylesheet" />  
  9.     <link href="StyleSheet.css" rel="stylesheet" />  
  10.     <asp:ContentPlaceHolder ID="head" runat="server">  
  11.     </asp:ContentPlaceHolder>  
  12. </head>  
  13. <body>  
  14.     <form id="form1" runat="server">  
  15.         <div>  
  16.             <table cellpadding="1" cellspacing="1" width="880px" align="center" class="BlueBorder"  
  17.                    style="background: White;">  
  18.                 <tr>  
  19.                     <td style="height: 100px; background-color: skyblue; padding-left: 10px;">  
  20.                         <span style="font-size: 20pt; font-weight: bold; color: blue;">Data Base Driven Menu Item In ASP.NET C#</span>  
  21.                     </td>  
  22.                 </tr>  
  23.                 <tr>  
  24.                     <td style="background-color: orange; padding-left: 1px;">  
  25.                         <asp:Menu ID="MenuFromDB" runat="server" Orientation="Horizontal">  
  26.                             <levelmenuitemstyles>  
  27.                                 <asp:menuitemstyle cssclass="Parent_Menu" />  
  28.                                 <asp:menuitemstyle cssclass="level_menu" />  
  29.                             </levelmenuitemstyles>  
  30.                             <staticselectedstyle cssclass="selected" />  
  31.                         </asp:Menu>  
  32.                     </td>  
  33.                 </tr>  
  34.                 <tr>  
  35.                     <td style="padding-top: 40px; padding-bottom: 80px; padding-left: 10px">  
  36.                         <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">  
  37.                         </asp:ContentPlaceHolder>  
  38.                     </td>  
  39.                 </tr>  
  40.             </table>  
  41.   
  42.         </div>  
  43.     </form>  
  44. </body>  
  45. </html>  
Now the MasterPage.Master.cs is:
  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;  
  11.   
  12. namespace MenuFromDB  
  13. {  
  14.     public partial class MasterPage : System.Web.UI.MasterPage  
  15.     {  
  16.         SqlDataAdapter da;  
  17.         DataSet ds = new DataSet();  
  18.         DataTable dt = new DataTable();  
  19.   
  20.         protected void Page_Load(object sender, EventArgs e)  
  21.         {  
  22.             if (!Page.IsPostBack)  
  23.             {  
  24.                 dt = GetMenuDataFromDB(0);  
  25.                 PopulateMenu(dt, 0, null);  
  26.             }  
  27.         }  
  28.   
  29.         public DataTable GetMenuDataFromDB(int MenuParentID)  
  30.         {  
  31.             SqlConnection con = new SqlConnection();  
  32.             ds = new DataSet();  
  33.             con.ConnectionString = @"Data Source=MyPC\SqlServer2k8; Initial Catalog=Test; Integrated Security=true;";  
  34.             SqlCommand cmd = new SqlCommand("SELECT *  FROM tbl_Menu WHERE Menu_ParentID='" + MenuParentID + "'", con);  
  35.   
  36.             da = new SqlDataAdapter(cmd);  
  37.             da.Fill(ds);  
  38.             con.Open();  
  39.             cmd.ExecuteNonQuery();  
  40.             con.Close();  
  41.   
  42.             return ds.Tables[0];  
  43.         }  
  44.   
  45.         private void PopulateMenu(DataTable dt, int Menu_Parent_ID, MenuItem Parent_MenuItem)  
  46.         {  
  47.             string currentPage = Path.GetFileName(Request.Url.AbsolutePath);  
  48.             foreach (DataRow row in dt.Rows)  
  49.             {  
  50.                 MenuItem menuItem = new MenuItem  
  51.                 {  
  52.                     Value = row["Menu_Id"].ToString(),  
  53.                     Text = row["Menu_Name"].ToString(),  
  54.                     NavigateUrl = row["Menu_Page_URL"].ToString(),  
  55.                     Selected = row["Menu_Page_URL"].ToString().EndsWith(currentPage, StringComparison.CurrentCultureIgnoreCase)  
  56.                 };  
  57.                 if (Menu_Parent_ID == 0)  
  58.                 {  
  59.                     MenuFromDB.Items.Add(menuItem);  
  60.                     DataTable dtChildMenu = new DataTable();  
  61.                     dtChildMenu = this.GetMenuDataFromDB(int.Parse(menuItem.Value));  
  62.                     PopulateMenu(dtChildMenu, int.Parse(menuItem.Value), menuItem);  
  63.                 }  
  64.                 else  
  65.                 {  
  66.                     Parent_MenuItem.ChildItems.Add(menuItem);  
  67.                 }  
  68.             }  
  69.         }  
  70.     }  
  71. }  

Now run the application.

demo application

report menuitem

Now hover on any menu and see the child menu.

aboutus menuitem

social tab menuitem


Similar Articles