Menu and SubMenu

Menus and submenus are an important part of any application. There are many ways to create them in applications. Also we are using a navigation path to easily access any page by menu and submenu.

Menus and submenus are created normally with any hyperlink, link button and so on. However, we are showing in this article menus and submenus created with SQL Table.

First create a table in your SQL database as in the following procedure.

Step 1: Database Side

Create Table a Menu and Sub Menu Level as in the following:

  1. create table MenuSubmenu
  2. (
  3. Menu_id int identity(1,1) primary key,
  4. Submenu_id int,
  5. Menu varchar(30),
  6. MenuUrl nvarchar(500)
  7. )
Then create a select procedure as in the following:
  1. Create procedure sp_Menu
  2. @Submenu_id int
  3. as
  4. begin
  5. select Menu_id,Submenu_id,Menu,MenuUrl from MenuSubmenu where Submenu_id=@Submenu_id
  6. End
Insert some Menu and Submenu records into the table.


Figure 1: Database table

You will see in this table Menu_id, submenu_id, Menu name and Menu URL. Under this Page1 and Page2 is a parent menu and Sub Page1 and Sub Page2 is a child page. In this table the parent menu id is also provided in a sub menu id.

Step 2: Application Side

Now we will go to our web application and add a webpage to the application or project.

Step 3: Page Design Side

Now add a Menu control on a web page as in the following code snippet.
  1. <%@ Page Title="" Language="C#" MasterPageFile="~/MasterPage.Master" AutoEventWireup="true"
  2. CodeBehind="Menu.aspx.cs" Inherits="Test_WebApplication.UI.Menu" %>
  3. <asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server"></asp:Content>
  4. <asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
  5. <h1>Menu And SubMenu Example </h1>
  6. <asp:Menu ID="HMenu" runat="server" Orientation="Horizontal" >
  7. <StaticSelectedStyle />
  8. <LevelMenuItemStyles>
  9. <asp:MenuItemStyle />
  10. </LevelMenuItemStyles>
  11. </asp:Menu>
  12. </asp:Content>
Step 4: Page Code Side

Now go to the page code and write the following code for menu and submenu. Get the values from the datatable and display it in menu style on your current page.

Code:
  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.Data;
  8. using System.Data.SqlClient;
  9. using System.Configuration;
  10. using System.IO;
  11. namespace Test_WebApplication.UI
  12. {
  13. public partial class Menu: System.Web.UI.Page
  14. {
  15. string constr = ConfigurationManager.ConnectionStrings["connstr"].ConnectionString;
  16. protected void Page_Load(object sender, EventArgs e)
  17. {
  18. if (!IsPostBack)
  19. {
  20. DataTable dt = GetMenu(0);
  21. FillMenu(dt, 0, null);
  22. }
  23. }
  24. private DataTable GetMenu(int Submenu_id)
  25. {
  26. using(SqlConnection con = new SqlConnection(constr))
  27. {
  28. using(SqlCommand cmd = new SqlCommand("sp_Menu", con))
  29. {
  30. SqlDataAdapter sd = new SqlDataAdapter();
  31. DataTable dtMenu = new DataTable();
  33. cmd.Parameters.AddWithValue("@Submenu_id", Submenu_id);
  34. cmd.CommandType = CommandType.StoredProcedure;
  36. cmd.Connection = con;
  37. sd.SelectCommand = cmd;
  38. sd.Fill(dtMenu);
  39. return dtMenu;
  40. }
  41. }
  42. }
  43. private void FillMenu(DataTable dt, int Submenu_id, MenuItem MenuItem) {
  44. string Page = Path.GetFileName(Request.Url.AbsolutePath);
  45. foreach(DataRow row in dt.Rows)
  46. {
  47. MenuItem Menu = new MenuItem
  48. {
  49. Value = row["Menu_id"].ToString(),
  50. Text = row["Menu"].ToString(),
  51. NavigateUrl = row["MenuUrl"].ToString(),
  52. Selected = row["MenuUrl"].ToString().EndsWith(Page, StringComparison.CurrentCultureIgnoreCase)
  53. };
  54. if (Submenu_id == 0)
  55. {
  56. HMenu.Items.Add(Menu);
  57. DataTable dtSubmenu = this.GetMenu(int.Parse(Menu.Value));
  58. FillMenu(dtSubmenu, int.Parse(Menu.Value), Menu);
  59. } else {
  60. MenuItem.ChildItems.Add(Menu);
  61. }
  62. }
  63. }
  64. }
  65. }
Step 5: Browser Side

Now we will run the page and display the menu and submenu items on a page.


Figure 2: output

Click on the sub menu items and access other pages of the application.