Click here to Skip to main content
Click here to Skip to main content

Populating Menu Control in ASP.NET 2.0 - using different data sources

, 7 Oct 2005
Rate this:
Please Sign up or sign in to vote.
An article on how to populate the Menu control in ASP.NET 2.0 using different data sources.

Introduction

ASP.NET 2.0 is coming at us at a very fast pace. I have to admit that ASP.NET 2.0 is very different from ASP.NET 1.x. From now on most of the articles that you will see on this site will target ASP.NET 2.0. In this article I will look into the Menu control. We will look into populating the Menu control using different sources.

What is a Menu Control?

The Menu control is used to display menus. The menu can be displayed vertically or horizontally. Below are two screenshots showing vertical and horizontal menus:

Horizontal Menu:

Vertical Menu:

For making a menu change its orientation you just need to change the Orientation property of the Menu control to Horizontal or Vertical.

Now let's see the different approaches to populate a Menu control.

Populating the Menu using SiteMapDataSource

This is the preferred way of populating the Menu control. SiteMapDataSource allows you to read the information from the .sitemap file which is simply an XML file. Let's take a look at the .sitemap file. As you can see in the file below, all you need to do is to assign the values to the nodes and that's it.

<?xml version="1.0" encoding="utf-8" ?>
<siteMap>
 <siteMapNode url="Default.aspx" title="Home">
   <siteMapNode title="Products" description="Our Products">
      <siteMapNode url="Product1.aspx" title="My Products" 
          description="These are my products" />
      <siteMapNode url="Product2.aspx" title="New Products" 
          description="Some new products " />
   </siteMapNode>
   <siteMapNode title="Services" description="Our Services">
      <siteMapNode url="Service1.aspx" title="ASP.NET Consulting"
          description="Best ASP.NET Consulting" />
      <siteMapNode url="Service2.aspx" title="ASP.NET Training" 
          description="Best ASP.NET Training" />
   </siteMapNode>
 </siteMapNode>
</siteMap>

Now let's see how we build our menu using the .sitemap file above. All we are doing in the GetSiteMapDataSource method is getting the information from the Web.sitemap file and building the menu based on the contents of that file.

private void CreateMenuControl()
{
  Menu1.DataSource = GetSiteMapDataSource();
  Menu1.DataBind();
}

private SiteMapDataSource GetSiteMapDataSource()
{
  XmlSiteMapProvider xmlSiteMap = new XmlSiteMapProvider();
  System.Collections.Specialized.NameValueCollection 
         myCollection = new 
         System.Collections.Specialized.NameValueCollection(1);
  myCollection.Add("siteMapFile", "Web.sitemap");
  xmlSiteMap.Initialize("provider", myCollection);
  xmlSiteMap.BuildSiteMap();
  SiteMapDataSource siteMap = new SiteMapDataSource();
  return siteMap;
}

Populating the Menu using the Database

Suppose that you have some data in the database tables using which you want to populate the Menu. Although I prefer the .sitemap technique since that is its sole purpose, the code below shows how you can use database as a data source.

private void PopulateMenu()
{
  DataSet ds = GetDataSetForMenu();
  Menu menu = new Menu();

  foreach (DataRow parentItem in ds.Tables["Categories"].Rows)
  {
    MenuItem categoryItem = new MenuItem((string)parentItem["CategoryName"]);
    menu.Items.Add(categoryItem);

    foreach (DataRow childItem in parentItem.GetChildRows("Children"))
    {
      MenuItem childrenItem = new MenuItem((string)childItem["ProductName"]);
      categoryItem.ChildItems.Add(childrenItem);
    }
  }

  Panel1.Controls.Add(menu);
  Panel1.DataBind();
}

private DataSet GetDataSetForMenu()
{
  SqlConnection myConnection = new SqlConnection(GetConnectionString());
  SqlDataAdapter adCat = new SqlDataAdapter("SELECT * FROM Categories", myConnection);
  SqlDataAdapter adProd = new SqlDataAdapter("SELECT * FROM Products", myConnection);

  DataSet ds = new DataSet();
  adCat.Fill(ds, "Categories");
  adProd.Fill(ds, "Products");
  ds.Relations.Add("Children", 
     ds.Tables["Categories"].Columns["CategoryID"], 
     ds.Tables["Products"].Columns["CategoryID"]);
  return ds;
}

Let's first look at the GetDataSetForMenu() since its being called from PopulateMenu(). In the GetDataSetForMenu() method we make a relationship between the Categories table and the Products table.

The PopulateMenu() methods receives the DataSet from the GetDataSetForMenu() and iterates through the DataSet. For each iteration it creates a new MenuItem and adds it into the menu items collection.

