 WebForm1 
  WebForm1 
  WebForm1 
  menuStyle 
  
 
 <%@ Page Src="WebForm1.aspx.cs" AutoEventWireup="false" Inherits="WebForm1" %>
<%@ Register TagPrefix="demos" TagName="Header" Src="~/common/page_fragments/header.ascx"%>
<%@ Register TagPrefix="demos" TagName="Footer" Src="~/common/page_fragments/footer.ascx"%>
<%@ Register TagPrefix="demos" TagName="About" Src="~/common/page_fragments/about.ascx"%>
<%@ Register TagPrefix="ComponentArt" Namespace="ComponentArt.Web.UI" Assembly="ComponentArt.Web.UI" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="EN">
  <head>
    <title>SQL Database Driven Menu</title>
    <link href="../../../common/baseStyle.css" type="text/css" rel="stylesheet" />    
    <link href="menuStyle.css" type="text/css" rel="stylesheet" >
  </head>

  <body>  
    <form id="Form1" method="post" runat="server">

    <demos:header DemoName="SQL Database Driven Menu" id="pageHeader" SiteMapFile="menuDemos.xml" ProductLogo="logo_menu.gif" runat="server"/>
    <div class="DemoArea">

    <ComponentArt:Menu id="Menu1" 
      Orientation="Horizontal"
      CssClass="TopGroup"
      DefaultGroupCssClass="MenuGroup"
      DefaultItemLookID="DefaultItemLook"
      DefaultGroupItemSpacing="1"
      ImagesBaseUrl="images/"
      EnableViewState="false"
      ExpandDelay="100"
      runat="server">
    <ItemLooks>
      <ComponentArt:ItemLook LookID="TopItemLook" CssClass="TopMenuItem" HoverCssClass="TopMenuItemHover" LabelPaddingLeft="10" LabelPaddingRight="10" LabelPaddingTop="2" LabelPaddingBottom="2" />
      <ComponentArt:ItemLook LookID="DefaultItemLook" CssClass="MenuItem" HoverCssClass="MenuItemHover" ExpandedCssClass="MenuItemHover" LeftIconWidth="20" LeftIconHeight="18" LabelPaddingLeft="10" LabelPaddingRight="10" LabelPaddingTop="5" LabelPaddingBottom="5" />
      <ComponentArt:ItemLook LookID="BreakItem" CssClass="MenuBreak" />
    </ItemLooks>
    </ComponentArt:Menu>

    <br><br><br>
    <span class="hint">
    The entire menu structure was <br>
    populated from a SQL Database. 
    <br><br>
    Please refer to the included <br>
    server-side source code for details. 
    </span>

    </div>

    <demos:about id="demoAboutText" AboutFile="~/menu/programming_server/sql_databaseDrivenMenu/about.inc" runat="server"/>
    <demos:footer id="pageFooter" runat="server"/>
    </form>
    <script type="text/javascript">
    // Preload CSS-referenced images 
    var img1 = new Image();
    img1.src = '/images/background.gif';
    var img2 = new Image();
    img2.src = '/images/break_bg.gif';
    </script>
  </body>
</html>



 
using System;
using System.Collections;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Web;
using System.Web.SessionState;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.HtmlControls;
using System.Data.OleDb;  

/// <summary>
/// Summary description for WebForm1.
/// </summary>
public class WebForm1 : System.Web.UI.Page
{
  protected ComponentArt.Web.UI.Menu Menu1; 

  private void Page_Load(object sender, System.EventArgs e)
  {
    if (!IsPostBack) buildMenu(); 
  }

  private void buildMenu()
  {
    OleDbConnection dbCon = new OleDbConnection ("Provider=Microsoft.Jet.OLEDB.4.0;Data Source=" + Server.MapPath("siteMap.mdb")); 
    dbCon.Open();

    OleDbDataAdapter adapter = new OleDbDataAdapter("SELECT * FROM SiteMap ORDER BY NodeId", dbCon); 
    DataSet ds = new DataSet();
    adapter.Fill(ds);
    ds.Relations.Add("NodeRelation", ds.Tables[0].Columns["NodeId"], ds.Tables[0].Columns["ParentNodeId"]);

    foreach(DataRow dbRow in ds.Tables[0].Rows)
    {
      if(dbRow.IsNull("ParentNodeId"))
      {          
        ComponentArt.Web.UI.MenuItem newItem = CreateItem(dbRow);
        Menu1.Items.Add(newItem);
        PopulateSubMenu(dbRow, newItem);
      }
    }
  }

  private void PopulateSubMenu(DataRow dbRow, ComponentArt.Web.UI.MenuItem item)
  {
    foreach (DataRow childRow in dbRow.GetChildRows("NodeRelation"))
    {        
      ComponentArt.Web.UI.MenuItem childItem = CreateItem(childRow);
      item.Items.Add(childItem);
      PopulateSubMenu(childRow, childItem);
    }
  }

