We see menus in various styles in many sites. Some menus are designed using CSS styles and some are designed with a database and are they are called dynamic menu. This type of menu population is particularly useful when you want to set the access permissions or restricting users from accessing some pages at runtime. This article will be very helpful for those who are looking for a database driven dynamic menu. This article creates a dynamic menu from a SQL Server database.

The following shows the creation of two tables in SQL.

Technology Table

  1. create table Technology
  2. (
  3. TechnologyID int primary key,
  4. TechnologyName varchar(120)
  5. TechnologyURL varchar(100)
  6. );
  7. TechnologyCategory Table
  8. create table TechnologyCategory
  9. (
  10. TechnologyID int
  11. TechnologyCategoryID int primary key,
  12. TechnologyCategoryName varchar(120),
  13. TechnologyCategoryURL varchar(100)
  14. );

Inserting data into both tables:

Database-table.jpg

ASPX Code

This page contains CSS style and panel control.

  1. <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
  3. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  5. <html xmlns="http://www.w3.org/1999/xhtml">
  6. <head runat="server">
  7. <title></title>
  8. <link href="css/jquery.mcdropdown.css" rel="stylesheet" type="text/css" />
  9. <script src="Scripts/jquery-1.4.1-vsdoc.js" type="text/javascript"></script>
  10. <script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
  11. <style type="text/css">
  12. .menu
  13. {
  14. width: 913px;
  15. font-family: verdana, Segoe UI;
  16. margin: 0 auto;
  17. border: 1px solid #B34C00;
  18. border-radius: 4px;
  19. }
  20. .menu ul
  21. {
  22. padding: 10px;
  23. background-color: #FF6600;
  24. float: left;
  25. margin: 0px;
  26. list-style: none;
  27. }
  28. .menu ul li
  29. {
  30. display inline-block;
  31. float: left;
  32. position: relative;
  33. cursor: pointer;
  34. }
  35. .menu ul li a
  36. {
  37. cursor: pointer;
  38. display: block;
  39. padding: 10px;
  40. float: left;
  41. color: #fff;
  42. text-decoration: none;
  43. }
  44. .menu ul li ul
  45. {
  46. display: none;
  47. margin-top: 10px;
  48. }
  49. .menu ul li:hover ul
  50. {
  51. display: block;
  52. width: 200px;
  53. position: absolute;
  54. left: 0px;
  55. top: 25px;
  56. background: #FF6600;
  57. border: 1px solid #B34C00;
  58. border-top: none;
  59. color: #fff;
  60. }
  61. .menu ul li:hover ul li
  62. {
  63. padding: 5px;
  64. float: none;
  65. display: block;
  66. }
  67. .menu ul li:hover ul li a
  68. {
  69. padding: 5px;
  70. }
  71. </style>
  72. </head>
  73. <body>
  74. <form id="form1" runat="server">
  75. <div class="menu">
  76. <asp:Panel ID="Panel1" runat="server" Width="913px" Style="margin: 0px">
  77. </asp:Panel>
  78. </div>
  79. </form>
  80. <p>
  81. </p>
  82. </body>
  83. </html>
Getting the menu data from the database

You have created tables and inserted data into the tables. Now access the menu data from the SQL Server database using C# code in ASP.Net.

  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.Web.UI.HtmlControls;
  8. using System.Data.SqlClient;
  9. using System.Data;
  10. public partial class _Default : System.Web.UI.Page
  11. {
  12. SqlConnection con = new SqlConnection("Data Source=(local);Initial Catalog=master;uid=sa; pwd=Micr0s0ft");
  13. protected void Page_Load(object sender, EventArgs e)
  14. {
  15. SqlDataAdapter da = new SqlDataAdapter("Select TechnologyID, TechnologyName, TechnologyURL from Technology", con);
  16. DataTable dttc = new DataTable();
  17. da.Fill(dttc);
  18. HtmlGenericControl main = UList("Menuid", "menu");
  19. foreach (DataRow row in dttc.Rows)
  20. {
  21. da = new SqlDataAdapter("select TechnologyCategoryID,TechnologyCategoryName,TechnologyCategoryURL from TechnologyCategory where TechnologyID=" + row["TechnologyID"].ToString(), con);
  22. DataTable dtDist = new DataTable();
  23. da.Fill(dtDist);
  24. if (dtDist.Rows.Count > 0)
  25. {
  26. HtmlGenericControl sub_menu = LIList(row["TechnologyName"].ToString(), row["TechnologyID"].ToString(), row["TechnologyURL"].ToString());
  27. HtmlGenericControl ul = new HtmlGenericControl("ul");
  28. foreach (DataRow r in dtDist.Rows)
  29. {
  30. ul.Controls.Add(LIList(r["TechnologyCategoryName"].ToString(), r["TechnologyCategoryID"].ToString(), r["TechnologyCategoryURL"].ToString()));
  31. }
  32. sub_menu.Controls.Add(ul);
  33. main.Controls.Add(sub_menu);
  34. }
  35. else
  36. {
  37. main.Controls.Add(LIList(row["TechnologyName"].ToString(), row["TechnologyID"].ToString(), row["TechnologyURL"].ToString()));
  38. }
  39. }
  40. Panel1.Controls.Add(main);
  41. }
  42. private HtmlGenericControl UList(string id, string cssClass)
  43. {
  44. HtmlGenericControl ul = new HtmlGenericControl("ul");
  45. ul.ID = id;
  46. ul.Attributes.Add("class", cssClass);
  47. return ul;
  48. }
  49. private HtmlGenericControl LIList(string innerHtml, string rel, string url)
  50. {
  51. HtmlGenericControl li = new HtmlGenericControl("li");
  52. li.Attributes.Add("rel", rel);
  53. li.InnerHtml = "<a href=" + string.Format("http://{0}",url) + ">" + innerHtml + "</a>";
  54. return li;
  55. }
  56. }

Now press F5 to run the application.

Dynamic-Menu-in-ASP-NET-2.jpg

Now hover the mouse over the "technology" menu item.

Dynamic-Menu-in-ASP-NET-3.jpg

Now hover the mouse over the "Help" menu item.

Dynamic-Menu-in-ASP-NET-4.jpg