Populating the Menu Control Using an XML File

You can also populate the menu using a simple XML file. Check out the code below:

private void CreateMenuWithXmlFile()
{
  string path = @"C:\MyXmlFile.xml";
  DataSet ds = new DataSet();
  ds.ReadXml(path);
  Menu menu = new Menu();
  menu.MenuItemClick += new MenuEventHandler(menu_MenuItemClick);

  for (int i = 0; i < ds.Tables.Count; i++)
  {
    MenuItem parentItem = new MenuItem((string)ds.Tables[i].TableName);
    menu.Items.Add(parentItem);

    for (int c = 0; c < ds.Tables[i].Columns.Count; c++)
    {
      MenuItem column = new MenuItem((string)ds.Tables[i].Columns[c].ColumnName);
      menu.Items.Add(column);

      for (int r = 0; r < ds.Tables[i].Rows.Count; r++)
      {
        MenuItem row = new MenuItem((string)ds.Tables[i].Rows[r][c].ToString());
        parentItem.ChildItems.Add(row);
      }
    }
  }

  Panel1.Controls.Add(menu);
  Panel1.DataBind();
}

I get the XML from the DataSet ReadXML() method. And after that it's just a matter of iterating through the DataSet and making MenuItems.

I hope you liked the article. The project file is also attached, please download it and run the application.

License

This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here

Share

About the Author

azamsharp
Web Developer
United States United States
I am the founder of knowledge base website, HighOnCoding, GridViewGuy, RefactorCode.com and ScreencastADay.com.
 
HighOnCoding is a website which will get you high legally with useful information. There are tons of articles, videos and podcasts hosted on HighOnCoding.
 
HighOnCoding.com www.HighOnCoding.com
 

My Blog:

Blog

 

Buy my iPhone app ABC Pop

Comments and Discussions

 
QuestionMenu from DataTable PingroupWisen Technologies27-Jul-13 6:17 
QuestionMouseover Tabs Menu PinmemberMS Babu10-May-13 21:25 
GeneralMy vote of 2 Pinmemberbehzad200021-Feb-13 21:55 
Questioncan we use web.sitemap and database records together Pinmembermahadev12819-Jan-12 20:49 
Generalhelp Pinmembermonsterofmonsters12-May-11 1:24 
GeneralHow can you make parent selected while navigating child item using Sitemap/ Menu PinmemberAbdul Kalam24-Apr-11 1:22 
Answer10000000 thanks Pinmemberaicha200818-Nov-09 0:41 
GeneralMy vote of 1 PinmemberJames Rike17-Oct-09 10:42 
GeneralXML file PinmemberMuhammad Ajmal Jameel29-Sep-09 2:35 
GeneralMy vote of 1 PinmemberMuhammad Ajmal Jameel29-Sep-09 2:17 
Generalmenus Pinmemberpariofshona15-Jul-09 1:19 
Generalmenus Pinmemberpariofshona15-Jul-09 0:40 
Questionis it working? Pinmemberwoo1235-Jun-09 12:17 
AnswerRe: is it working? Pinmemberearl_hyde14-May-10 8:08 
GeneralASP Staggered Horizontal Menus -- Reduce the width of first submenu item for upper menu. PinmemberJim Slavens27-May-09 13:46 
Questionmenu controll in asp.net with c# Pinmemberjobitha13-May-09 23:00 
QuestionMenu Control in ASP.NET using C# and SQL Database only with URL Functionality Pinmemberurvipin30-Mar-09 2:37 
GeneralNeed Help Urgently.. Pinmemberbinoy rajan21-Oct-08 5:44 
Generalfor the people who comments useless stuff Pinmemberstormbind15-Oct-08 21:03 
Generalgood work PinmemberSujithMysore27-Aug-08 21:07 
Questionhow can i create the menu control like microsoft site and the code project site Pinmemberkanzz22-Jul-08 2:31 
QuestionCan I have multiple sitemap File ? PinmemberTejas G. Patel3-Nov-07 21:34 
GeneralI normally just avoid tutorials that miss the point... Pinmemberaaava5-Jul-07 15:08 
GeneralRe: I normally just avoid tutorials that miss the point... Pinmembershadyscience@yahoo.com17-Jul-08 0:40 
Questionhow to select item PinmemberUmer Khan3-Jun-07 21:48 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Terms of Use | Mobile
Web03 | 2.8.141223.1 | Last Updated 7 Oct 2005
Article Copyright 2005 by azamsharp
Everything else Copyright © CodeProject, 1999-2014
Layout: fixed | fluid