  private ComponentArt.Web.UI.MenuItem CreateItem(DataRow dbRow)
  {
    ComponentArt.Web.UI.MenuItem item = new ComponentArt.Web.UI.MenuItem();
    item.Text = dbRow["Text"].ToString(); 
    item.NavigateUrl = dbRow["NavigateUrl"].ToString(); 
    item.LookId = dbRow["LookId"].ToString(); 
    item.Look.LeftIconUrl = dbRow["LeftIcon"].ToString(); 
    item.Look.HoverLeftIconUrl = dbRow["LeftIconHover"].ToString(); 
    item.Look.RightIconUrl = dbRow["RightIcon"].ToString(); 
    item.Look.HoverRightIconUrl = dbRow["RightIconHover"].ToString(); 
    return item;
  }



  #region Web Form Designer generated code
  override protected void OnInit(EventArgs e)
  {
    //
    // CODEGEN: This call is required by the ASP.NET Web Form Designer.
    //
    InitializeComponent();
    base.OnInit(e);
  }
  
  /// <summary>
  /// Required method for Designer support - do not modify
  /// the contents of this method with the code editor.
  /// </summary>
  private void InitializeComponent()
  {    
    this.Load += new System.EventHandler(this.Page_Load);

  }
  #endregion

} 
Imports System.Data.OleDb 
Public Class WebForm1
    Inherits System.Web.UI.Page
  Protected WithEvents Menu1 As ComponentArt.Web.UI.Menu

  Private Sub Page_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
    If Not IsPostBack Then buildMenu() 
  End Sub

  Private Sub buildMenu()
    Dim dbCon As New OleDbConnection ("Provider=Microsoft.Jet.OLEDB.4.0;Data Source=" + Server.MapPath("siteMap.mdb"))
    dbCon.Open()

    Dim adapter As New OleDbDataAdapter("SELECT * FROM SiteMap ORDER BY NodeId", dbCon)
    Dim ds As New System.Data.DataSet()
    adapter.Fill(ds)
    ds.Relations.Add("NodeRelation", ds.Tables(0).Columns("NodeId"), ds.Tables(0).Columns("ParentNodeId"))

    Dim dbRow As System.Data.DataRow
    For Each dbRow In ds.Tables(0).Rows
      If(dbRow.IsNull("ParentNodeId")) Then 
        Dim newItem As ComponentArt.Web.UI.MenuItem 
        newItem = CreateItem(dbRow)
        Menu1.Items.Add(newItem)
        PopulateSubMenu(dbRow, newItem)
      End If
    Next dbRow 
  End Sub

  Private Sub PopulateSubMenu(dbRow As System.Data.DataRow, item As ComponentArt.Web.UI.MenuItem)
    Dim childRow As System.Data.DataRow
    For Each childRow In  dbRow.GetChildRows("NodeRelation")
      Dim childItem As ComponentArt.Web.UI.MenuItem = CreateItem(childRow)
      item.Items.Add(childItem)
      PopulateSubMenu(childRow, childItem)
    Next childRow
  End Sub

  Private Function CreateItem(dbRow As System.Data.DataRow) As ComponentArt.Web.UI.MenuItem 
    Dim item As New ComponentArt.Web.UI.MenuItem()
    item.Text = dbRow("Text").ToString() 
    item.NavigateUrl = dbRow("NavigateUrl").ToString() 
    item.LookId = dbRow("LookId").ToString() 
    item.Look.LeftIconUrl = dbRow("LeftIcon").ToString() 
    item.Look.HoverLeftIconUrl = dbRow("LeftIconHover").ToString() 
    item.Look.RightIconUrl = dbRow("RightIcon").ToString() 
    item.Look.HoverRightIconUrl = dbRow("RightIconHover").ToString() 
    Return item
  End Function 


#Region " Web Form Designer Generated Code "

    'This call is required by the Web Form Designer.
    <System.Diagnostics.DebuggerStepThrough()> Private Sub InitializeComponent()

  End Sub

    Private Sub Page_Init(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Init
        'CODEGEN: This method call is required by the Web Form Designer
        'Do not modify it using the code editor.
        InitializeComponent()
    End Sub

#End Region

End Class 
.TopGroup
{
  background-color:#DBD7D0; 
  border:solid 1px gray; 
  cursor:default; 
}

.MenuGroup
{
  background-image:url(images/background.gif);
  background-color:#F9F8F7;
  border:solid 1px #7E7E81; 
  cursor:default; 
}

.TopMenuItem
{
  background-color:#DBD7D0; 
  color:black; 
  font-family:MS Sans Serif; 
  font-size:12px; 
  border:solid 1px #DBD7D0; 
  cursor:default; 
}

.TopMenuItemHover 
{
  background-color:#C2C5C8; 
  color:black; 
  font-family:MS Sans Serif; 
  font-size:12px; 
  border:solid 1px #A6A8B2; 
  cursor:default; 
}

.MenuItem
{
  font-family:MS Sans Serif; 
  font-size:9px; 
  cursor:default; 
}

.MenuItemHover 
{
  background-color:#C2C5C8; 
  font-family:MS Sans Serif; 
  font-size:9px; 
  cursor:default; 
}

.MenuBreak
{
  background-image:url(images/break_bg.gif);
  width:100%;
  height:1px;
} 
 
